Question

我有一些像这样的HTML：

<div id="demo">
    <p>
        <span class="myClass">Word test should not be marked</span>
        Word test should be marked<br />
    </p>
</div>

如何在除div之外的span内找到一个单词（'test'）并使用jQuery标记它？我在SO等等中看到了很多解决方案，但它们都没有对我有用。仅供参考我正在尝试使用的代码是这样的：

var regex = XRegExp('test', 'i');
$('#demo').markRegExp(regex);

Answer 1

使用 contents() 获取所有子节点，然后迭代并更新文本节点。

$('#demo p')
  .contents() // get all child nodes including text and comment nodes
  .each(function() { // iterate over nodes
    if (this.nodeType == 3) // check node is text node
      $(this).replaceWith(this.textContent.replace(/test/g, '<span class="test">$&</span>')) // update the content and replace node with html content
  });

.test {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="demo">
  <p>
    <span class="myClass">Word test should not be marked</span>
    Word test should be marked
    <br />
  </p>
</div>

Answer 2

这是一个繁琐的正则表达式解决方案：

    var html=$("#demo").html();
    var elements=html.split(/(<[^>]+>)/); // split into tags and text
    $.each(elements,function(i,e){
    if(!e.match(/<[^>]+>/)){
        if(elements[i-1]!==undefined){
        if(!$(elements[i-1]).hasClass('myClass')){
            elements[i]=elements[i].replace(/test/g,"<span class='highlight'>test</span>");
        }
      }
    }
  });
  $("#demo").html(elements.join(''));

但是，将想要替换的文字标记为类更清晰，那么你可以这样做：

$("#demo").find("span[class='myClass']").each(function(){
    $(this).html($(this).text().replace(/test/g,"<span class='highlight'>test</span>"));
});

为两种解决方案工作JSFiddle。

如何替换父元素的内容，忽略使用jQuery的子元素

2 个答案: