选择范围到 HTML 元素

Question

如何将选定的文本范围转换为 HTML 元素？

例如， string The quick brown fox jumps over the lazy dog，我提取了brown反映选择点的部分start = 10和end = 14（选择不是由用户输入构建的）。

现在，我如何将这部分字符串转换为 a <span>brown</span>？

PS 我已经研究过如何用 HTML 标签包装跨界 DOM 选择范围？. 提供的答案使用 execCommand，但这并不满足我，因为我需要它尽可能透明。

我Range也在使用API 进行选择，但在这种情况下 - “选择”只是存储的start/end位置指针，实际上没有进行选择。

我有一个想法，我可以使用指针在背景中创建一个选择，用</span>它换行，这对用户来说是不可见的，但话说回来……我不知道如何执行这个。

提前致谢！

Answer 1

在这种情况下，您可以使用 的方法执行此操作Range。我假设您的文本都包含在一个文本节点中。例如：

<div id="test">The quick brown fox jumps over the lazy dog</div>

首先，创建范围：

var range = document.createRange();
var textNode = document.getElementById("test").firstChild;
range.setStart(textNode, 10);
range.setEnd(textNode, 15);

要在跨度内仅将“棕色”一词括起来，您可以使用范围的surroundContents()方法：

var span = document.createElement("span");
range.surroundContents(span);

但是，这在选择跨越节点边界的一些更复杂的情况下不起作用。此外，IE < 9 不支持Range，因此您需要为这些浏览器提供完全不同的解决方案。

现场演示：http : //jsfiddle.net/m3yJ5/

自我推销部分

对于更复杂的情况，你可以使用我的Rangy库和它的CSS 类applier模块，它<span>用特定的 CSS 类包围s 中的任何任意选择或范围。