Javascript 获取与父元素相比的范围

Question

我有一个函数返回一个包含两个元素的数组(在 IE 中不起作用)

• 用户在 div (id=text) 中选择内容的 html 代码
• 选择范围

如果用户在文本 div 中选择一个简单的字符串，范围将返回正确的值，但是当用户在 div 的子元素(例如 div#text->p)中选择一个字符串时，范围的值与子元素，但我希望它们与父元素相关(div#text)

这里有一个 JsFiddle http://jsfiddle.net/paglia_s/XKjr5/ :如果您在茶区中选择一串普通文本或普通文本+粗体文本，您将得到正确的选择，而如果您选择粗体单词(“am”)，您将得到错误的选择，因为范围与子元素。

有办法让范围始终与 div#text 相关吗？

Answer 1

你可以使用我的Rangy图书馆及其新的TextRange module ，它提供了 Range 和 Selection 方法，用于在容器元素的可见文本内进行字符偏移量的转换。例如:

var container = document.getElementById("text");
var sel = rangy.getSelection();
if (sel.rangeCount > 0) {
    var range = sel.getRangeAt(0);
    var rangeOffsets = range.toCharacterRange(container);
}

rangeOffsets 具有相对于 container 内可见文本的属性 start 和 end。可见文本不一定与 jQuery 的 text() 方法返回的内容相同，因此您需要使用 Rangy 的 innerText() 实现。示例:

http://jsfiddle.net/timdown/KGMnq/5/

或者，如果您不想使用 Rangy，您可以改编我的函数 posted on Stack Overflow before 。但是，这些依赖于 DOM Range 和 Selection API，因此无法在 IE < 9 上运行。