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实现搜索关键词的智能提示功能

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

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

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

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

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

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

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+正则表达式为关键词添加链接

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

js正则表达式中的单行模式与多行模式实例分析

本文实例分析了js正则表达式中的单行模式与多行模式.分享给大家供大家参考.具体如下: js正则表达式是不支持单行模式的.也就是说,不能把某段内容(有换行),采用模式修正符来处理,使整段内容当成一行来处理. 正则多行替换,需要添加/mg模式增强符. <html> <head> <script type="text/javascript"> //正则替换链接,链接有换行 function t1(){ var con = document.getEleme

浅谈JS正则表达式的RegExp对象和括号的使用

RegExp对象的创建: 常规的正则表达式的创建可用直接量,即斜杠 "/" 括起来的字符.但在要求参数变化的环境下,RegExp()构造函数是更好的选择: var reg1 = /'\w+'/g; var reg2 = new RegExp('\'\\w+\'','g'); 对比两种创建方式,RegExp中的第一个参数为要创建的正则字符串,一方面注意,因为不是直接量的表示形式,因此不用斜杠" / "括起来了:而是字符串中必须要对引号" ' "和转

js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析

本文实例分析了js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法.分享给大家供大家参考,具体如下: 最近在阅读RequireJS 2.1.15源码,源码开始处定义了一系列的变量,有4个正则表达式: var commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg, cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g, jsS

详解js正则表达式语法介绍

本文介绍了js正则表达式,具体如下: 1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的一个字符. 举例1:表达式 "c",在匹配字符串 "abcde" 时,匹配结果是:成功:匹配到的内容是:"c":匹配到的位置是:开始于2,结束于3.(注:下标从0开始还是从1开始,因当前编程语言的不同而可能不同)

深入理解JS正则表达式---分组

深入理解JS正则表达式---分组 之前写了一篇关于正则新手入门的文章,本以为对正则表达式相对比较了解 但是今天我又遇到了一个坑,可能是自己不够细心的原因吧,今天就着重和大家分享一下javascript正则表达式中的分组.如果你对JS正则表达式不够理解 可以点击这里了解更多. 分组在正则中用的还是比较广的,我所理解的分组 就是一对括号() ,每一对括号 就代表了一个分组,分组可以分为: •捕获性分组 •非捕获性分组 捕获性分组 捕获性分组会在 比如 match exec这样的函数中以第二项,第三项

JS正则表达式替换url参数的方法

具体代码如下所示: /* 定义替换对象键值 */ var setReferArgs = function(){ var referArgs = new Object(); referArgs['#userID\#'] = userId; referArgs['\#userName\#'] = userName; return referArgs; } /* 替换URL的参数 */ var replaceUrlParams = function(url){ var actualUrl = "&qu

JS正则表达式获取指定字符之后指定字符之前的字符串(推荐)

一个常见的场景,获取:标签背景图片链接: 如字符串:var bgImg = "url (\"https://img30.360buyimg.com/sku/jfs/t26203/262/100869187/204098/1d1479e9/5b84b80bNf39db45f.jpg\")"; 脚本: var backgroundImageRegex=/(?<=url\(").+(?="\))/; var matchResult=bgImg.m

最常用的15个前端表单验证JS正则表达式

在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. QQ号码. 微信号.车牌号.中文正则. 1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP

JS正则表达式匹配检测各种数值类型(数字验证)

验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数:^\+?[1-9][0-9]*$ 验证非零的负整数:^\-[1-9][0-9]*$ 验证非负整数(正整数 + 0) ^\d