在特定的偏移量處分成兩個範圍

Question

好的，在過去的幾個小時裏，我一直在這一塊上打破了我的頭，並希望有人在這裏有更多的經驗與rathy圖書館。比方說，我有以下的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']。我不需要功能齊全的解決方案，我正在尋找的所有方法都是在範圍範圍內的某個點「分裂」一個範圍。

Answer 1

這對Rangy來說並不是特定的，因爲您只需使用標準的Range方法。這是一個簡單的功能，可以在常規DOM範圍或Rangy範圍內工作。它以與文本節點的splitText()方法類似的方式將範圍分成兩部分：將原始範圍的結束邊界移動到分割點，並且該函數返回一個新的範圍，從分割點開始並結束於原始範圍的原始結束邊界。

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

range1，range2和range3現在按你的要求。