比较2个句子并获得不同单词的索引

Question

我有contenteditable div

<div id="editableDiv" contenteditable="true">
    hey @twitter is #
</div>

只要用户输入#，我就会将其html内容收集为$('#editableDiv').html()
收集的html内容（1）：<b>hey</b> <span style="color:blue">@twitter</span> #

当用户键入下一个直接空格时，我将再次收集其html内容 收集的html内容（2）：<b>hey</b> <span style="color:blue">@twitter</span> #awesome

现在，想要计算（1）和（2）之间的差异并获得不同单词的索引。 因此，awesome是（1）和（2）中唯一不同的单词，因此其起始索引必须为53，结束索引必须为60.

我怎样才能完成这项工作。

修改

以下是用户输入#或space bar

时调用的函数

getCaretPosition : function(){
            var element = this.$el[0];
            var caretOffset = 0;
           if (typeof window.getSelection != "undefined") {
                var range = window.getSelection().getRangeAt(0);
                var preCaretRange = range.cloneRange();
                preCaretRange.selectNodeContents(element);
                preCaretRange.setEnd(range.endContainer, range.endOffset);
                caretOffset = preCaretRange.toString().length;
            } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
                var textRange = document.selection.createRange();
                var preCaretTextRange = document.body.createTextRange();
                preCaretTextRange.moveToElementText(element);
                preCaretTextRange.setEndPoint("EndToEnd", textRange);
                caretOffset = preCaretTextRange.text.length;
            }
            return caretOffset;
        }

Answer 1

一个非常基本的解决方案：

$('#editableDiv').on('keyup', function (event) {

    var innerHTML = $(this).html();
        matches = {},
        startIndex = 0;

    if (event.which === 32) {
        innerHTML.match(/#[^ ]+/g).forEach(function (match) {
            startIndex = innerHTML.indexOf(match, startIndex);
            matches[match] = startIndex;
        });
        console.log(matches);
    }
});

http://jsfiddle.net/4PLJa/5/

Answer 2

Live demo

var before = "",
    after = "",
    diffIndex;
$('#editableDiv').on({
    focus: function () {
        before = $(this).text();
    },
    blur: function () {
        after = $(this).text().substring(before.length, $(this).text().length);
        diffIndex = before.length;
        console.log(before);
        console.log(after);
        console.log(diffIndex);
        return false;
    }
});