JS实现关键词高亮
程序员文章站
2022-05-17 11:34:29
...
想起以前做博客系统时,对搜索时的关键字做高亮时没搞出来,无聊之际从网上找到相关代码略加修改,方便以后查找:ok,上代码:
<!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>JS 关键词高亮</title> <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 function search() { var obj = document.getElementById("waiDiv"); var keyWord = document.getElementById("keyWord"); MarkHighLight(obj, keyWord.value, "Orange"); } </script> </head> <body> <div id="waiDiv"> <input type="text" id="keyWord" /> <input type="button" value="搜索" onclick="search()" /><br /> <br /> <div id="contentDiv"> 网上说Repository是一个独立的层,介于领域层与数据映射层(数据访问层)之间。它的存在让领域层感觉不到数据访问层的存在,它提供一个类似集合的接口提供给领域层进行领域对象的访问。Repository是仓库管理员,领域层需要什么东西只需告诉仓库管理员,由仓库管理员把东西拿给它,并不需要知道东西实际放在哪 </div><br/><br/> <textarea rows="2" cols="2" style="width:100%;height:100px;">网上说Repository是一个独立的层,介于领域层与数据映射层(数据访问层)之间。它的存在让领域层感觉不到数据访问层的存在,它提供一个类似集合的接口提供给领域层进行领域对象的访问。Repository是仓库管理员,领域层需要什么东西只需告诉仓库管理员,由仓库管理员把东西拿给它,并不需要知道东西实际放在哪</textarea> </div> </body> </html>
运行结果:
对于上面的字母没有区分大小写;
上一篇: 一段根据URL地址动态高亮显示菜单的js代码,很好用!
下一篇: Eclipse中高亮显示相同的变量