使用Jquery解析网页的html，对其进行修改，然后将其重新插入网页

我目前正在尝试在网页中的某些单词周围添加标签。此网页可以有许多不同的id、类和名称，因此，如果我试图在“foo”周围加上一个跨距，请务必执行以下操作：

<p class='foo'>blah blah blah foo blah blah blah </p>

我可以在firebug中浏览这个数据结构，但是修改（或搜索）它被证明是更困难的

如果我查看obj[1]，innerHTML属性如下所示：

<h4 id="3423df" class="pzCMD">blah blah foo blah </h4>

但我不确定如何将此元素的html代码更改为

<h4 id="3423df" class="pzCMD">blah blah <span class='bar' foo <span> blah </h4>

blah blah允许您动态附加dom元素，但也可以直接插入Jscript：

 var obj = $(this.innerHTML); 
 obj[1].innerHTML = obj[1].innerHTML+'blah hi</span>';
 //<h4 id="3423df" class="pzCMD">blah blah <span class='bar' foo <span> blah blah hi  </span> </h4>

var obj=$（this.innerHTML）；
obj[1]。innerHTML=obj[1]。innerHTML+'blah hi'；
//诸如此类的也许我不明白，但无论如何我会给你一个解释。告诉我它是否适合你：
我们的想法是用类foo和文本foo获取所有div，将该文本移除，并用另一个类的span替换它。所以

<div class="foo">some ttext nmot changed except the foo part</div>

除foo部分外，其他部分ttext nmot已更改

将更改为：

<div class="foo">some ttext nmot changed except the <span class="bar">foo</span> part</div>

除foo部分外，其他部分ttext nmot已更改

代码如下：

var allFoosInTheWorld = $("div.foo");

for (var i = 0; i < allFoosInTheWorld.length; i++ ){
    var text = $(allFoosInTheWorld[i]).text();
    var index = text.indexOf("foo");

    if ( index != -1 ){
        var elem = '<span class="bar">' + "foo!!!" + '</span>';
        text = text.replace("foo", elem);
        $(allFoosInTheWorld[i]).text(text);
    }
}

var allFoosInTheWorld=$（“div.foo”）；
for（变量i=0；i
现在它支持不同的div！
很抱歉耽搁了，很抱歉没有使用foreach！！！我似乎无法适应它：）

var classesIWant=[“foo”、“foo1”、“foo2”]；
var allDivsInTheWorld=jQuery（“div”）；
for（变量i=0；i
我试图以错误的方式执行此操作。这是我创建的解决方案，似乎效果很好。它使用两个递归函数+DOM遍历+正则表达式来创建适当的文本和跨节点

function replaceText(element, pattern, syn_text) {

for (var childi = 0; childi < element.childNodes.length;childi++) {
    var child= element2.childNodes[childi];
    if (child.nodeType==1 && child.className!=syn_text){ //make sure we don't call function on newly created node
        replaceText(child, pattern, syn_text);  //call function on child
    }
    else if (child.nodeType==3){ //this is a text node, being processing with our regular expression
        var str = child.data;
        str = str.replace(pattern,function(s, p1,p2,p3) {
            var parentNode = child.parentNode;
            do_replace(s, p1,p2,p3,parentNode,pattern,syn_text);
            parentNode.removeChild(child);  //delete old child from parent node.  we've replaced it with new nodes at this point
         });
    }
}}




function do_replace(s, p1,p2,p3,parentNode,pattern,syn_text) {
   if(p1.length>0){   //this might not be necessary
     //create textnode
      var text_node = document.createTextNode(p1);
      parentNode.appendChild(text_node);
   }
   if(p2.length > 0){ //create a span + next_node for the highlighting code
      spanTag = document.createElement("span");
      spanTag.id = "SString" + id++;
      spanTag.className = syn_text;
      spanTag.innerHTML = p2;
      parentNode.appendChild(spanTag);
   }
   if(p3.length > 0){
       //test to see if p3 contains another instance of our string.

      if(pattern.test(p3)){  //if there is a instance of our text string in the third part of the string, call function again
          p3.replace(pattern,function(s, p1,p2,p3) {
            //debugger;
            do_replace(s, p1,p2,p3,parentNode,pattern);
            return;
          });
      }
      else{  //otherwise, it's just a plain textnode, so just reinsert it.
          var text_nodep3 = document.createTextNode(p3);
          parentNode.appendChild(text_nodep3);
          return;
      }
    }
    else{ //does this do anything?
        return;
     }
return}

谢谢你的回复。我本来应该在我最初的问题中说得更清楚一些。“foo”的值可以更改，有时与中的id或类相同，或者包含我要添加span的文本。在本例中，如果我正在搜索“foo”的所有实例，并且“foo”同时出现在文本和标记代码中，那么我将遇到我试图解决的问题。如果我错了，请纠正我，当然！：）如果您使用jquery，使用each（）而不是设置for循环，您可能会做得更好。谢谢您的回复。我正在研究使用这种方法将span代码插入html。我看到的一个问题（我可能不太清楚）是，在这段代码中，您假设我要对其执行替换的所有div都命名为foo。这可能是我的措辞，但事实并非如此。。。页面上的每个div/都可以有一个不同的类，不管这个类是什么，我都需要搜索它。然而，我将尝试修改您在示例中所做的工作！谢谢好吧，在仔细研究了这个解决方案之后，我认为它行不通。假设有这样的事情：布拉-福布拉-一些内容-这个方法似乎删除了div中的任何html代码，除了放在foo中的代码！！！部分这看起来正确吗？它不会删除代码，它只会替换垃圾邮件代码的所有“foo”，是的！我本可以使用迭代器，很抱歉，旧的c习惯很难改变
<div class="foo">some ttext nmot changed except the foo part</div>

<div class="foo">some ttext nmot changed except the <span class="bar">foo</span> part</div>

var allFoosInTheWorld = $("div.foo");

for (var i = 0; i < allFoosInTheWorld.length; i++ ){
    var text = $(allFoosInTheWorld[i]).text();
    var index = text.indexOf("foo");

    if ( index != -1 ){
        var elem = '<span class="bar">' + "foo!!!" + '</span>';
        text = text.replace("foo", elem);
        $(allFoosInTheWorld[i]).text(text);
    }
}

var classesIWant = ["foo", "foo1", "foo2"];
var allDivsInTheWorld = jQuery("div");

for( var i = 0; i < allDivsInTheWorld.length; i++) {
    var element = allDivsInTheWorld[i];
    var good = false;    

    for (var j = 0; j < classesIWant.length; j++){
        if ( $(element).hasClass(classesIWant[j]) )
            good = true;
    }

    if ( !good )
        continue;

    var text = $(element).text();
    var index = text.indexOf("foo");

    if ( index != -1 ){
        var elem = '<span class="bar">' + "foo!!!" + '</span>';
        text = text.replace("foo", elem);
        $(element).text(text);
    }
}

function replaceText(element, pattern, syn_text) {

for (var childi = 0; childi < element.childNodes.length;childi++) {
    var child= element2.childNodes[childi];
    if (child.nodeType==1 && child.className!=syn_text){ //make sure we don't call function on newly created node
        replaceText(child, pattern, syn_text);  //call function on child
    }
    else if (child.nodeType==3){ //this is a text node, being processing with our regular expression
        var str = child.data;
        str = str.replace(pattern,function(s, p1,p2,p3) {
            var parentNode = child.parentNode;
            do_replace(s, p1,p2,p3,parentNode,pattern,syn_text);
            parentNode.removeChild(child);  //delete old child from parent node.  we've replaced it with new nodes at this point
         });
    }
}}




function do_replace(s, p1,p2,p3,parentNode,pattern,syn_text) {
   if(p1.length>0){   //this might not be necessary
     //create textnode
      var text_node = document.createTextNode(p1);
      parentNode.appendChild(text_node);
   }
   if(p2.length > 0){ //create a span + next_node for the highlighting code
      spanTag = document.createElement("span");
      spanTag.id = "SString" + id++;
      spanTag.className = syn_text;
      spanTag.innerHTML = p2;
      parentNode.appendChild(spanTag);
   }
   if(p3.length > 0){
       //test to see if p3 contains another instance of our string.

      if(pattern.test(p3)){  //if there is a instance of our text string in the third part of the string, call function again
          p3.replace(pattern,function(s, p1,p2,p3) {
            //debugger;
            do_replace(s, p1,p2,p3,parentNode,pattern);
            return;
          });
      }
      else{  //otherwise, it's just a plain textnode, so just reinsert it.
          var text_nodep3 = document.createTextNode(p3);
          parentNode.appendChild(text_nodep3);
          return;
      }
    }
    else{ //does this do anything?
        return;
     }
return}

syn_highlight = "highlight_me";  //class to signify highlighting 
pattern = new RegExp('([\\w\\W]*?)\\b('+ searchTerm + '[\\w]*)\\b([\\w\\W]*)',"ig");
replaceText($('#BodyContent')[0],pattern,syn_highlight);