【问题标题】：Find and replace text portion of html element that may contain children查找和替换可能包含子元素的 html 元素的文本部分
【发布时间】：2016-06-15 17:17:20
【问题描述】：

我正在从所见即所得编辑器中提取一些 html，并且需要解析和替换文本部分。例如，我可能会得到这样的 html：

<span style="font-size: 36px; line-height: 50.4px;">
    first text I want to replace
    <span style="font-size: 11px;"><i><b>hello world</b></i></span>
    second text I want to replace
    <span style="font-size: 15px;"><i><b>foo bar</b></i></span>
    third text I want to replace
</span>

假设我想替换父跨度的文本部分并单独保留子元素。例如，假设我想将 html 转换为：

<span style="font-size: 36px; line-height: 50.4px;">
    I replaced my first text
    <span style="font-size: 11px;"><i><b>hello world</b></i></span>
    I replaced my second text
    <span style="font-size: 15px;"><i><b>foo bar</b></i></span>
    I replaced my third text
</span>

替换前和替换后的字符串值与此问题无关。我只想知道如何找到并替换这些字符串。

我在网上能找到的最接近的东西是这个 jQuery 的绝妙技巧：

$("#span-selector").clone().children().remove().end().text()

但是，这将从父级中提取所有文本，而无法替换已修改的字符串。我如何使用 javascript/jQuery 查找 first text I want to replace 并将其替换为 I replaced my first text

有人认为这是可能的吗？请记住，我直接从编辑器获取 html，因此用户可能会输入一些看起来像 html 的字符。所以我不知道手动解析html寻找''是否可行。

【问题讨论】：

标签： javascript jquery html string replace

【解决方案1】：

你可以使用.contents()获取一个元素的所有子元素，然后使用.eq()获取指定索引处的元素，最后将元素替换为.replaceWith()

function replaceText() {
  $('#parent').contents().eq(0).replaceWith('<h3>Replaced with HTML</h3>');
  $('#parent').contents().eq(2).replaceWith('replaced 2');
  $('#parent').contents().eq(4).replaceWith('replaced 3');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="parent" style="font-size: 36px; line-height: 50.4px;">
    my first text
    <span style="font-size: 11px;"><i><b>hello world</b></i></span>
    my second text
    <span style="font-size: 15px;"><i><b>foo bar</b></i></span>
    my third text
</span>
<button onclick="replaceText()" >Replace</button>

【讨论】：

很好，但如果用户包含自己的 html 将无法正常工作吗？
这正是我所需要的。谢谢！

【解决方案2】：

另外，您也可以这样做。

DEMO

html:

<div class="container">
  <i>Lorem ipsum dolor sit amet</i>, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <br><br>
  
  <h1><span>My Span Content</span></h1>
  
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.
  <br><br>
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur.
</div>

jquery:

$(function() {
  $( ".container" )
    .contents()
    .filter(function() {
      return this.nodeType === 3
    }).each(function(i, a) {
      if (0 === i) { // use suitable condition, in this case, 1st
          $(this).replaceWith('<p>my new content.</p>');
      }
    });
})

【讨论】：

【解决方案3】：

查看https://developer.mozilla.org/en-US/docs/Web/API/Text

为了将来参考，您也可以在纯 JS DOM 中执行此操作。这是将您的文本节点替换为“已替换”的代码

document.getElementsByTagName('span')[0].childNodes.forEach((node)=>{
  node.data='replaced';
})

【讨论】：