如何在 JavaScript 中忽略 HTML 标记来替换两个索引之间的子字符串

Question

我想替换两个索引之间文本中的子字符串。但我想在计算索引时忽略任何 HTML 标签。

例如

，如果文本是the best kitchen Knife，我想用“nice”替换从索引4到8的子字符串，因此输出应该是the Nice kitchen Knife

但是如果文本位于 HTML 标记中，例如

最好的菜刀 或者

最佳菜刀

，给定索引为 4 和 8，它应该从 'the' 开始计数，而不是从

开始计数。所以预期的输出应该是

the nice菜刀

我使用了以下代码，但它没有按我的预期工作。

function replaceBetween(origin, startIndex, endIndex, insertion) {
    return (
        origin.substring(0, startIndex) + insertion + origin.substring(endIndex)
    );
}

用法：

replaceBetween("<li>the <span>best</span> kitchen knife</li>", 4, 8, "nice");

输出：

<li>nice<span>best</span> kitchen knife</li>

预期输出：

<li>The <span>nice</span> kitchen knife</li>

Answer 1

一种解决方案是检索 li 元素 的 .innerText。返回的值将不包含任何 html 标签，因此您可以根据需要操作文本。如果需要删除的标签，您必须将它们放回去（通过修改文本字符串以包含标签）并将 li 元素'.innerHTML` 设置为您的文本字符串（浏览器会将文本解释为 html 标记）。

.innerText 检索的结果显示在以下代码片段的日志中：

let txt = document.getElementsByTagName('li')[0].innerText;
console.log(txt);

<ul>
<li>the <span style="color:red">best</span> kitchen knife</li>
</ul>