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

Question

我正在尝试制作文字荧光笔，教师可以选择一系列文字，以便学生可以跟随。文本使用HTML格式化，因此有<p>，<b>，<em>等元素。

要突出显示我在span元素中包装范围的文本范围。

问题：

https://jsfiddle.net/7fedkobr/1/

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

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

当我选择“The”之类的单词时，它会被<span>包裹，繁荣，没问题。

当我尝试选择任何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文档中找不到任何内容，而我所问的几个人都被难倒了。

Answer 1

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

  

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

＆＃13;

＆＃13;

document.getElementById('test').addEventListener('mouseup', function() {
    var range = window.getSelection().getRangeAt(0),
        span = document.createElement('span');

    span.className = 'highlight';
    span.appendChild(range.extractContents());
    range.insertNode(span);
});

＆＃13;

.highlight { background-color: yellow; }

＆＃13;

<div id="test">
    Select any part of <b>this sentence and</b> and then move the mouse to a new location.
</div>

＆＃13;

＆＃13;

＆＃13;

您可以在下面的图片中看到，选择中生成的HTML完全符合您的要求：

Answer 2

我认为你不需要jquery，纯CSS会起到作用：

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