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]);
}
}
}

时间: 2013-01-20

使用 js+正则表达式为关键词添加链接

要求把一段html脚本中的疾病名添加到疾病库的链接,只添加一次,要避开超链接或图片链接. 最初是用的    str.replace('糖尿病', '<a href=...>糖尿病</a>'); 结果找了半天,愣是没找到替换后的效果,原来是有个图片的title中包含糖尿病,被它捷足先登了. 因此要把<a>链接.<img>标签避开,但<p><div>等标签不用避开 上图: 复制代码 代码如下: s = "<a href='

JS实现获取来自百度,Google,soso,sogou关键词的方法

本文实例讲述了JS实现获取来自百度,Google,soso,sogou关键词的方法.分享给大家供大家参考,具体如下: /*可获取用户,通过哪个关键词访问该页,可自行添加SOGOU,SOSO,有道等搜索引擎*/ var refer=document.referrer; var sosuo=refer.split(".")[1]; var grep=null; var str=null; var keyword=null; switch(sosuo){ case "baidu&q

js文本中搜索关键词输入效果

搜索类型 文章 图片 商品 点评 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

firefox下javascript实现高亮关键词的方法

复制代码 代码如下: IE下有:   var range = document.createRange();   FireFox下有:   var range = document.body.createTextRange(); IE下有findText及pasteHTML,但是fireFox下就没有!怎么办?查了好多资料,都没有能说出个所以然的,皇天不负有心人,终于让我给搞出来了! 注:我这里不是用正则替换,因为正则替换有它的不足之处! 不知道先前有没有高人研究过这种方法. Untitled

JS实现搜索关键词的智能提示功能

最近在百度搜索的时候,当你输入一个字或者词的时候,他会给你们弹出一个下拉框出来,里面是和你相关的搜索提示 比如 我输入杨字,他会给我提示以下搜索提示 我尝试着用JavaScript做了一个类似的练习,以下是我用VS2013写的代码,有不对的地方,请不吝赐教. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

javascript实现页面内关键词高亮显示代码

复制代码 代码如下: <!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=&qu

JavaScript禁止页面操作的示例代码

单的JS禁止页面右键菜单--避免网站信息被盗用 复制代码 代码如下: <script type="text/javascript">  function block(oEvent){   if(window.event)    oEvent=window.event;   if(oEvent.button==2)    alert("鼠标右键不可用");  }  document.onmousedown=block;</script> 网页上

在JSP页面内编写java代码方法总结

JSP脚本元素的类型 脚本元素提供了在jsp中插入java代码的能力.脚本元素有三种类型: 脚本(scriptlet): 是JSP页面中Java代码片段的容器.将页面转换为servlet类时,会将scriptlet内容插入到servlet类的jspService()方法中,同时从JSP生成servlet.语法如下: <% java源代码 %> 表达式(expression): 用于将转换为String的Java表达式的值插入到返回给客户端的响应中.语法如下: <%= 表达式语句 %>

jquery实现页面关键词高亮显示的方法

本文实例讲述了jquery实现页面关键词高亮显示的方法.分享给大家供大家参考.具体分析如下: 通过jquery对页面搜索关键词进行高亮显示 支持中文多词页面中高亮显示 1. JavaScript代码如下: 复制代码 代码如下: jQuery.fn.extend({     highlight: function(search, configs){         if(typeof(search) == 'undefined') return;         var configs =  jQ

用JavaScript获取页面文档内容的实现代码

JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题.各个表单值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基础</title> </head> <body> <p>一. 用Documen

JavaScript获取页面上某个元素的代码

W3C标准推荐的语法是通过document文档对象获取DOM树内的内的某个元素,常见的方法有getElementById().getElementsByName().getElementsByTagName(),他们的作用分别通过id属性.name属性/标签名称返回单个节点或节点集合. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

JavaScript实现同一页面内两个表单互相传值的方法

本文实例讲述了JavaScript实现同一页面内两个表单互相传值的方法.分享给大家供大家参考.具体如下: 有时候我们在提交表单的时候需要将两个表单的值互相传递,那么如何实现呢?其实很简单,就是用JavaScrip获取任一表单的值,然后赋给另一个,具体可看代码,代码很有意思,也很实用. 运行效果截图如下: 具体代码如下: <html> <head> <title>JavaScript同一页面两个表单互相传值</title> <meta http-equi

纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)

实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } body, html{ height: 100%; } ul{ list-style: n

javascript 打印页面代码

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascript打印页面</title> <script type="text/javascript"><!-- function fPrint(){ //隐藏不需要打印的内容. document.getElementById("divOperate

JS实现页面内跳转的简单代码

使用js($.ajax中)实现页面内跳转(即:描点平滑跳转)的方法(aa为跳转目的标签的id): 在网络上有很多资料所说的:animate方法我试了并不好使,不知道是啥原因,欢迎大家指正,附上网络方法: var oneTop = $("#aa").offset().top; jQuery("html", "body").animate({ scrollTop: oneTop }, 0); 经过测试,如果不需要有滑动动画的话,可使用下面的语句: l