js 关键词高亮(根据ID/tag高亮关键字)案例介绍_Javascript教程-查字典教程网
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:JS关键词高亮/**参数说明:*obj:对象,要进行高亮显示的html标签节点.*hlWords:字符串,要进行高亮的关键...

复制代码 代码如下:

<!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 = ' + 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="搜索" /><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]);

}

}

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类