Javascript HTML元素的选择范围

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

例如，string

quick brown fox跳过了懒狗

，我获取了反映选择点

start=10

和

end=14

（选择不是由用户输入构建的）的部分

brown

现在，如何将字符串的这部分转换为

brown

我已经调查过了。提供的答案使用了execCommand，但这不能满足我的要求，因为我需要尽可能透明

我也在使用

Range

API进行选择，但与本例一样，“选择”只是存储

start/end

位置的指针，没有实际进行选择

我有一个想法，我可以使用指针在背景中创建一个选择，用

包装，这对用户来说是不可见的，但是再次。。。我不知道该怎么做

---

提前谢谢

假设

敏捷的棕色狐狸跳过懒狗

被包裹在某个元素中，比如DIV，例如：

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

<div id="test">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;

var ele=document.getElementById（'mytext'）；
var myText=ele.innerHTML；
var启动=10；
var-end=14；
var newText=myText.substring（0，开始）+''+myText.substring（开始，结束）+''+myText.substring（结束）；
ele.innerHTML=newText；

---

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

JavaScript字符串方法

在这种情况下，您可以使用

范围

的方法来实现这一点。我假设您的文本都包含在单个文本节点中。例如：

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

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

要在一个范围内仅围绕单词“brown”，可以使用该范围的

surroundContents（）

方法：

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

但是，在选择跨越节点边界的某些更复杂的情况下，这将不起作用。此外，IE<9不支持

范围

，因此您需要为这些浏览器提供完全不同的解决方案

现场演示：

自我推销部分

---

对于更复杂的情况，您可以使用my library和its，它将

中的任意选择或范围与特定的CSS类结合起来

已经发现并使用了

surroundContents

，只是还不能提供我自己的答案。谢谢，接受。