js 关键词高亮(根据ID/tag高亮关键字)案例介绍

175 阅读 0 评论 116 点赞

我是靠谱客的博主无私苗条，最近开发中收集的这篇文章主要介绍js 关键词高亮(根据ID/tag高亮关键字)案例介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<!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"> 
二货朋友玩游戏被骗1200块，报警后被告知不够2000没办法立案。强大的二货又往那个账号寄了800块。你说那骗子是开心呢？还是开心极了呢。 
</div> 
</div> 
</body> 
</html> 

改进版

复制代码代码如下:

 
function highlightWord(node, word) { 
// Iterate into this nodes childNodes 
if (node.hasChildNodes) { 
var hi_cn; 
for (hi_cn = 0; hi_cn < node.childNodes.length; hi_cn++) { 
highlightWord(node.childNodes[hi_cn], word); 
} 
} 
// And do this node itself 
if (node.nodeType == 3) { // text node 
tempNodeVal = node.nodeValue.toLowerCase(); 
tempWordVal = word.toLowerCase(); 
if (tempNodeVal.indexOf(tempWordVal) != -1) { 
pn = node.parentNode; 
if (pn.className != "highlight") { 
// word has not already been highlighted! 
nv = node.nodeValue; 
ni = tempNodeVal.indexOf(tempWordVal); 
// Create a load of replacement nodes 
before = document.createTextNode(nv.substr(0, ni)); 
docWordVal = nv.substr(ni, word.length); 
after = document.createTextNode(nv.substr(ni + word.length)); 
hiwordtext = document.createTextNode(docWordVal); 
hiword = document.createElement("span"); 
hiword.className = "highlight"; 
hiword.appendChild(hiwordtext); 
pn.insertBefore(before, node); 
pn.insertBefore(hiword, node); 
pn.insertBefore(after, node); 
pn.removeChild(node); 
} 
} 
} 
} 
//根据Tag名高亮关键字 
function SearchHighlightTag(node, key) { 
if (!document.createElement) return; 
if (key.length === 0) return false; 
var array = new Array(); 
array = key.split(" "); 
var element = document.getElementsByTagName(node); 
for (var i = 0; i < array.length; i++) { 
for (var j = 0; j < element.length; j++) { 
highlightWord(element[j], array[i]); 
} 
} 
} 
//根据ID高亮关键字 
function SearchHighlightID(node, key) { 
if (!document.createElement) return; 
if (key.length === 0) return false; 
var array = new Array(); 
array = key.split(" "); 
var element = document.getElementById(node); 
for (var i = 0; i < array.length; i++) { 
for (var j = 0; j < element.length; j++) { 
highlightWord(element, array[i]); 
} 
} 
} 