|
高亮显示字符
<!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" />
<meta name="Author" content="markcxz">
<title>js标记高亮关键词演示</title>
<style type="text/css">
body{
margin:0px 5px 0px 5px; font-size:12px; line-height:140%;
text-align:center;
}
.highlight {
background-color:#ff0; color:#000;
}
.ComandBar{
width:700px; height:30px;text-align:left; margin:20px 0px 0px 0px;
background-color:#eee; text-indent:10px; padding-top:3px;
border-bottom:1px #666 dashed;
}
.ComandBar input{
border:1px #333 groove; margin:0px;
}
.ComandBar span{
cursor:pointer; border:1px #333 solid; padding:2px 5px 0px 5px;
}
#ArticleWrapper{
width:700px; text-align:left;
}
#ArticleWrapper li{
list-style-type:decimal; margin:5px 0px 10px 0px;
}
h1.title { font-size: 1.2em; background: #f5f5f5; padding-left: 0.2em; line-height: 2em; text-align:center;}
p{
text-indent:2em;
}
</style>
<script type="text/javascript">
/*----------------------------------------*\
* 使用 js 标记高亮关键词
* 参数说明:
* 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;
}
}
共2页: 上一页 1 [2] 下一页
| 
