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

Posted 2023-05-09

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

【英文标题】：search and replace text inside html of div in javascript but not text inside tag

【发布时间】：2014-05-07 11:34:18

【问题描述】：

我有一些 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>

【问题讨论】：

请输出样例，有习惯附上主要问题

搜索变量来自输入还是您想自己做？发布您尝试过的代码将有助于回答。

only "span" word in text，你什么意思，有元素包裹着一切？

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

请将示例输出放在问题中，而不是在评论中。

【参考方案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。

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

【讨论】：

感谢它的帮助，但我对这个例子还有一个问题是，我还想搜索像“xyzspanlmn”这样的跨度

【参考方案2】：

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

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

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

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

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

【讨论】：

op 想要搜索写在文本中的spans 并替换为<div>span</div>

【参考方案3】：

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

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

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