Javascript 在特定偏移处将范围一分为二

好的，在过去的几个小时里我一直在想这个问题，希望这里有人对朗吉图书馆有更多的经验。假设我有以下html：

<p>Lorem Ipsum<note>that's latin</note> is a placeholder text</p>
<p>It is often used in graphic design<note>some other note</note></p>

拉丁语是占位符文本

它通常用于图形设计中的其他注释

我们有一个选择，如{和}字符所示：

<p>Lorem {Ipsum<note>that's latin</note> is a placeholder text</p>
<p>It is often used in graphic design<note>some other note</note>.}</p>

拉丁语是占位符文本

它通常用于图形设计或其他注释。}

如何将范围拆分为3个范围对象，如下所示：

Ipsum

是占位符文本
它通常用于平面设计

---

目标是排除一组元素，在本例中为

['note']

。我不需要一个全功能的解决方案，我所要寻找的是一种方法，可以在范围内的某个点“拆分”一个范围

这实际上并不特定于范围，因为您只需要使用标准范围方法。这里有一个简单的函数，可以在常规DOM范围或Rangy范围内工作。它以类似于文本节点的方式将一个范围一分为二：原始范围的结束边界移动到分割点，函数返回一个新范围，从分割点开始，到原始范围的原始结束边界结束

function splitRange(range, node, offset) {
    var newRange = range.cloneRange();
    newRange.setStart(node, offset);
    range.setEnd(node, offset);
    return newRange;
}

如果愿意，可以将此方法添加到所有范围：

rangy.rangePrototype.splitRange = function(node, offset) {
    var newRange = this.cloneRange();
    newRange.setStart(node, offset);
    this.setEnd(node, offset);
    return newRange;
};

然后，您可以按如下方式拆分示例选择：

// Get the <p> elements in the example HTML
var allPs = document.getElementsByTagName("p");

var range1 = rangy.getSelection().getRangeAt(0);

// Split after the first child of the first <p>
var range2 = range1.splitRange(allPs[0], 1); 

// Split after the first child of the second <p>
var range3 = range2.splitRange(allPs[1], 1);

//获取示例HTML中的元素
var allPs=document.getElementsByTagName（“p”）；
var range1=rangy.getSelection（）.getRangeAt（0）；
//在第一个孩子的第一个孩子之后分裂
var range2=range1.splitRange（allPs[0]，1）；
//在第二个孩子的第一个孩子之后分裂
var range3=range2.splitRange（allPs[1]，1）；

---

range1

、

range2

和

range3

现在可以满足您的需要。

感谢您提供的精彩库！！！是的，我在半个小时前刚刚完成了我自己的解决方案，我最终在DOM上循环，从头开始创建新的范围，最终效果很好，只是来这里发布相关部分作为答案，但似乎你比我快：）。无论如何，我想抱怨的一个小细节是，为什么highlighter函数不接受范围。。。这似乎是合理的，因为类应用程序支持范围。但是哦，好吧，细节。@DavidMulder：有一个

highlightRanges（）

方法。感觉就像躲在一个黑暗的角落里。。。我确信我在文件中滚动了3到4次寻找那个函数，但没有看到一个。。。我的糟糕，我的糟糕，难以置信的工作又一次@戴维德·穆德：我还没来得及把它记录下来，这不是你的错：）