使用 javascript 标记高亮关键词
/*----------------------------------------*\
* 使用 js 标记高亮关键词 by markcxz(markcxz@aol.com)
* 参数说明:
* obj: 对象, 要进行高亮显示的html标签节点.
* hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格 分隔多个词 .
* cssClass: 字符串, 定义关键词突出显示风格的css伪类.
* 参考资料: javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu
\*----------------------------------------*/
function MarkHighLight(obj,hlWords,cssClass){
hlWords=AnalyzeHighLightWords(hlWords);
if(obj==null || hlWords.length==0)
return;
if(cssClass==null)
cssClass="highlight";
MarkHighLightCore(obj,hlWords);
//------------执行高亮标记的核心方法----------------------------
function MarkHighLightCore(obj,keyWords){
var re=new RegExp(keyWords, "i");
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 class='"+cssClass+"'>$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;
}
}
使用 javascript 标记高亮关键词相关推荐
- 改变Eclipse标记高亮的颜色
http://www.thinksaas.cn/group/topic/200196/ 改变Eclipse标记高亮的颜色 开源中国 发表于 2014-09-01 15:10:43 开启"标记 ...
- javascript 标记_如何使用JavaScript更改Google Maps标记的颜色
javascript 标记 by Tan Le Tian 谭乐天 如何使用JavaScript更改Google Maps标记的颜色 (How to change the color of Google ...
- 9款有用的Javascript代码高亮脚本
原文:9款有用的Javascript代码高亮脚本 译自:webdesignbooth 转自:http://www.qianduan.net/9-useful-javascript-syntax-hig ...
- springboot——集成elasticsearch进行搜索并高亮关键词
目录 1.elasticsearch概述 3.springboot集成elasticsearch 4.实现搜索并高亮关键词 1.elasticsearch概述 (1)是什么: Elasticsearc ...
- JavaScript中查找关键词
查找关键字的四种方法(查找关键字指找到关键字的位置或内容): 在正则匹配时,i表示忽略大小写,g表示全局匹配 1.根据关键字查找其位置, i返回的是关键词'd'第一次出现时的下标: 这个i返回的 ...
- 搜索关键字高亮_Django Haystack 全文检索与关键词高亮
作者:HelloGitHub-追梦人物[1] 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库[2] 点击本文最下方的"阅读原文"即可获取 博客提供 RS ...
- Diango博客--22.Django Haystack 全文检索与关键词高亮
文章目录 1. Django Haystack 简介 2. 安装 django-haystack和elasticsearch 2 3. 构建容器来运行 elasticsearch 服务 4. 配置 H ...
- javascript实现代码高亮
9款有用的Javascript代码高亮脚本 Syntax highlighting is very important especially when we want to show our code ...
- js+正文规则 高亮搜索关键字(二)
[原创]JavaScript高亮搜索关键字(改进版) [2009-1-6 16:25:00] by mwfls 11 我顶 .maks { line-height: 150%; padding: 10 ...
最新文章
- 发布html页面图像不显示不出来,图像不显示htmlimg/
- 计算机领域的顶级会议和期刊
- System Center 2012 Process Automatic
- (15)FPGA模块化设计原则
- 洛谷1048 采药(01背包)
- (转)淘淘商城系列——使用Jedis操作集群
- mysql导出excel出乱码_Mysql中文乱码以及导出为sql语句和Excel问题解决方法[图文]...
- 魔兽世界稳定服务器,魔兽世界美服服务器趋于稳定 排队新技术将实装
- mysql 查询最早 表_MySQL-如何查询表中最早时间和最晚时间
- 电感的两种模式——DCM和CCM的区别
- ubuntu镜像安装教程
- 《Machine Learning in Action》—— 女同学问Taoye,KNN应该怎么玩才能通关
- JAVA设计模式理解与总结(下)代理模式适配器模式观察者模式
- Udesk全场景客服系统FAQ分享(202010期)
- FCN全卷积网络和Deconv转置卷积原理描述
- FICO 里面的替代和校验 以及调试
- 编程之美学习笔记(三):一摞烙饼的排序
- Android 剩余可用时长的计算公式
- 早该把B站打回原形了
- python读-Python之文件读写