Fungsi penyorotan terutama mengacu pada menyorot teks yang ditentukan di area yang ditentukan di halaman, yaitu, pewarnaan latar belakang. Fungsi ini biasanya digunakan pada halaman hasil pencarian.
Berikut adalah solusi bagi Anda untuk mengimplementasikannya menggunakan JavaScript.
Pertama, perkenalkan metode JavaScript berikut di <head>:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
// <! [CDATA [
// -------- mulai fungsi fhl (o, flag, rndcolor, url) ------------------ //
fungsi fhl (o, flag, rndcolor, url) {
/// <summary>
/// Gunakan JavaScript HTML DOM untuk menyorot kata-kata khusus halaman.
/// Contoh:
/// fhl (document.body, 'payung kertas | dia');
/// Tubuh di sini mengacu pada konten dalam tubuh yang disorot.
/// fhl (document.body, 'Hope | maaf', false, '/');
/// fhl (document.getElementById ('at_main'), 'solar | floating | long', true, 'search.asp? kata kunci =');
/// 'at_main' di sini mengacu pada konten di div dengan id yang disorot = 'at_main'. Search.asp? Kata kunci = mengacu pada alamat tautan yang ditambahkan ke kata kunci,
/// Saya telah menambahkan parameter di sini dan akan digunakan nanti. Bisa berupa alamat apapun.
/// </summary>
/// <param name = "o" type = "objek">
/// Objek, objek yang akan disorot.
/// </param>
/// <param name = "flag" type = "string">
/// string, untuk menyoroti kata atau banyak kata, menggunakan vertikal batang (|) untuk memisahkan banyak kata.
/// </param>
/// <param name = "rndcolor" type = "boolean">
/// nilai boolean, apakah akan secara acak menampilkan warna latar belakang teks dan warna teks, true berarti tampilan acak.
/// </param>
/// <param name = "url" type = "string">
/// Uri, apakah akan menambahkan tautan ke kata -kata yang disorot.
/// </param>
/// <Return> </balas>
var bgcor = fgcor = '';
if (rndcolor) {
bgcor = frndcor (10, 20);
fgcor = frndcor (230, 255);
} kalau tidak {
bgcor = '#f0f';
fgcor = 'hitam';
}
var re = regexp baru (flag, 'i');
untuk (var i = 0; i <o.childnodes.length; i ++) {
var o_ = o.childnodes [i];
var o_p = o_.parentnode;
if (o_.nodetype == 1) {
fhl (o_, flag, rndcolor, url);
} lain jika (o_.nodetype == 3) {
if (! (o_p.nodename == 'a')) {
if (o_.data.search (re) ==-1) lanjutkan;
var temp = felea (o_.data, bendera);
o_p.replacechild (temp, o_);
}
}
}
// -------------------------------------------------
function felea (teks, flag) {
var style = 'style = "latar belakang:'+bgcor+'; warna:'+fgcor+';" '
var o = document.createElement ('span');
var str = '';
var re = regexp baru ('('+flag+')', 'gi');
if (url) {
str = text.replace (re, '<a href = "'+url+
'$ 1 "'+style+'> $ 1 </a>'); // Berikut ini tautan ke kata kunci, dan merah $ 1 mengacu pada parameter spesifik setelah alamat tautan di atas.
} kalau tidak {
str = text.replace (re, '<span'+style+'> $ 1 </span>'); // Tunjukkan saat tidak menautkan
}
o.innerhtml = str;
kembali o;
}
// -------------------------------------------------
fungsi frndcor (di bawah, over) {
if (arguments.length == 1) {
var over = di bawah;
di bawah = 0;
} lain if (arguments.length == 0) {
var di bawah = 0;
var over = 255;
}
var r = frandomby (di bawah, lebih) .tostring (16);
r = padnum (r, r, 2);
var g = frandomby (di bawah, lebih) .tostring (16);
g = padnum (g, g, 2);
var b = frandomby (di bawah, lebih) .tostring (16);
b = padnum (b, b, 2);
// defaultStatus = r+''+g+''+b
return '#'+r+g+b;
Fungsi Frandomby (Under, Over) {
switch (arguments.length) {
Kasus 1: return parseInt (math.random ()*di bawah+1);
kasus 2: return parseInt (math.random ()*(over-under + 1) + di bawah);
Default: return 0;
}
}
function padnum (str, num, len) {
var temp = ''
untuk (var i = 0; i <len; temp+= num, i ++);
return temp = (temp+= str) .substr (temp.length-len);
}
}
}
// -------- fungsi akhir fhl (o, flag, rndcolor, url) -------------------- //
//]]>
</script>
Metode FHL di atas digunakan untuk mencapai penyorotan, dan arti parameter ditulis dalam komentar.
Kemudian hubungi metode FHL di akhir halaman untuk menyorot teks untuk area yang ditentukan, misalnya:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
fhl (document.body, 'highlight'); // Warnai latar belakang teks "sorot" di area bodi halaman
</script>
Bagaimana dengan itu, ini sangat sederhana ~