js 搜索文字 并高亮 但是其实包含html标签 搜索会失效
代码如下希望有大神能救救我<html><head><scripttype="text/javascript">functionencode(s){returns.repl...
代码如下 希望有大神能救救我
<html>
<head>
<script type="text/javascript">
function encode(s){
return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1");
}
function decode(s){
return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&");
}
function highlight(s){
if (s.length==0){
alert('搜索关键词未填写!');
return false;
}
s=encode(s);
var obj=document.getElementsByTagName("body")[0];
var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1");
obj.innerHTML=t;
var cnt=loopSearch(s,obj);
t=obj.innerHTML
var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
t=t.replace(r,"<span class='highlight'>$1</span>");
obj.innerHTML=t;
alert("搜索到关键词"+cnt+"处")
}
function loopSearch(s,obj){
var cnt=0;
if (obj.nodeType==3){
cnt=replace(s,obj);
return cnt;
}
for (var i=0,c;c=obj.childNodes[i];i++){
if (!c.className||c.className!="highlight")
cnt+=loopSearch(s,c);
}
return cnt;
}
function replace(s,dest){
var r=new RegExp(s,"g");
var tm=null;
var t=dest.nodeValue;
var cnt=0;
if (tm=t.match(r)){
cnt=tm.length;
t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")
dest.nodeValue=t;
}
return cnt;
}
</script>
<style type="text/css">
.highlight{background:green;font-weight:bold;color:white;}
</style>
</head>
<body>
<a href="#">曹建巍</a>,技术部技术部技术部技术部技术部技术部技术部技术部技术部技术部技术部技术部。<hr>
<form onsubmit="highlight(this.s.value);return false;">
<p><input name="s" id="s"/><input type="submit" value="搜索"/></p>
</form>
<div id="content">
曹建巍,<br />
曹建巍,<br />
<br />
曹建巍
<br />
曹建巍的选择是不会错的.
<br />
曹建巍永远是最帅的!
</div>
</body>
</html> 展开
<html>
<head>
<script type="text/javascript">
function encode(s){
return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1");
}
function decode(s){
return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&");
}
function highlight(s){
if (s.length==0){
alert('搜索关键词未填写!');
return false;
}
s=encode(s);
var obj=document.getElementsByTagName("body")[0];
var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1");
obj.innerHTML=t;
var cnt=loopSearch(s,obj);
t=obj.innerHTML
var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
t=t.replace(r,"<span class='highlight'>$1</span>");
obj.innerHTML=t;
alert("搜索到关键词"+cnt+"处")
}
function loopSearch(s,obj){
var cnt=0;
if (obj.nodeType==3){
cnt=replace(s,obj);
return cnt;
}
for (var i=0,c;c=obj.childNodes[i];i++){
if (!c.className||c.className!="highlight")
cnt+=loopSearch(s,c);
}
return cnt;
}
function replace(s,dest){
var r=new RegExp(s,"g");
var tm=null;
var t=dest.nodeValue;
var cnt=0;
if (tm=t.match(r)){
cnt=tm.length;
t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")
dest.nodeValue=t;
}
return cnt;
}
</script>
<style type="text/css">
.highlight{background:green;font-weight:bold;color:white;}
</style>
</head>
<body>
<a href="#">曹建巍</a>,技术部技术部技术部技术部技术部技术部技术部技术部技术部技术部技术部技术部。<hr>
<form onsubmit="highlight(this.s.value);return false;">
<p><input name="s" id="s"/><input type="submit" value="搜索"/></p>
</form>
<div id="content">
曹建巍,<br />
曹建巍,<br />
<br />
曹建巍
<br />
曹建巍的选择是不会错的.
<br />
曹建巍永远是最帅的!
</div>
</body>
</html> 展开
1个回答
2016-06-13
展开全部
什么意思?这个不是可以正常搜索的吗?
追问
但是如果搜索中跨标签就搜索不了了 大哥能教教我吗?重谢
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询