Question

我想根据用户的选择用我自己的span标签包围一堆块标签（p，div），我想知道怎么做？我查看了range.insertNode（）和range.surroundNode（）函数，但没有办法将多个节点传递给环绕。

我目前的实现如下：

var selection = window.getSelection();

var range = selection.getRangeAt(0);
var $startSpan = $("<span class=\"SelectSpan\"/>");

range.insertNode($startSpan[0]);
range.surroundContents($startSpan[0]);

如果选择只包含一个节点（即用户只选择段落的一部分），则此方法有效，但如果用户的选择遍历多个P或Div（其他标签，我确定），则会中断。

作为示例，请考虑以下DOM结构：

<div>
  <p>Hello there Mary</p>
  <p>Hello there Jake</p>
</div>

如果用户从两个段落中选择部分（假设用户选择“那里有Mary Mary Hello”），我想最终得到以下内容：

<div>
  <p>Hello <span>there Mary</span></p>
  <p><span>Hello there</span> Jake</p>
</div>

Answer 1

这可能是一个难题，因为范围可以包含DOM中不同级别的许多不同节点。（例如，如果用户选择一个段落的最后一个单词和下一个段落的第一个单词怎么办？）所以你真的不能想到只插入一个span。您可能需要插入多个。

我过去解决这个问题的一种方法是发出一个命令，将假字体应用于选择。然后，我浏览容器的DOM，查找<font face="fakefont">，然后用span标记替换每个。这往往效果很好。

Answer 2

您需要找到选择范围内的所有文本节点并单独包围每个节点。我编写了一个执行此操作的库：Rangy，特别是CSS class applier module。

JavaScript - 如何使用span标记包围块标记？

2 个答案: