将HTML标签插入到html中不同段落标签的多个选定文本中

Question

我正在尝试为其他段落标签中的多个选定文本添加新的HTML标签。 HTML代码段如下：

<div class="sampleContent">
<p>Hello</p>
<p>This one is</p>
<p>Sample Text</p>
</div>

因此，在上面的代码段中，我从第一个P标签中选择了“ llo”文本，从第二个P标签中选择了“ this is”文本，并从第三个P标签中选择了“ Sample”文本。现在，在任何按钮选择上，都应将新创建的标签添加到所有选定的文本中，以使输出如下所示：

<div class="sampleContent">
<p>"He"<div id="1"> llo </div></p>
<p><div id="1"> This one is </div></p>
<p><div id="1"> Sample </div>Text</p>
</div>

那么如何为所有选定的文本添加这个新创建的“ div”元素？

我尝试了以下代码：

const wrapper = document.getElementsByClassName('sampleContent')[0];
wrapper.addEventListener('mouseout', event => {
const selection = window.getSelection();
 if (selection.rangeCount) {
 const replacement = document.createElement('div');
 replacement .setAttribute( "id", "1" );
 replacement.textContent = selection.toString();
 const range = selection.getRangeAt(0);
 range.deleteContents();
 range.insertNode(replacement);
}
});

但是它给出的输出为：

 <div class="sampleContent">
 <p>"He"<div id="1"> llo 
 This one is
 Sample 
 </div></p>
 <p>Text</p>
 </div>

Answer 1

这将解决您的问题。

        var count=0;
    const wrapper = document.getElementsByClassName('sampleContent')[0];
wrapper.addEventListener('mouseup', event => {
    count++;
    const original=event.target.textContent.toString();
const selection = window.getSelection();
 if (selection.rangeCount) {
 const replacement = document.createElement('div');
 replacement .setAttribute( "id", count );
 replacement.textContent = selection.toString();
 const range = selection.getRangeAt(0);
 var array=original.split("");
 array.splice(range.startOffset,range.endOffset-range.startOffset)

 var string=array.join("");
 event.target.textContent=string;
 range.deleteContents();
 range.insertNode(replacement);

}
});

基本上我所做的是

• 将事件从mouseout更改为mouseup，以获得更准确的结果。
• 我应用了一个计数器，该计数器在每次选择事件时都会增加。此计数器将是您的div的ID。多个元素的ID不应相同，因为所有结果都汇总为一个div。
• 我将整个段落文本放在一个变量中，然后从中删除所选部分，并将其附加到带有div的段落中。

结果-