The highlighting function mainly refers to highlighting the specified text in the specified area in the page, that is, background coloring. This function is usually used on search results pages.
Here is a solution for you to implement it using javascript.
First, introduce the following javascript method in <head>:
The code copy is as follows:
<script type="text/javascript">
//<![CDATA[
//--------begin function fHl(o, flag, rndColor, url)------------------//
function fHl(o, flag, rndColor, url){
/// <summary>
/// Use javascript HTML DOM to highlight page-specific words.
/// Example:
/// fHl(document.body, 'paper umbrella|she');
/// The body here refers to the content in the highlighted body.
/// fHl(document.body, 'hope|sorry', false, '/');
/// fHl(document.getElementById('at_main'), 'Solar|Floating|Long', true, 'search.asp?keyword=');
/// The 'at_main' here refers to the content in the div with highlighted id='at_main'. search.asp?keyword=refers to the link address added to the keyword,
/// I have added a parameter here and will be used later. Can be any address.
/// </summary>
/// <param name="o" type="Object">
/// Object, the object to be highlighted.
/// </param>
/// <param name="flag" type="String">
/// String, to highlight the word or multiple words, use vertical bars (|) to separate multiple words.
/// </param>
/// <param name="rndColor" type="Boolean">
/// Boolean value, whether to randomly display the text background color and text color, true means random display.
/// </param>
/// <param name="url" type="String">
/// URI, whether to add links to highlighted words.
/// </param>
/// <return></return>
var bgCor=fgCor='';
if(rndColor){
bgCor=fRndCor(10, 20);
fgCor=fRndCor(230, 255);
} else {
bgCor='#F0F';
fgCor='black';
}
var re=new RegExp(flag, 'i');
for(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);
} else if (o_.nodeType==3) {
if(!(o_p.nodeName=='A')){
if(o_.data.search(re)==-1)continue;
var temp=fEleA(o_.data, flag);
o_p.replaceChild(temp, o_);
}
}
}
//------------------------------------------------
function fEleA(text, flag){
var style=' style="background-color:'+bgCor+';color:'+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>'); // Here is a link to the keyword, and the red $1 refers to the specific parameters after the link address above.
} else {
str=text.replace(re, '<span '+style+'>$1</span>'); //Show when not linking
}
o.innerHTML=str;
return o;
}
//------------------------------------------------
function fRndCor(under, over){
if(arguments.length==1){
var over=under;
under=0;
}else if(arguments.length==0){
var under=0;
var over=255;
}
var r=fRandomBy(under, over).toString(16);
r=padNum(r, r, 2);
var g=fRandomBy(under, over).toString(16);
g=padNum(g, g, 2);
var b=fRandomBy(under, over).toString(16);
b=padNum(b, b, 2);
//defaultStatus=r+' '+g+' '+b
return '#'+r+g+b;
function fRandomBy(under, over){
switch(arguments.length){
case 1: return parseInt(Math.random()*under+1);
case 2: return parseInt(Math.random()*(over-under+1) + under);
default: return 0;
}
}
function padNum(str, num, len){
var temp=''
for(var i=0; i<len;temp+=num, i++);
return temp=(temp+=str).substr(temp.length-len);
}
}
}
//--------end function fHl(o, flag, rndColor, url)--------------------//
//]]>
</script>
The above fHl method is used to achieve highlighting, and the meaning of the parameters is written in the comments.
Then call the fHl method at the end of the page to highlight the text for the specified area, for example:
The code copy is as follows:
<script type="text/javascript">
fHl(document.body, 'highlight'); //Color the background of the "highlight" text in the area of the page body
</script>
How about it, it's very simple~