javascript 多个搜索词|基本词高亮
日期：2014-05-16 浏览次数：20326 次
<!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>无标题文档</title>
</head>
<body>
<style>
.highlight{ background-color:#ff0; color:#000;}
</style>
我是无辜的关键词，躺着不中枪
<hr>
<div id="content"> 用JS让文章内容指定的关键字加亮
? 是这样的.. <a href="#">现在有这些关键字:美容,生活,购物</a> 当在文章里头出现这些关键字,就把它加亮显示..
? 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
? 不知道怎样来实现这样的功能啊?特此求助 </div>
<script type="text/javascript">
/*----------------------------------------*
* 参数说明:
* obj: 对象, 要进行高亮显示的html标签节点.
* hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格 分隔多个词 .
* cssClass: 字符串, 定义关键词突出显示风格的css伪类.
* 参考资料: javascript HTML DOM 高亮显示页面特定字词
\*----------------------------------------*/
function MarkHighLight(obj, hlWords, cssClass) {
??? hlWords = AnalyzeHighLightWords(hlWords);
??? if (obj == null || hlWords.length == 0) return;
??? if (cssClass == null) cssClass = "highlight";
??? MarkHighLightCore(obj, hlWords);
??? //------------执行高亮标记的核心方法----------------------------
??? function MarkHighLightCore(obj, keyWords) {
??????? var re = new RegExp(keyWords, "i");
??????? for (var i = 0; i < obj.childNodes.length; i++) {
??????????? var childObj = obj.childNodes[i];
??????????? if (childObj.nodeType == 3) {
??????????????? if (childObj.data.search(re) == -1) continue;
??????????????? var reResult = new RegExp("(" + keyWords + ")", "gi");
??????????????? var objResult = document.createElement("span");
??????????????? objResult.innerHTML = childObj.data.replace(reResult, "<span class='" + cssClass + "'>$1</span>");
??????????????? if (childObj.data == objResult.childNodes[0].innerHTML) continue;
??????????????? obj.replaceChild(objResult, childObj);
??????????? } else if (childObj.nodeType == 1) {
??????????????? MarkHighLightCore(childObj, keyWords);
??????????? }
??????? }
??? }
??? //----------分析关键词----------------------
??? function AnalyzeHighLightWords(hlWords) {
??????? if (hlWords == null) return "";
??????? hlWords = hlWords.replace(/\s+/g, "|").replace(/\|+/g, "|");
??????? hlWords = hlWords.replace(/(^\|*)|(\|*$)/g, "");
??????? if (hlWords.length == 0) return "";
??????? var wordsArr = hlWords.split("|");
??????? if (wordsArr.length > 1) {
??????????? var resultArr = BubbleSort(wordsArr);
??????????? var result = "";
??????????? for (var i = 0; i < resultArr.length; i++) {
??????????????? result = result + "|" + resultArr[i];
??????????? }
??????????? return result.replace(/(^\|*)|(\|*$)/g, "");
??????? } else {
??????????? return hlWords;
??????? }
??? }
??? //-----利用冒泡排序法把长的关键词放前面-----?
??? function BubbleSort(arr) {
??????? var temp, exchange;
??????? for (var i = 0; i < arr.length; i++) {
??????????? exchange = false;
??????????? for (var j = arr.length - 2; j >= i; j--) {
??????????????? if ((arr[j + 1].length) > (arr[j]).length) {
??????????????????? temp = arr[j + 1];
??????????????????? arr[j + 1] = arr[j];
??????????????????? arr[j] = temp;
??????????????????? exchange = true;
??????????????? }
??????????? }
??????????? if (!exchange) break;
??????? }
??????? return arr;
??? }
}
//----------------end------------------------
var divObj = document.getElementById("content");
MarkHighLight(divObj, '文章|关键|功能');
</script>
</body>
</html>
