在特定偏移量处将距离范围分成两个

Split rangy range into two at specific offset

本文关键字：两个 范围 偏移量 距离      更新时间：2023-09-26

好吧，在过去的几个小时里，我一直在为这个问题伤脑筋，希望这里有人对rangy库有更多的经验。假设我有以下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个范围对象呢?

  1. Ipsum
  2. is a placeholder text</p><p>It is often used in graphic design
  3. .

目标是排除一组元素，在本例中是['note']。我不需要一个功能齐全的解决方案，所有我正在寻找的是一种方法来"分裂"一个范围在范围的某一点。

这并不是真正特定于Range的，因为您将只使用标准的Range方法。下面是一个简单的函数，它将处理常规DOM范围或Rangy范围。它以类似于文本节点的splitText()方法的方式将范围一分为二:将原始范围的结束边界移动到分割点，该函数返回一个从分割点开始并以原始范围的原始结束边界结束的新范围。

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

如果你愿意，你可以把这个方法添加到所有的Rangy范围中:

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);

range1, range2和range3现在按您的要求。

相关文章：