javascript

Javascript page keyword highlighting code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title> Keyword highlighting </title>
</head>
<body>
<div class="result" id="textbox">
<p> Baidu ( Nasdaq Hereinafter referred to as: BIDU ) is the world's largest Chinese search engine, 2000 years 1 Founded by robin li and xu yong in zhongguancun, Beijing, the month is dedicated to providing "simple and reliable" products </p>
<p> Information acquisition methods. The word "baidu" originated from the song dynasty poet xin qiji's poem "qingyu case ยท yuan xi", which symbolizes baidu's persistent pursuit of Chinese information retrieval technology. </p>
</div>
<script>
function highlight(idVal, keyword) {
var textbox = document.getElementById(idVal);
if ("" == keyword) return;
//Get all the text content
var temp = textbox.innerHTML;
console.log(temp);
var htmlReg = new RegExp("<.*?>", "i");
var arr = new Array();

//Replace HTML tags
for (var i = 0; true; i++) {
//Match HTML tags
var tag = htmlReg.exec(temp);
if (tag) {
arr[i] = tag;
} else {
break;
}
temp = temp.replace(tag, "{[(" + i + ")]}");
}


//I'm going to split the keywords into an array
words = decodeURIComponent(keyword.replace(/,/g, ' ')).split(/s+/);

//Replace keyword
for (w = 0; w < words.length; w++) {
//Match the keyword and keep the special characters that can appear in the keyword
var r = new RegExp("(" + words[w].replace(/[(){}.+*?^$|\[]]/g, "\$&") + ")", "ig");
temp = temp.replace(r, "<b style='color:Red;'>$1</b>");
}

//Restore HTML tags
for (var i = 0; i < arr.length; i++) {
temp = temp.replace("{[(" + i + ")]}", arr[i]);
}
textbox.innerHTML = temp;
}
highlight("textbox"," baidu , Robin Li ");
</script>
</body>
</html>