Question

好的，在过去的几个小时里，我一直在打破这个问题，并希望有人在这里有更多经验丰富的图书馆。假设我有以下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
is a placeholder text</p><p>It is often used in graphic design
.

目标是排除一组元素，在这种情况下为['note']。我不需要一个功能齐全的解决方案，我正在寻找的是一种在范围内的某个点“分割”一个范围的方法。

Answer 1

由于您只使用标准的Range方法，因此这并不是Rangy特有的。这是一个简单的函数，可用于常规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。

在特定的偏移量下将rangy范围分成两个

1 个答案: