将span放在选定的文本上

Question

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

一个例子：

原文：

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

选自：

fo o
anoth er bar

我不想打破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
另一个酒吧

现在，如果用户只选择一部分，请说：

fo o
anoth er bar

你打破了html嵌套结构：

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

只用一个标签就无法实现。

Answer 2

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

您可以通过查看选择对象的anchorNode和focusNode属性，以及测试其他可信节点（即，锚的共同父/祖先的所有子节点）来执行此操作。使用containsNode()方法聚焦节点。

Answer 3

使用this优秀的treeWalker实现，这里是jsFiddle。 如果这对你有用，请告诉我。边注意，使用rangy很棒。

编辑：不，等等，修好。