Question

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

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

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

P.S。我调查了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);

要在范围内仅包围“褐色”一词，您可以使用范围的surroundContents()方法：

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

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

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

自我推广部分

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

Answer 2

假设The quick brown fox jumps over the lazy dog包含在某个元素中，例如DIV，例如：

<div id='myText'>The quick brown fox jumps over the lazy dog</div>

你可以这样写：

var ele = document.getElementById('mytext');
var myText = ele.innerHTML;
var start = 10;
var end = 14;
var newText = myText.substring(0, start) + '<span>' + myText.substring(start, end) + '</span>' + myText.substring(end);
ele.innerHTML = newText;

JavaScript提供了许多字符串操作方法。尝试谷歌搜索JavaScript String Methods。

选择范围到HTML元素

2 个答案: