javascript - 动态更新特定 HTML 元素中的选定文本

Question

我正在尝试动态更新特定 HTML 元素中的文本选择。为此，链接函数包含

element.on('mouseup', function(event) {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }

(部分摘自 https://stackoverflow.com/a/5379408/353337 )。当在 element 中单击并选择文本时，此功能非常有效。

问题是 mouseup 事件仅在特定的元素上被拦截。当然，如果我单击页面上的其他任何位置，元素中的文本也会被取消选择，但该事件永远不会触发。

如何确保 text 始终包含元素中选定的文本？

Answer 1

我认为您必须收听该事件的整个文档。 JSFiddle

为了检查标记的单词是否是单词的一部分(或相同)，我使用了indexOf函数，如果单词相等则返回0，如果是单词的一部分则返回1。所以我比较大于或等于0。

$(document).on('mouseup', function (e){
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }

    var elementText = $(".element").text();

    if(elementText.indexOf(text) >= 0) {
        alert(true);    
    }
    else {
        alert(false)
    }
});