使用javascript在div中按字符偏移向div插入多个跨距

对于文本注释应用程序，我希望使用以前的用户注释以编程方式为给定div中的文本设置颜色范围，这些注释以字符偏移量的形式保存在数据库中，例如-颜色字符0到6，颜色从9到12，等等

我的方法是获取div中的第一个#text节点（使用来自的答案），在那里创建一个范围，然后在那里插入span。但是，在插入第一个跨距后，不再有包含div中所有文本的文本元素，这将失败：

function color_x_y(elementname, x, y){ // color from coordinate x to y, within div elementname

    elem = get_text_node(elementname);

    range = document.createRange();
    range.setStart(elem, x);
    range.setEnd(elem, y);

    span = document.createElement("span");
    span.style.border = "5px solid red";

    range.expand();
    span.appendChild(range.extractContents()); 
    range.insertNode(span);
}

function get_text_node(node){
    var oDiv = document.getElementById(node);
    var firstText = "";
    for (var i = 0; i < oDiv.childNodes.length; i++) {
        var curNode = oDiv.childNodes[i];
        if (curNode.nodeName === "#text") {
            firstText = curNode;
            break;
        }
    }
    return firstText;
}

函数color\ux\uy（elementname，x，y）{//color从坐标x到y，在div elementname中
elem=获取文本节点（elementname）；
range=document.createRange（）；
范围。设置开始（elem，x）；
范围。设置结束（元素，y）；
span=document.createElement（“span”）；
span.style.border=“5px实心红色”；
range.expand（）；
appendChild（range.extractContents（））；
range.insertNode（span）；
}
函数获取文本节点（节点）{
var oDiv=document.getElementById（节点）；
var firstText=“”；
对于（var i=0；i

我是javascript新手，如果您有任何关于如何实现这一点的想法，我将不胜感激

谢谢

编辑

---

我应该注意，高光可能相互重叠。

我设置了注释span class name

annotate

，这样脚本就可以摆脱内联样式

我修改了

getTextNode（）

循环顺序。因为对于2+注释，第一个文本节点将是您的第一个注释。因此，我从末尾开始循环childNode

最后，插入的注释越多，子节点越多，从中提取的内容也越多。因此，您的“目标”文本节点将变短（例如，将颜色从4变为7，7将成为新的0）。为了补偿内容的丢失，坐标需要偏移

p、 请将您的功能命名为camelCase

函数colorRange（elementname，x，y）{//color从坐标x到y，在div elementname中
elem=getTextNode（elementname）；
range=document.createRange（）；
//补偿较短的文本长度
var offset=document.getElementById（elementname）.innerText.length-elem.length；
范围。设置开始（元素，x-偏移）；
范围设置结束（元素，y-偏移）；
span=document.createElement（“span”）；
span.className=“注释”；
range.expand（）；
appendChild（range.extractContents（））；
range.insertNode（span）；
}
函数getTextNode（节点）{
var oDiv=document.getElementById（节点）；
var lastText=“”；
//自始至终循环
对于（var i=oDiv.childNodes.length-1；i>=0；i--）{
var curNode=oDiv.childNodes[i]；
if（curNode.nodeName==“#文本”）{
lastText=curNode；
打破
}
}
返回最新文本；
}
颜色范围（'lorem'，0,5）；//注释“Loerm”
颜色范围（'lorem'，12，17）；//注释“多洛”
颜色范围（'lorem'，116，124）；//注释“pulvinar”

。注释{
边框：5px纯红；
}

---

Lorem ipsum door sit amet，继续成为一名精英。马萨是康格·马萨的前锋。Fusce posuere，magna sed pulvinar ultricies，purus lectus malesuada libero，sit amet commodo magna eros quis urna.

我设置了注释跨度类名

annotate

，这样脚本就可以摆脱内联样式

我修改了

getTextNode（）

循环顺序。因为对于2+注释，第一个文本节点将是您的第一个注释。因此，我从末尾开始循环childNode

最后，插入的注释越多，子节点越多，从中提取的内容也越多。因此，您的“目标”文本节点将变短（例如，将颜色从4变为7，7将成为新的0）。为了补偿内容的丢失，坐标需要偏移

p、 请将您的功能命名为camelCase

函数colorRange（elementname，x，y）{//color从坐标x到y，在div elementname中
elem=getTextNode（elementname）；
range=document.createRange（）；
//补偿较短的文本长度
var offset=document.getElementById（elementname）.innerText.length-elem.length；
范围。设置开始（元素，x-偏移）；
范围设置结束（元素，y-偏移）；
span=document.createElement（“span”）；
span.className=“注释”；
range.expand（）；
appendChild（range.extractContents（））；
range.insertNode（span）；
}
函数getTextNode（节点）{
var oDiv=document.getElementById（节点）；
var lastText=“”；
//自始至终循环
对于（var i=oDiv.childNodes.length-1；i>=0；i--）{
var curNode=oDiv.childNodes[i]；
if（curNode.nodeName==“#文本”）{
lastText=curNode；
打破
}
}
返回最新文本；
}
颜色范围（'lorem'，0,5）；//注释“Loerm”
颜色范围（'lorem'，12，17）；//注释“多洛”
颜色范围（'lorem'，116，124）；//注释“pulvinar”

。注释{
边框：5px纯红；
}

---

Lorem ipsum door sit amet，继续成为一名精英。马萨是康格·马萨的前锋。Fusce posuere，magna-sed pulvinar ultricies，purus lectus malesuada libero，sit amet commodo magna eros quis urna.

考虑到高亮显示的重叠和高亮显示的范围不是以数字顺序出现，我们需要在每次调用colorXY函数时一点一点地构建元素innerHTML，考虑到任何现有的突出显示

通过将高亮显示和未高亮显示的段放入span元素中，我们可以很容易地做到这一点，因此JavaScript将为我们解析与元素关联的HTML

这里有一个代码片段，它在一个“普通”文本上实现了这一点，即不包含其他HTML元素的文本。我想在真实的情况下你