序列化html：将span元素围绕所选文本放置，同时保留HTML结构 [英] Serializing html: placing span elements around selected text while preserving the HTML structure

问题描述

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

要突出显示范围，我将范围包围在span元素中。 / p>

问题：

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

这是一个句子，一些HTML标记：

 < p>< b> quick< / b>棕色狐狸跳过< em> lazy< / em>狗< / p为H. 
  

当我选择一个单词如'The'时，它被包裹在一个 < span> ，繁荣，没问题。

当我尝试选择任何html标签时，问题出现...例如if我选择整个句子，然后我失去所有的标记。

我在找什么。

一种用于序列化跨度的方法，以便它们落入html元素之间并包装所有文本。

使用上一个示例：if我选择上面的整个句子，然后我会得到以下输出：

 < p>< span>< /跨度>< b取代;<跨度>快速和LT; /跨度>< / b><跨度>棕色狐狸跳过< / span>< em>< span> lazy< / span>< / em>< span>狗< /跨度>< / p为H. 
  

问：

有没有这种序列化的方法？我在jQuery文档中找不到任何东西，而我所要求的少数人被困了。

解决方案

关键是使用 range.extractContents（） 即可。文档说明了您需要的最重要的部分：

部分选择的节点被克隆以包含必需的父标签
文件片段有效。

  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）;}）;  

  .highlight {background-color：yellow; }  

 < div id =test>选择< b>这个句子的任何部分和< / b>然后将鼠标移动到新位置。< / div>  

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

I am trying to make a text highlighter where a teacher can select a range of text so that the student can follow along. The text is formatted with HTML so there are <p>, <b>, <em> etc... elements.

To highlight the range of text I am wrapping the range in a span element.

The issue:

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

Here is a sentence with some HTML markup:

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

When I select a word such as 'The' it gets wrapped in a <span>, boom, no problem.

The issues come when I try and select over any html tags... for example if I select the entire sentence then I lose ALL my mark-up.

What I am looking for.

A method to serialize the spans so that they fall in-between the html elements and wrap all the text.

Using the previous example: if I select the entire sentence above then I would get the following output:

<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>

Q:

Is there a method for this kind of serialization? I can't find anything in the jQuery docs and the few people I have asked were stumped.

解决方案

The key is to use range.extractContents(). The documentation states the most important part for your needs:

Partially selected nodes are cloned to include the parent tags necessary to make the document fragment valid.

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);
});

.highlight { background-color: yellow; }

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

You can see in the picture below that the resulting HTML from a selection does exactly what you are asking:

这篇关于序列化html：将span元素围绕所选文本放置，同时保留HTML结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！