JavaScript - 如何用 span 标签包围块标签？答案

【问题标题】：JavaScript - How to surround block tags with span tag?JavaScript - 如何用 span 标签包围块标签？
【发布时间】：2012-03-16 02:25:53
【问题描述】：

我想根据用户的选择用我自己的 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 Hello”）：

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

【问题讨论】：

你似乎在使用 jQuery，虽然你没有这样标记问题，所以你可能想看看api.jquery.com/wrapAll
wrapAll 并不能完全解决问题，因为用户只能选择段落/句子的一部分，而不必选择整个节点。
好吧，它不能解决您的edited 要求。（当然，即使对于您最初的问题，您仍然必须确定要包装的适当元素。）

标签： javascript jquery dom select range

【解决方案1】：

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

【讨论】：

你写的很好！我希望我在 2005 年写我的编辑器时也有类似的东西。
@AnthonyMills：我也是：我为 2000 年代中期流产的编辑写了一些可怕的东西。

【解决方案2】：

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

我过去解决此问题的一种方法是发出命令以将假字体应用于所选内容。然后我通过容器的 DOM 寻找 <font face="fakefont"> 并用我的 span 标签替换每一个。这往往效果很好。

【讨论】：

您能否详细说明如何将假字体应用于所选内容？
你会做类似range.execCommand("fontname", false, "fakefont");的事情。