javascript - 将跨度放在选定的文本上

Question

如何在不破坏任何标签元素（javascript）的情况下使选定的文本被一个跨度包围

一个例子：

原文：

<p> a foo </p>
<p> another bar </p>

选择：

吧台_o
anoth

我不想破坏 html 嵌套结构：

 <p> a fo<span>o </p>
<p> anoth</span>er bar </p>

我需要这样的东西：

 <p> a fo<span>o </span></p>
 <p> <span>anoth</span>er bar </p>

Answer 1

这是不可能的。想象一下：

<p> a foo </p>
<p> another bar </p>

导致：

一个 foo
另一个酒吧

现在，如果用户只选择一部分，让我们说：

吧台_o
anoth

你打破了 html 嵌套结构：

 <p> a fo<span>o </p>
<p> anoth</span>er bar </p>

仅使用一个标签是不可能实现的。

Answer 2

使用这个优秀的 treeWalker 实现，这里是一个jsFiddle。请让我知道这是否适合您。旁注，使用 rangy 非常棒。

编辑：不，等等，已修复。

Answer 3

您将需要遍历所选文本中的每个字符，按字符所在的 DOM 节点对字符进行分组。创建组后，您需要将每个组包装在<span>标签中。

您可以通过查看选择对象的anchorNode和focusNode属性，以及使用该方法测试其他合理节点（即，锚节点和焦点节点的公共父节点/祖先的所有子节点）来做到这一点containsNode()。