在javascript中搜索和替换div的html内的文本，而不是标签内的文本

Question

我有一些 HTML 结构，我想在那个 HTML 结构中搜索特定的文本。 看下面的例子

<h1>Try to span some text on this page</h1>
    <div>
        span is a <span>paragraph</span>.</div>
    <p class="span ddd">This 123is a paragraph.1</p>

<div class="span ddd">This is some span in a div element.</div>

现在，如果我要搜索“span”文本，那么“span”字应该用 div 标签包裹。 但只有文本中的“span”词，而不是类或其他标签。

我想要这样的输出（使用 div 或 span 换行）

<h1>Try to <span class="search">span</span> some text on this page</h1> <div> <span class="search">span</span> is a <span>paragraph</span>.</div> <p class="span ddd">This 123is a paragraph.1</p> <div class="span ddd">This is some <span class="search">span</span> in a div element.</div>

Answer 1

<div id="wrapper"> 
    <h1>Try to span some text on this page</h1>
  <div>
    span is a <span>paragraph</span>.
  </div>
    <p class="span ddd">This 123is a paragraph.1</p>

    <div class="span ddd">This is some span in a div element.</div>
</div>

我已经修改了你的 html，用一个包装器封装了我的选择器。但是你可以使用自己的选择器。

$(document).ready(function(){
   var str=$('#wrapper').html();
   $('#wrapper').html(str.replace( new RegExp(" span ","g"),"<div>span</div>"));
});

此代码将满足您的需求。 这是jsffiddle。

如果您的问题已解决，请不要忘记将其标记为已解决。谢谢。

Answer 2

我不太确定这是否是您想要的。但是这样的事情应该可以工作

$(function() {
    var found = $('div:contains("span")');
});

这是一个小提琴 http://jsfiddle.net/z7ckK/

如果你使用*:contains，它会在 HTML 中搜索它。

更新： 最初错过了更换零件。我有一个解决方案，但为此您需要在搜索元素上添加一个包装元素。请检查我的小提琴。你会明白的。 http://jsfiddle.net/z7ckK/3/

Answer 3

你可以试试这个正则表达式：(?<!<[^>])${searchWord}(?<![^>]<)

let innerHTML = document.body.innerHTML
let searchWord = 'span'
let regex = new RegEx(`(?<!<[^>])${searchWord}(?<![^>]<)`,gi)

innerHTML.replace(regex, (x)=> {
return `<div>x</div>`;
});