JavaScript - 如何用 span 标签包围 block 标签？

Question

我想根据用户的选择用我自己的 span 标签包围一堆 block 标签(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>

如果用户从两个段落中选择部分(假设用户选择“there Mary Hello there”)，我希望得到类似以下内容的结果:

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

Answer 1

您需要找到选择范围内的所有文本节点，并分别包围每个节点。我写了一个库来做这个:Rangy ，特别是 CSS class applier module .