javascript - 在段落标记内为所选文本插入 HTML 标记

Question

我正在尝试为段落标记中的选定元素添加新元素。HTML 代码片段如下:

 <div class="parent-bodytext">
     <p>Hello</p>
     <p>This one is</p>
     <p>Sample Text</p>
 </div>

所以在上面的代码片段中，我从第二个 P 标签中选择了“一个”单词，并使用我尝试向所选文本添加元素的任何事件，以便输出如下所示:

 <div class="parent-bodytext">
     <p>Hello</p>
     <p>This <strong>one</strong> is</p>
     <p>Sample Text</p>
 </div>

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

Answer 1

您可能想使用 window.getSelection为此目的

const wrapper = document.getElementsByClassName('parent-bodytext')[0];

wrapper.addEventListener('mouseout', event => {
   const selection = window.getSelection();
   if (selection.rangeCount) {
       const replacement = document.createElement('strong');
       replacement.textContent = selection.toString();
       const range = selection.getRangeAt(0);
       range.deleteContents();
       range.insertNode(replacement);
   }
});

 <div class="parent-bodytext">
 <p>Hello</p>
 <p>This one is</p>
 <p>Sample Text</p>
 </div>