Javascript 序列化html：在选定文本周围放置跨元素，同时保留html结构

我正在尝试制作一个文本高亮器，教师可以选择一系列文本，以便学生可以跟随。文本采用HTML格式，因此有等。。。元素

为了突出显示文本范围，我将该范围包装在跨度元素中

问题是：

下面是一个带有一些HTML标记的句子：

<p>The <b>quick</b> brown fox jumps over the <em>lazy</em> dog</p>

当我选择“The”这样的词时，它会被包装成一个“boom”，没问题

当我尝试选择任何html标记时，问题就会出现。。。例如，如果我选择了整个句子，那么我就失去了所有的分数

我在找什么

一种序列化跨距的方法，使跨距位于html元素之间并包装所有文本

使用上一个示例：如果我选择上面的整个句子，那么我将获得以下输出：

<p><span>The </span><b><span>quick</span></b><span> brown fox jumps over the </span><em><span>lazy</span></em><span> dog</span></p>

问:

---

有这种序列化的方法吗？我在jQuery文档中找不到任何东西，我问过的几个人都被难住了。

我认为你不需要jQuery，简单的CSS可以做到这一点：

*::selection { background-color: yellow !important; }

关键是使用。文档说明了满足您需求的最重要部分：

将克隆部分选定的节点以包括父标记 使文档片段有效所必需的

document.getElementById'test'.addEventListener'mouseup'，函数{ 变量范围=window.getSelection.getRangeAt0， span=document.createElement'span'； span.className='highlight'； span.appendChildrange.extractContents； range.insertNodespan； }; .突出显示{背景色：黄色；} 选择此句子的任何部分，然后将鼠标移动到新位置。

---

嗨，谢谢你的回答，我很感激，但这不是我要问的。Yrw，我想这是让我困惑的原因：我正在尝试制作一个文本高亮，老师可以选择一系列文本，这样学生就可以跟上。不用担心！感谢你的意图！只是，哇。这正是我一直在寻找的魔法！唯一的问题是像h1到p一样拖拉高光。。。哎呀！我得考虑一下那件事。。这项业务似乎有点像“追逐你的尾巴”。再次感谢！