js高亮关键词代码备忘

最新推荐文章于 2017-09-28 22:35:09 发布

zuroc

最新推荐文章于 2017-09-28 22:35:09 发布

阅读量107

点赞数

分类专栏：网络文章标签： Exchange J# JavaScript CSS XHTML ViewUI

本文链接：https://blog.csdn.net/zuroc/article/details/83354864

版权

网络专栏收录该内容

75 篇文章 0 订阅

订阅专栏

当然是抄的啊:)
管理后台用这个很方便

<!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">
<style>
.highlight {
background-color:#ff0; color:#000;
}
</style>
</head><body>
<div id="Stxt">
美丽的大自然和谐社会共同发展

</div>
<textarea style="display: none;" id="txtInput">和谐
发展</textarea>
<script type="text/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;
}

}
//----------------end------------------------

function MarkHighLightDemo(){
var txtObj=document.getElementById("txtInput");
var divObj=document.getElementById("Stxt");
MarkHighLight(divObj,txtObj.value);
}
MarkHighLightDemo()
</script>
</body></html>

zuroc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js高亮关键词代码备忘

当然是抄的啊:)管理后台用这个很方便.highlight {background-color:#ff0; color:#000;}美丽的大自然和谐社会共同发展和谐发展/*----------------------------------------* * 使用 js 标记高亮关键词 by markcxz(markcxz@...
复制链接

扫一扫