用正则!
<html>
<body>
<textarea id="textarea1" style="height:240;width:960">
前部分关键词后部分 //替换
<a href="#">前部分关键词后部分</a> //不替换,包含在a中
<p><a href="#">前部分关键词后部分</a></p> //不替换,包含在a中
<div><p><a href="#">前部分关键词后部分</a></p></div> //不替换,包含在a中
<span><div><p><a href="#">前部分关键词后部分</a></p></div></span> //不替换,包含在a中
<a><span><div>前部分关键词后部分</div></span></a> //不替换,包含在a中
<font><a href="#">前部分关键词后部分</a>前部分关键词后部分</font> //只替换第二部分的关键词
<span>前部分关键词后部分<div>前部分关键词后部分</div></span> //两部分都要替换<img alt="前部分关键词后部分" /> //不替换,包含在img中
<span><img alt="前部分关键词后部分" /></span> //不替换,包含在img中
<div><span><img alt="前部分关键词后部分" /></span></div> //不替换,包含在img中<script>alert("前部分关键词后部分");</script> //不替换,包含在script中
<span><script>alert("前部分关键词后部分");</script></span> //不替换,包含在script中
<div><span><script>alert("前部分关键词后部分");</script></span></div> //不替换,包含在script中
<span><div><script>alert("前部分关键词后部分");</script></div></span> //不替换,包含在script中<div>前部分关键词后部分</div> //替换
<span><div>前部分关键词后部分</div></span> //替换
</textarea>
<textarea id="textarea2" style="height:240;width:960"></textarea>
<script>
var str=document.getElementById("textarea1").value
var keyword = "关键词";
var myreplace="@#@@"
var re = new RegExp("(.*)?(<a.*>)(.*)"+keyword+"(.*)(<\/a>.*)","ig");
str = str.replace(re,"$1$2$3"+myreplace+"$4$5");
var re = new RegExp("(.*)?(<script.*>)(.*)"+keyword+"(.*)(<\/script>.*)","ig");
str = str.replace(re,"$1$2$3"+myreplace+"$4$5");
var re = new RegExp("(.*)?(<img.*)(.*)"+keyword+"(.*)(\/>.*)","ig");
str = str.replace(re,"$1$2$3"+myreplace+"$4$5");
var re= new RegExp("(.*?)"+keyword+"(.*?)","ig");
str = str.replace(re,"$1<b>"+keyword+"</b>$2");
var re= new RegExp("(.*?)"+myreplace+"(.*?)","ig");
str = str.replace(re,"$1"+keyword+"$2");document.getElementById("textarea2").value =str</script>
</body>
</html>
我测试通过了,你看看还有没有其他的特例。
<html>
<body>
<textarea id="textarea1" style="height:240;width:960">
前部分关键词后部分 //替换
<a href="#">前部分关键词后部分</a> //不替换,包含在a中
<p><a href="#">前部分关键词后部分</a></p> //不替换,包含在a中
<div><p><a href="#">前部分关键词后部分</a></p></div> //不替换,包含在a中
<span><div><p><a href="#">前部分关键词后部分</a></p></div></span> //不替换,包含在a中
<a><span><div>前部分关键词后部分</div></span></a> //不替换,包含在a中
<font><a href="#">前部分关键词后部分</a>前部分关键词后部分</font> //只替换第二部分的关键词
<span>前部分关键词后部分<div>前部分关键词后部分</div></span> //两部分都要替换<img alt="前部分关键词后部分" /> //不替换,包含在img中
<span><img alt="前部分关键词后部分" /></span> //不替换,包含在img中
<div><span><img alt="前部分关键词后部分" /></span></div> //不替换,包含在img中<script>alert("前部分关键词后部分");</script> //不替换,包含在script中
<span><script>alert("前部分关键词后部分");</script></span> //不替换,包含在script中
<div><span><script>alert("前部分关键词后部分");</script></span></div> //不替换,包含在script中
<span><div><script>alert("前部分关键词后部分");</script></div></span> //不替换,包含在script中<div>前部分关键词后部分</div> //替换
<span><div>前部分关键词后部分</div></span> //替换
</textarea>
<textarea id="textarea2" style="height:240;width:960"></textarea>
<script>
var str=document.getElementById("textarea1").value
var keyword = "关键词";
var myreplace="@#@@"
var re = new RegExp("(.*)?(<a.*>)(.*)"+keyword+"(.*)(<\/a>.*)","ig");
str = str.replace(re,"$1$2$3"+myreplace+"$4$5");
var re = new RegExp("(.*)?(<script.*>)(.*)"+keyword+"(.*)(<\/script>.*)","ig");
str = str.replace(re,"$1$2$3"+myreplace+"$4$5");
var re = new RegExp("(.*)?(<img.*)(.*)"+keyword+"(.*)(\/>.*)","ig");
str = str.replace(re,"$1$2$3"+myreplace+"$4$5");
var re= new RegExp("(.*?)"+keyword+"(.*?)","ig");
str = str.replace(re,"$1<b>"+keyword+"</b>$2");
var re= new RegExp("(.*?)"+myreplace+"(.*?)","ig");
str = str.replace(re,"$1"+keyword+"$2");document.getElementById("textarea2").value =str</script>
</body>
</html>
我测试通过了,你看看还有没有其他的特例。
我比你简单多了,后台搜索数据交给前台的时候考虑怎么做就可以了。没有那么多的HTML
需要考虑。
说白了,我前台是要把所有HTML转义掉使之不被浏览器当作HTML来解释的,唯独<b></b>
有特殊意义,假如后台以<b></b>的形式标记高亮的话。