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


Posted in Javascript onJanuary 21, 2013
<!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]); 
} 
} 
}
Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
javascript while语句和do while语句的区别分析
Dec 08 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
php中给js数组赋值方法
Mar 10 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 #Javascript
使用jquery实现图文切换效果另加特效
Jan 20 #Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 #Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 #Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 #Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 #Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 #Javascript
You might like
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php mysql数据库操作分页类
2008/06/04 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
vue实现的下拉框功能示例
2019/01/29 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
Overload和Override的区别
2012/09/02 面试题
有关打架的检讨书
2014/01/25 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
七夕情人节促销方案
2014/06/07 职场文书
艾滋病宣传标语
2014/06/25 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
长江三峡导游词
2015/01/31 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书