web关键词搜索高亮代码
<script type="text/javascript"> /* * 参数说明: * obj: 对象, 要进行高亮显示的html标签节点. * hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格分隔多个词 . * bgColor: 背景颜色,默认为红色. */ function MarkHighLight(obj, hlWords, bgColor) { hlWords = AnalyzeHighLightWords(hlWords); if (obj == null || hlWords.length == 0) return; if (bgColor == null || bgColor == "") { bgColor = "red"; } MarkHighLightCore(obj, hlWords); //执行高亮标记的核心方法 function MarkHighLightCore(obj, keyWords) { var re = new RegExp(keyWords, "i"); var style = ‘ style="background-color:‘ + bgColor + ‘;" ‘ 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" + style + ">$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 window.onload = function search() { var obj = document.getElementById("container"); var keyWord = "${str}"; MarkHighLight(obj, keyWord, "Yellow"); } </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。