Question

我目前正在尝试在网页中的某些字词周围添加标签。这个网页可以有许多不同的id，类和名称，所以重要的是，如果我试图在“foo”周围放置一个范围，我会执行以下操作：

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

变为

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

而不是

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

我正在调查使用以下代码解析网站：

var obj = $(this.innerHTML);  //in my selector which selects the part of the website I want to apply the span to

我能够在firebug中浏览这个数据结构，但修改它（或搜索它）会更加困难。

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

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

我不知道如何修改此元素（如果可能）或向其添加新节点。我可以通过查看textContent

来提取“文本”

obj[1].textContent = blah blah foo blah

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

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

感谢您的帮助，对于冗长的解释感到抱歉。

Answer 1

jQuery.add()允许你动态附加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>

Answer 2

也许我没有理解，但无论如何我会给你一个解释。告诉我它是否适合你：我的想法是让所有div都使用类foo和text foo，取出该文本并用另一个类替换它。所以

<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);
    }
}

Answer 3

现在它支持不同的div！对不起延迟，抱歉没有使用foreach !!!我似乎无法适应它：）

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);
    }
}

Answer 4

我试图以错误的方式做到这一点。这是我创建的解决方案，似乎工作得很好。它使用两个递归函数+ 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}

此函数调用如下：

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);

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

4 个答案: