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

Dynamically update selected text in particular HTML element

本文关键字：文本 HTML 更新 动态 元素      更新时间：2024-05-26

我正在尝试动态更新特定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事件仅在特定的element上被截获。如果我单击页面上的其他任何位置，元素中的文本也会被取消选择，当然，但事件永远不会触发。

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

我认为您必须在整个文档中侦听事件。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)
    }
});
相关文章：