Question

我想在特定索引位置之间插入一个新的span元素。所以我从显示的数据库中获取一个html字符串。现在，在此显示之前，我希望在索引范围之间插入几个span元素。在示例中，我想在索引6到18（World.This是）之间插入一个跨度

<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>

在特定索引处插入新的跨度

1 个答案: