我怎样才能在一个可疑的div中得到插入符号？

Question

当我点击鼠标时,我试图从该位置的内容可编辑div中提取单个单词.例如:

Lorem ipsum dolor sit amet, cons|ectetur adipiscing elit. Cras vestibulum gravida
tincidunt. Proin justo dolor, iaculis vulputate eleifend et, facilisis eu erat.*

使用| 代表插入符号,函数应返回" consectetur ".

我的尝试:

window.onload = function () {
        document.getElementById("text-editor").onclick = function () {
            var caretPos = 0, containerEl = null, sel, range;
            if (window.getSelection) {
                sel = window.getSelection();
                if (sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    if (range.commonAncestorContainer.parentNode == this) {
                        caretPos = range.endOffset;
                    }
                }
            } else if (document.selection && document.selection.createRange) {
                range = document.selection.createRange();
                if (range.parentElement() == this) {
                    var tempEl = document.createElement("span");
                    this.insertBefore(tempEl, this.firstChild);
                    var tempRange = range.duplicate();
                    tempRange.moveToElementText(tempEl);
                    tempRange.setEndPoint("EndToEnd", range);
                    caretPos = tempRange.text.length;
                }
            }
            var prevSpace, nextSpace, text = this.innerText;

            prevSpace = text.substring(0,caretPos).lastIndexOf(" ");
            nextSpace = text.indexOf(" ", caretPos + 1);
            nextSpace == -1 ? nextSpace = text.length - 1 : false;
            prevSpace++;
            console.log([prevSpace,caretPos,nextSpace].join("|"));
            var word = text.substring(prevSpace, nextSpace);
            //Removes punctuation and whitespace.
            var patt = new RegExp("([A-Za-z0-9']*)","g");
            word = patt.exec(word)[0];
            document.getElementById("current-word").innerHTML = word;
        };
    };

函数绑定到contenteditable div的鼠标单击事件,该事件计算插入位置,然后查找前后空格字符的索引(或字符串的开头或结尾)并使用子字符串来确定单词.有一个快速正则表达式匹配删除标点符号和空格,我们最终得到正确的单词.

这个工作正常,当在contenteditable div中有一个文本节点时,但是一旦我开始删除和其他各种标签,计算插入位置的方法部分停止工作,总是将其计算为0.是否存在一种计算HTML中插入位置的方法,就像它对文本一样？

如果没有,有人可以提出替代方法吗？

Answer 1

你可以使用我的Rangy库的新TextRange模块,虽然这对于那个功能来说是极大的过度杀伤力.这是您需要的代码:

var sel = rangy.getSelection();
sel.expand("word");
var word = sel.text();
alert(word);

否则,如果你不支持预Blink Opera(包括版本12)和Firefox <4,你可以使用Selection.modify()(WebKit,Firefox)和(IE)的expand()方法TextRange.这是一个例子.

演示:http://jsfiddle.net/timdown/dBgHn/1/

码:

function getWord() {
    var sel, word = "";
    if (window.getSelection && (sel = window.getSelection()).modify) {
        var selectedRange = sel.getRangeAt(0);
        sel.collapseToStart();
        sel.modify("move", "backward", "word");
        sel.modify("extend", "forward", "word");

        word = sel.toString();

        // Restore selection
        sel.removeAllRanges();
        sel.addRange(selectedRange);
    } else if ( (sel = document.selection) && sel.type != "Control") {
        var range = sel.createRange();
        range.collapse(true);
        range.expand("word");
        word = range.text;
    }
    alert(word);
}