没仔细测试
<div id="test">
中草药
<a title="中华人民共和国" href="#">中华人民共和国</a>
中天天天
<span>中</span>
<script>
//中华人民共和国
</script>
</div>
<script>
var test=document.getElementById('test'), temp = test.innerHTML;
var w = '中', url = '<a href="http://www.gov.cn">中国</a>';
var regex = new RegExp(w+'(?:(?!.+?(?:<\/a>|<\/script>))|(?=.+?(?:<a.+?<\/a>)|<script.+?<\/script>))','gi');
temp = temp.replace(regex, url);
test.innerHTML = temp;
</script>
<div id="test">
中草药
<a title="中华人民共和国" href="#">中华人民共和国</a>
中天天天
<span>中</span>
<script>
//中华人民共和国
</script>
</div>
<script>
var test=document.getElementById('test'), temp = test.innerHTML;
var w = '中', url = '<a href="http://www.gov.cn">中国</a>';
var regex = new RegExp(w+'(?:(?!.+?(?:<\/a>|<\/script>))|(?=.+?(?:<a.+?<\/a>)|<script.+?<\/script>))','gi');
temp = temp.replace(regex, url);
test.innerHTML = temp;
</script>
我改了一下，添加对<title></title> <meta>的判断。因<meta>没有关闭标签，如下语句还需要怎样修改呢？等待！谢谢！
var regex = new RegExp(w+'(?:(?!.+?(?:<\/a>|<\/script>|<\/title>|<\/meta>))|(?=.+?(?:<a.+?<\/a>)|<script.+?<\/script>|<title.+?<\/title>|<meta.+?<\/meta>))','gi');
如果是静态html文本就比较麻烦了
<!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" />
<title>无标题文档</title>
</head>
<body>
<div id="test">
中草药
<a title="中华人民共和国" href="#">中华人民共和国</a>
中天天天
<span>中</span>
<input type="button" value="替换中" onclick="addLink()"/>
<table width="566" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="109">中国</td>
<td width="146">中</td>
<td width="132"> </td>
<td width="98"> </td>
<td width="69"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>得到</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script>
//中华人民共和国
function $(sId){
return document.getElementById(sId);
}function handleTextNode(oTxtNode,sKeyWord){
var sSource=oTxtNode.nodeValue;
var oDocFrag=document.createDocumentFragment();
var nKeyWordPos=sSource.indexOf(sKeyWord);
var oNewTxtNode,oLink;
while(nKeyWordPos!=-1){
oNewTxtNode=document.createTextNode(
sSource.substring(0,nKeyWordPos)
);
oDocFrag.appendChild(oNewTxtNode);
oLink=document.createElement("a");
oLink.href="http://www.baidu.com";
oLink.innerHTML=sKeyWord;
oDocFrag.appendChild(oLink);
sSource=sSource.substring(nKeyWordPos+sKeyWord.length);
nKeyWordPos=sSource.indexOf(sKeyWord);
}
if(sSource){
oNewTxtNode=document.createTextNode(sSource);
oDocFrag.appendChild(oNewTxtNode);
}
if(oDocFrag.childNodes.length>0)
oTxtNode.parentNode.replaceChild(oDocFrag,oTxtNode);
}function handleHtmlNode(oHtmNode,sKeyWord){
var sHtml=oHtmNode.innerHTML
var sExcepNodes="[a][script][style]";
var sTagName=oHtmNode.tagName.toLowerCase();
if(sExcepNodes.indexOf(sTagName)==-1){
alert(sTagName);
sHtml=sHtml.replace(
new RegExp("("+sKeyWord+")","gi"),
"<a href='http://www.baidu.com'>$1</a>"
);
oHtmNode.innerHTML=sHtml;
}
}function addLink(){
var oBodyNode=document.all
?document.body.childNodes[0]
:document.body.childNodes[1];
var aBodyNodes=oBodyNode.childNodes;
var i,oNode; for(i=0;i<aBodyNodes.length;i++){
oNode=aBodyNodes[i];
if(oNode&&oNode.innerHTML){
handleHtmlNode(oNode,"中");
}else if(oNode&&oNode.nodeValue){
handleTextNode(oNode,"中");
}
}
sHtml=document.documentElement.innerHTML;
document.write(sHtml);
document.close();
}
</script>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>试试</title><script type="text/javascript">
function addLink(id, keyword, link) {
var n = document.getElementById(id);
var regex = '(?:<(?:script[\\s\\S]+?</script|a[\\s\\S]*?</a|title[\\s\\S]*?</title)>)' +
'|' +
'(?:' + keyword + ')';
var reg = new RegExp(regex, 'ig');
var s = n.innerHTML.replace(reg, function(word) {
if(word == keyword) {
return '<a href="' + link + '">' + word + '</a>';
}
return word;
});
alert(s);
n.innerHTML = s;
}window.onload = function() {
addLink('txt', '五笔字型', 'www.csdn.net');
}
</script></head>
<body>
<div id="txt">
五笔字型计算机汉字输入技术五笔字型计算机汉字输入技术，<a href="http://communtity.csdn.net">五笔字型</a>五笔字型计算机汉字输入技术
<script>
//alert('五笔字型');
</script>
</div>
</body>
</html>
var n = document.getElementById(id);
var regex = '(<(script|title|a)[\\s\\S]+?</\\s*\\2>)' +
'|' +
'(' + keyword + ')';
var reg = new RegExp(regex, 'ig');
var s = n.innerHTML.replace(reg, function(word, m1, m2, m3) {
if(m3) {
return '<a href="' + link + '">' + m3 + '</a>';
}
return m1;
});
alert(s);
n.innerHTML = s;
}
所以操作文本节点才是王道~~~
<!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=gb2312" />
<title>StripingTable</title>
<body>
<div id="test">
中草药
<a title="中华人民共和国" href="#">中华人民共和国</a>
中天天天
<span>中</span>
<input type="button" value="替换中" onclick="addLink()"/>
<table width="566" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="109">中国</td>
<td width="146">中</td>
<td width="132"> </td>
<td width="98"> </td>
<td width="69"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>得到</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></body>
</html>
<style type="text/css">
.keyword
{
color:Red;
}
</style>
<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
var keyword="中";
var reg=new RegExp(keyword,"ig");
$("*").each(function(){
if(!this.childNodes ||this.tagName=="A" || this.tagName=="SCRIPT" || this.tagName=="TITLE")return;
$(this.childNodes).each(function(){
if(this.nodeType==3){
$(this).replaceWith(this.nodeValue.replace(reg,"<a class='keyword' href='#'>"+keyword+"</a>"));
}
});
})
</script>
<!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=gb2312" />
<title>test</title>
<body>
<center>
<!--菜单部分开始-->
<div class="partA">
<div id="bbsNav"></div>
<div class="partA_logo">
<div class="partA_left">
<div class="logo_up"> <img src="http://www.techweb.com.cn/theme/skin/2007/images/logo.jpg" alt="techweb" /> </div>
<div class="time"> </div>
</div>
<div class="partA_mid">
</div>
<div class="partA_right"></div>
</div>
</div>
<!--菜单部分结束-->
<div class="nav">
<a href="http://www.techweb.com.cn/index.shtml">TechWeb</a>
>> <a href="http://www.techweb.com.cn/news/index.shtml">资讯</a> >> <a href="http://www.techweb.com.cn/news/list_21.shtml">网络</a> </div>
<div class="nav_line"></div>
<div id="main">
<!--左侧开始-->
<div id="left">
<div class="left_01"></div>
<div class="left_02">
<div class="title">
<h1>腾讯遭竞争对手恶意挖角 起诉15名已离职员工</h1>
</div>
<div class="title_line"></div>
<div class="info">
来源: 新浪科技
日期：2008.11.07 19:30 (共有<span class="red"><span id=comment_num></span>
</span>条评论) <a href="#wypl"><span class="red">我要评论</span></a></div>
<P class=moduleSingleImg01 align=center><IMG alt=科技时代_腾讯起诉15名离职员工跳槽竞争对手 src="http://image.techweb.com.cn/h000/h96/img200811071934540.jpg"><BR>深圳福田法院发出的传票</P>
<CENTER></CENTER><!-- 内容模块：单图 end --><!-- 内容模块：段落 begin --><!-- <div class="moduleParagraph"> -->
<P> 新浪科技讯 11月7日傍晚消息，腾讯公司刚刚确认，已正式向深圳福田法院起诉15名涉嫌集体跳槽的员工，原因是这些员工违反竞业禁止义务。腾讯强调，这是维护自身合法权益的正当行为。</P>
<P> 腾讯的上述表态，是对网上相关传闻的正面回应。昨日下午开始，在天涯等论坛中出现了“腾迅QQ把员工告上法庭，两年内不许踏足互联网”等相关帖子。这些帖子均指出，腾讯对一批跳槽的基层技术人员提出起诉，诉状已寄到这些员工家中，给他们的工作与生活造成麻烦。</P>
<P> 据悉，该案件将于12月26日上午在深圳福田法院首次开庭，目前双方纠纷的要点在于：这些员工当初与腾讯签署的劳动合同中有一项竞业禁止约定，规定离职员工在2年内不得加盟其他与腾讯相关业务有竞争关系的企业。腾讯认为，提起违反竞业禁止义务诉讼是正当维权，但相关员工认为腾讯未支付竞业禁止补偿，因此该协议并不成立。</P>
<P> 根据一名离职员工提供的资料，该规定的具体内容为(在双方劳动合同的第7页)：乙方无论因何种原因离职，自离职之日起2年内不得在研究、生产、销售或维护甲方经营范围的同类产品与服务(包括即时通信软件产品、通信聊天交友服务、移动通信增值服务、网络电子游戏、网络娱乐、互联网信息资讯、其他网络产品、其他通信产品、其他软件产品等)的企业事业单位或与甲方有竞争关系的企业事业单位工作，也不得以任何方式直接间接地为这些企业事业单位工作或提供服务。</P>
<P> 据一名关注此事的律师表示，竞业协议分为法定和约定，对通常企业高级管理人员是法定竞业协议，由于其工资非常高，不一定需要支付补偿。而对于不是很重要的员工，从法理上来讲，需要支付补偿才能生效，但对不同案例还需要具体分析。 </P>
<P> 另据消息人士透露，近期遭腾讯起诉的员工不止15名。实际上，腾讯最近相继有近百名员工跳槽到几家与腾讯有竞争关系的互联网企业，腾讯希望通过分批诉讼的办法，防止更多“集体跳槽”事件发生。</P>
<P> 由跳槽引发的诉讼此前在IT业内并不少见，百度曾对跳槽谷歌的员工提起诉讼。而业内最受关注的一桩诉讼是李开复于2005年从微软跳槽谷歌遭诉，该诉讼后来三方秘密和解，李顺利加盟谷歌。(全智 韩枝)</P>
<P><STRONG> 附：腾讯对该事件的声明</STRONG></P>
<P> 1、本次腾讯公司向集体跳槽至某互联网公司的15名前员工提起违反竞业禁止义务诉讼，是维护自身合法权益的正当行为。</P>
<P> 2、腾讯认为，正常的人员流动属于合理现象，腾讯也在不断积极吸引外部优秀人才的加盟。但腾讯希望每一位加盟的员工都能秉持正直的价值观和基本的职业道德，不要将应属于其原公司的商业机密或技术秘密带入腾讯，同样，我们也不允许离开腾讯公司的员工做出这种损害原公司利益的行为；</P>
<P> 3、最近一段时间，该公司为了谋求便捷发展，不断对腾讯员工进行恶意挖角，给腾讯公司正常的经营活动造成了极大困扰，并导致了腾讯所投入巨资的一些研发项目搁浅、商业机密流失。</P>
<P> 4、竞业限制在我国有明确法律规定，腾讯与这15名前员工所签订的劳动合同中也依法规定了竞业禁止条款和保密条款，发放了相应的津贴和补偿，也曾花费了大量的人力物力对其进行培训，并将相关商业机密、技术秘密对其保持透明。员工离职后如不能依法遵守协议，理应承担相应的法律责任。<BR><BR> 法律专家：<SPAN style="FONT-SIZE: 12pt; LINE-HEIGHT: 150%; FONT-FAMILY: 宋体"><A href="http://yytbest.blog.techweb.com.cn/archives/2008/2008117175326.shtml" target=_blank>腾讯起诉员工竞业限制案的法律思考</A></SPAN><SPAN lang=EN-US style="FONT-SIZE: 12pt; LINE-HEIGHT: 150%"><?XML:NAMESPACE PREFIX = O /><O:P></O:P></SPAN></P></div>
<div class="page"></div>
<div id="xq_div"></div>
<div class="soucang"> </div>
<div class="other list_link2">
<ul>
<li> 下一篇：<a href="http://www.techweb.com.cn/news/2008-11-07/375047.shtml">景区门票半价后 西藏游价格是否触底</a> [2008-11-07] <br/>
</li>
</ul>
</div>
<div class="guanggao"> </div>
<!--版权部分结束-->
</center>
</body>
</html>
<style type="text/css">
.keyword
{
background-color:Purple;
color:White;
}
</style>
<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
var keyword="腾讯";
var reg=new RegExp(keyword,"ig");
$("*").each(function(){
if(!this.childNodes ||this.tagName=="A" || this.tagName=="SCRIPT" || this.tagName=="TITLE")return;
$(this.childNodes).each(function(){
if(this.nodeType==3){
$(this).replaceWith(this.nodeValue.replace(reg,"<a class='keyword' href='#'>"+keyword+"</a>"));
}
});
})
</script>
function $(id) {
return document.getElementById(id);
}与jquery框架里的$冲突了，请问怎么改才好，谢谢！等待中！
晕
应该怎么处理呢？
var keyword="腾讯";
var reg=new RegExp(keyword,"ig");
jQuery("*").each(function(){
if(!this.childNodes ||this.tagName=="A" || this.tagName=="SCRIPT" || this.tagName=="TITLE")return;
jQuery(this.childNodes).each(function(){
if(this.nodeType==3){
jQuery(this).replaceWith(this.nodeValue.replace(reg,"<a class='keyword' href='#'>"+keyword+"</a>"));
}
});
})
<!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=gb2312" />
<title>和尚</title>
</head>
<body><p> <a href="xx">一个和尚</a>挑水吃、两个和尚抬水吃、三个和尚没水吃。总寺的方丈大人得知情况后，就派来了一名主持和一名书记，共同负责解决这一问题。主持上任后，发现问题的关键是管理不到位，于是就招聘一些和尚成立了寺庙管理部来制定分工流程。为了更好地借鉴国外的先进经验，寺庙选派唐僧等领导干部出国学习取经；此外，他们还专门花钱请了天主教、基督教的神父传授MBA。神父呆了不久留下几个东东就走了，一个叫BPR，一个叫ERP。</p>
<script>
var str="一个和尚一个和尚一个和尚";
</script>
</body>
</html>
<script language="JavaScript" type="text/javascript"><!--
function StartReplace(keyWord,url){
var range;
if(document.createRange)range = document.createRange();
else range = document.body.createTextRange();
if(range.findText){//ie
while(range.findText(keyWord)){
if(range.parentElement().tagName!="A")range.pasteHTML("<a href='"+url+"'>"+range.text.fontcolor("#ff0000")+"</a>");
else range.move('character',2)
}
}else{
var s,n;
s = window.getSelection();
while(window.find(keyWord)){
if(s.focusNode.parentNode.tagName!="A"){
var a = document.createElement("a");
a.style.color="#ff0000"
a.href=url;
s.getRangeAt(0).surroundContents(a);
}
}
}
}StartReplace('和尚','http://www.csdn.net');
//--></script>
报错：为空或不是对象
html的嵌套实在很复杂，而且有些标签比如table是不支持innerHTML对其内容进行改变的，遍历dom比较保险
不会像正则一样误伤对象，但效率很低而且需要用递归很麻烦