得到的Javascript范围相比父元素(Javascript get range compared

2019-10-16 19:50发布

我具有与两个元件返回一个数组(不会工作在IE)的函数的

  • 什么样的用户一个div内选择HTML代码(ID =文本)
  • 的选择范围

如果用户选择文本中的简单字符串div的范围内返回正确的值,但是当用户选择的div元素子内的字符串(DIV#文本 - >点为例)范围内的值与子元素,但我希望他们能够进行相关的父(DIV#文本)

这里有一个的jsfiddle http://jsfiddle.net/paglia_s/XKjr5/ :如果您选择在teatarea正常的文本或普通文本+加粗的文本字符串,而如果你选择的粗体字,你会得到正确的选择(”我“),你会得到,因为范围与子元素的错误之一。

有办法做到,这样的范围总是与DIV#文本?

Answer 1:

你可以使用我的四肢修长图书馆以及新的TextRange模块 ,它提供了范围和选择的方法,将和从字符偏移一个容器元素的可见文本中。 例如:

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

rangeOffsets具有性能startend相对于内可见文本container 。 可见文本不一定是一样什么jQuery的text()方法返回,所以你需要使用瘦长的innerText()的实现。 例:

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

另外,如果你不想用四肢修长,你能适应我的功能之前,堆栈溢出公布 。 但是,这些依靠DOM Range和Selection API,以便将无法在IE <9工作。



Answer 2:

如果你不想使用图书馆这里是一个方式,也为我工作。 该函数返回光标相对于所述给定节点的偏移量的textContent(未相对于子节点)。 注意:当前光标位置必须位于所述给定节点或以任何其子节点。 这不是跨浏览器兼容(特别不是IE),但我认为这是没有太多的工作,以解决这个问题,以及:

function getCursorPositionInTextOf(element) {
    var range = document.createRange(),
        curRange = window.getSelection().getRangeAt(0);
    range.setStart(element, 0);
    range.setEnd(curRange.startContainer, curRange.startOffset);
    //Measure the length of the text from the start of the given element to the start of the current range (position of the cursor)
    return document.createElement("div").appendChild(range.cloneContents()).textContent.length;
}


文章来源: Javascript get range compared to a parent element