在特定索引处插入新范围

Question

我想在特定索引位置之间插入一个新的跨度元素。所以我从数据库中获取一个显示的 html 字符串。现在，在显示它之前，我希望在索引范围之间插入很少的 span 元素。在示例中，我想在索引 6 到 18(世界)之间插入一个范围。

<div>
<span>Hello World.<span>
<span>This is stackoverflow and it is awesome</span>
</div>

预期成果

<div>
<span>Hello <span>World.</span></span>
<span><span>This is </span>stackoverflow and it is awesome</span>
</div>

我面临的问题是当索引位置包含不同的标签时。我无法直接在从 db 检索的 html 字符串中插入新的跨度，因为此索引范围有 2 个单独的元素。

我正在从父元素计算索引。(在本例中为div)。 我尝试的是搜索索引范围中包含的文本，搜索其在 html 字符串中的位置并在那里插入一个范围。但是，当一个单词在原始字符串中多次出现时，这将失败。(如果字符串是"Hello world world"并且我想在第二个世界周围插入一个跨度，这种方法将在第一个世界周围插入一个跨度)

Answer 1

如果你只想替换特定的单词，那么你可以只使用正则表达式：

let div = document.querySelector('div')
const words = ['world', 'stackoverflow']
div.innerHTML = div.innerHTML.replace(new RegExp(`(${words.join('|')})`, 'gi'), '<span>$1</span>')

div>span>span{font-weight:bold;color:red;}

<div>
<span>Hello World.</span>
<span>This is stackoverflow and it is awesome</span>
</div>