javascript - 比较2个句子并获取不同单词的索引

Question

我有一个contenteditable分区

<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/