通过Javascript计算HTML中的开始和结束选择索引

Question

如何在 contentEditable 'div' 中获取除 IE 以外的浏览器中的开始和结束选择索引。例如，IE有以下方法。

var oSelection;
var oTxtRange;
var units = -100000;
var iStartIndex = -1, iEndIndex = -1;

if(document.selection)      // IE..
{
  oSelection = document.selection;
  oTxtRange = oSelection.createRange();

  if(oTxtRange)
  {
    iStartIndex = oTxtRange.moveStart('character',units);
    iEndIndex = oTxtRange.moveEnd('character',units);
    iStartIndex *= -1;
    iEndIndex *= -1;
  }
}

我了解上述方法不是 W3C 标准。我已经阅读了有关 Selection 和 Range 对象的 W3C 文档，但仍然无法帮助找到 Chrome 和 FireFox 的解决方案。也欢迎使用 JQuery 解决方案。

在此先感谢 :-)

Answer 1

您可以在非 IE 浏览器中执行以下操作。它返回页面可见正文中选择边界的偏移量，就像 IE 版本一样，但我不确定这些数字的用途。

function getBodyTextOffset(node, offset) {
    var sel = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(document.body);
    range.setEnd(node, offset);
    sel.removeAllRanges();
    sel.addRange(range);
    return sel.toString().length;
}

function getSelectionOffsets() {
    var sel, range;
    var start = 0, end = 0;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(sel.rangeCount - 1);
            start = getBodyTextOffset(range.startContainer, range.startOffset);
            end = getBodyTextOffset(range.endContainer, range.endOffset);
            sel.removeAllRanges();
            sel.addRange(range);
            alert(start + ", " + end);
        }
    } else if (document.selection) {
        // IE stuff here
    }
    return {
        start: start,
        end: end
    };
}