javascript - HTML 元素的选择范围

Question

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

例如，字符串The quick brown fox jumps over the lazy dog ，我已经获取了该部分 brown反射(reflect)选择点 start = 10和end = 14 (选择不是由用户输入构建的)。

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

附注我调查过How to wrap with HTML tags a cross-boundary DOM selection range? 。提供的答案使用 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);

要在跨度内仅包含单词“brown”，您可以使用范围的 surroundContents()方法:

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

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

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

self 推销部分

对于更复杂的情况，你可以使用我的 Rangy图书馆及其CSS class applier module ，它包围 <span> 中的任意选择或范围具有特定 CSS 类。