La fonction de mise en évidence se réfère principalement à la mise en évidence du texte spécifié dans la zone spécifiée de la page, c'est-à-dire une coloration d'arrière-plan. Cette fonction est généralement utilisée sur les pages de résultats de recherche.
Voici une solution pour vous implémenter à l'aide de JavaScript.
Tout d'abord, introduisez la méthode JavaScript suivante dans <Aad>:
La copie de code est la suivante:
<script type = "text / javascript">
// <! [Cdata [
// -------- commencer la fonction fhl (o, drapeau, rndcolor, url) ------------------ //
fonction fhl (o, drapeau, rndcolor, url) {
/// <résumé>
/// Utilisez JavaScript HTML Dom pour mettre en surbrillance les mots spécifiques à la page.
/// Exemple:
/// fhl (document.body, 'papier parapluie | elle');
/// Le corps ici fait référence au contenu du corps en surbrillance.
/// fhl (document.body, 'Hope | désolé', false, '/');
/// fhl (document.getElementById ('at_main'), 'solar | floating | long', true, 'search.asp? keyword =');
/// le 'at_main' ici fait référence au contenu de la div avec id en surbrillance = 'at_main'. search.asp? Keyword = se réfère à l'adresse de liaison ajoutée au mot clé,
/// J'ai ajouté un paramètre ici et je serai utilisé plus tard. Peut être n'importe quelle adresse.
/// </summary>
/// <param name = "o" type = "objet">
/// Objet, l'objet à mettre en surbrillance.
/// </ param>
/// <param name = "flag" type = "string">
/// String, pour mettre en évidence le mot ou plusieurs mots, utilisez des barres verticales (|) pour séparer plusieurs mots.
/// </ param>
/// <param name = "rndcolor" type = "boolean">
/// Valeur booléenne, s'il faut afficher au hasard la couleur de l'arrière-plan du texte et la couleur du texte, vrai signifie l'affichage aléatoire.
/// </ param>
/// <param name = "url" type = "string">
/// uri, s'il faut ajouter des liens vers des mots en surbrillance.
/// </ param>
/// <retour> </ retour>
var bgcor = fgcor = '';
if (rndcolor) {
BGCOR = FRNDCOR (10, 20);
FGCOR = FRNDCOR (230, 255);
} autre {
bgcor = '# f0f';
fGCOR = 'Black';
}
var re = new regexp (drapeau, 'i');
pour (var i = 0; i <o.childnodes.length; i ++) {
var o_ = o.childNodes [i];
var o_p = o_.parentNode;
if (o_.nodeType == 1) {
fhl (o_, drapeau, rndcolor, url);
} else if (o_.nodeType == 3) {
if (! (o_p.nodename == 'a')) {
if (o_.data.search (re) == - 1) continuer;
var temp = felea (o_.data, drapeau);
o_p.replacechild (temp, o_);
}
}
}
// ------------------------------------------------
fonction felea (texte, drapeau) {
var style = 'style = "background-color:' + bgcor + '; couleur:' + fgcor + ';" '
var o = document.CreateElement ('span');
var str = '';
var re = new regexp ('(' + flag + ')', 'gi');
if (url) {
str = text.replace (re, '<a href = "' + url +
'1 $ "' + style + '> 1 $ </a>'); // voici un lien vers le mot-clé, et le 1 $ rouge fait référence aux paramètres spécifiques après l'adresse de liaison ci-dessus.
} autre {
str = text.replace (re, '<span' + style + '> $ $ </span>'); // montre lorsqu'il ne lie pas
}
o.innerhtml = str;
retour o;
}
// ------------------------------------------------
fonction frndcor (sous, over) {
if (arguments.length == 1) {
var over = sous;
sous = 0;
} else if (arguments.length == 0) {
var sous = 0;
var sur = 255;
}
var r = frandomby (sous, over) .tostring (16);
r = padnum (r, r, 2);
var g = frandomby (sous, over) .tostring (16);
g = padnum (g, g, 2);
var b = frandomby (sous, over) .tostring (16);
b = padnum (b, b, 2);
// defaultstatus = r + '' + g + '' + b
return '#' + r + g + b;
fonction frandomby (sous, over) {
commutateur (arguments.length) {
Cas 1: RETOUR PARSEIINT (MATH.RANDOM () * sous + 1);
Cas 2: RETOUR PARSEIINT (MATH.RANDOM () * (sur-sous + 1) + Under);
par défaut: return 0;
}
}
Fonction Padnum (str, num, len) {
var temp = ''
pour (var i = 0; i <len; temp + = num, i ++);
Retour Temp = (temp + = str) .substr (temp.length-len);
}
}
}
// -------- Fonction de fin fhl (o, drapeau, rndcolor, url) -------------------- //
//]]>
</cript>
La méthode FHL ci-dessus est utilisée pour atteindre la mise en évidence et la signification des paramètres est écrite dans les commentaires.
Ensuite, appelez la méthode FHL à la fin de la page pour mettre en surbrillance le texte de la zone spécifiée, par exemple:
La copie de code est la suivante:
<script type = "text / javascript">
FHL (document.body, «Highlight»); // colore l'arrière-plan du texte "Highlight" dans la zone du corps de la page
</cript>
Et ça, c'est très simple ~