javascript - 查找并替换可能包含子元素的 html 元素的文本部分

Question

我正在从所见即所得编辑器中提取一些 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 找到我想要替换的第一个文本并将其替换为我替换了我的第一个文本

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

Answer 1

您可以使用 .contents() 获取元素的所有子元素，然后使用 .eq() 获取指定索引处的元素，最后替换 elemnt与 .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>