Javascript:如何将选定的文本沿着多个 p 标签包装到每个带有 span 标签的标签的每个内容中

Question

当我沿着多个 p 标签选择文本时，我获得了每个标签的每个内容，这在 Javascript: How to divide selected text along multiple p tags into each content for each tag 中得到了回答。 .

例如，

<p>I am (selection start)a boy</p>
<p>You are a girl</p>
<p>We are(selection end) friends</p>

现在，我可以获得三个元素，“一个男孩”，“你是一个女孩”，“我们是”。

那么，如何用span标签包裹每个元素并改变其样式呢？例如，

<p>I am (selection start) <span style ="font-weight:bold">a boy</span></p>
<p><span style ="font-style:italic">You are a girl</span></p>
<p><span style ="font-decoration:underline">We are</span> (selection end) friends</p>

我尝试使用 jquery wrapinner 方法、过滤器、包含等，但我无法弄明白。

感谢您的宝贵时间。

Answer 1

试试这段代码:

var elems = document.querySelectorAll('p');

for(var i=0;i<elems.length;i++){
    elems[i].innerHTML = elems[i].innerHTML.replace('a boy','<span style="font-weight: bold">a boy</span>');
    elems[i].innerHTML = elems[i].innerHTML.replace('You are a girl','<span style="font-weight: bold">You are a girl</span>');
    elems[i].innerHTML = elems[i].innerHTML.replace('We are','<span style="font-weight: bold">We are</span>');
}

<p>I am a boy</p>
<p>You are a girl</p>
<p>We are friends</p>