最近在弄内文广告程序,现在遇到一个问题暂时不知道如何解决: 
我们对关键词加超链接的操作是通过正则表达式替换地,这就遇到一个问题,必须首先判断出页面中的这个关键词是是属于html标签的一部分(如title,alt等),还是属于可替换的文本。 
否则将title,alt等属性内的文字全部替换为超链接,就会造成页面dom结构的混乱。 如下面的 html代码 <div>电脑是个好东西,我们大家都喜欢 <img src="3w.jpg" alt="电脑"/>你喜欢电脑么? <a href="index.htm" title="电脑"> </a>哈哈,就是这个东西。 
</div> 我们想把“电脑”这个关键词转化超链接,如果用一般正则替换的方法的话,就将title,alt属性内的“电脑”也都给替换了。 所以这里请各位指点一下,怎么判断出“电脑”这个词属于可替换的文本,还是属于html标签的一部分。

解决方案 »

  1.   

    这个问题……跟郁闷那。咱也遇到过。之前有个高手对我说,这个东西需要使用断言。但是JS不支持断言……很郁闷。所以,这东西只能在服务端实现。在写正则的时候,如果一条实现,就需要使用向后的断言,JS不支持。但是可以使用闭包的方式得到相同的结果。
      

  2.   

    试试这个:/(?!"\w*)(电脑)(?!\w*")/ig替换为<a href="?">$1</a>
      

  3.   


    使用捕获,可以得到一个html标记中两个匹配的内容。更替的时候,使用函数作为参数。返回内容。现在使用的电脑上没有相关的样本程序。咱本身对闭包又那啥,所以啊,对不住了……
      

  4.   

    也想过这种方式,可是很多页面可能不完全是标准的DOM,如果HTML不完全匹配,就会出问题了
      

  5.   


    <script>
    function doit(nodes){
      for(var i=0;i<nodes.length;i++){
        if(nodes[i].nodeType == 3){
           var s = nodes[i].nodeValue;
           var a = s.split("电脑");
           if(a.length>1){
           var span= document.createElement("SPAN")
              for(var j=0;j<a.length-1;j++){
                span.appendChild(document.createTextNode(a[j]));
                var ea = document.createElement("A");
                ea.href="xxxx.xx";
                ea.innerHTML = "电脑";
                span.appendChild(ea);
              }
              span.appendChild(document.createTextNode(a[a.length-1]));
              nodes[i].parentNode.replaceChild(span, nodes[i]);
           }
        }
        if(nodes[i].childNodes.length>0){
            doit(nodes[i]);
        }
      }
    }
    window.onload=function(){
      var src = document.getElementById("pad");
      var nodes = src.childNodes;
      doit(nodes);
    }
    </script>
    <div id="pad">电脑是个好东西,我们大家都喜欢 <img src="3w.jpg" alt="电脑"/>你喜欢电脑么? <a href="index.htm" title="电脑"> </a>哈哈,就是这个东西。 
    </div> 
      

  6.   

    hookee 老兄
    悄悄问一下nodes[i].nodeType == 3 是什么意思?
    我这里怎么一直不走这个分支呢?
      

  7.   

    To: hookee
    [code=HTML<div id="pad">
            <p>
                电脑是个好东西,我们大家都喜欢
                <img src="ajax.jpg" alt="电脑" />你喜欢电脑么? <a href="index.htm" title="电脑"></a>哈哈,就是这个东西。</p>
        </div>[/code]
    这是我的测试代码,加了<p>标签就不好使了
      

  8.   

    To: hookee 
     <div id="pad"> 
            <p> 
                电脑是个好东西,我们大家都喜欢 
                <img src="ajax.jpg" alt="电脑" />你喜欢电脑么? <a href="index.htm" title="电脑"> </a>哈哈,就是这个东西。 </p> 
        </div> 
    这是我的测试代码,加了 <p>标签就不好使了
      

  9.   

    nodes[i].nodeType == 3 判断文本节点
      

  10.   

    为什么加了<p>标签就不好使了呢
      

  11.   


    <script>
    function doit(nodes){
      for(var i=0;i<nodes.length;i++){
        if(nodes[i].nodeType == 3){
              var s = nodes[i].nodeValue;
              var a = s.split("电脑");
              if(a.length>1){
                  var span= document.createElement("SPAN")
                 for(var j=0;j<a.length-1;j++){
                      span.appendChild(document.createTextNode(a[j]));
                      var ea = document.createElement("A");
                      ea.href="xxxx.xx";
                      ea.innerHTML = "电脑";
                      span.appendChild(ea);
                 }
                 span.appendChild(document.createTextNode(a[a.length-1]));
                 nodes[i].parentNode.replaceChild(span, nodes[i]);
              }
        }
        else if(nodes[i].childNodes.length>0){
               doit(nodes[i].childNodes);
        }
      }
    }
    window.onload=function(){
      var src = document.getElementById("pad");
      var nodes = src.childNodes;
      doit(nodes);
    }
    </script>
    <div id="pad">
    <p> 
                电脑是个好东西,我们大家都喜欢 
                <img src="ajax.jpg" alt="电脑" />你喜欢电脑么? <a href="index.htm" title="电脑"> </a>哈哈,就是这个东西。 </p> 
    </div> 
      

  12.   


    <!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>
      <title> new document </title>
      <script type="text/javascript">
      <!--
    window.onload = function(){
    var reg = /<[^>]*(电脑)[^>]*>/ig;
    var arr = [], i = 0;
    document.body.innerHTML = document.body.innerHTML.replace(reg,function($0){
    arr.push($0);return "%%";
    });
    document.body.innerHTML = document.body.innerHTML.replace(/(电脑)/g,"<a href=''>$1</a>").replace(/%%/g,function(){
    return arr[i++];
    });
    }
      //-->
      </script>
     </head> <body>  
    <div id="pad">
        <p> 
                电脑是个好东西,我们大家都喜欢 
                <img src="ajax.jpg" alt="电脑" />你喜欢电脑么? <a href="index.htm" title="电脑"> </a>哈哈,就是这个东西。 </p> 
    </div> 
     </body>
    </html>