javascript - 用鼠标选择文本并突出显示该 div 中多次出现的相同文本

Question

我正在尝试编写一个程序，当我在一个 div 中选择一个文本时，我想突出显示该 div 中所有出现的选定文本，我到目前为止所做的一切

Highlights the selected text anywhere in that div

但这只适用于静态的，即硬编码的单词，如演示中所示 像这样

 var text = $('div').text().replace(/Ipsum/g,"<span class='red'>Ipsum</span>");

这里 Ipsum 是硬编码的，它工作正常。我想做的是用动态选择的文本替换 ipsum，但失败了。我已经添加了我到目前为止所达到的演示，下面给出了代码 Demo getting selected text dynamically on mouseup

HTML

<div id="div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>

<input type="button" value="Click to remove highlight" id="id2" />

查询

$("div").mouseup(function(){
  $(this).after("Mouse button released.");
              var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    } var textspan ="<span class='red'>"+text+'</span>';
        var text1 = $('div').text().replace('/'+text+'/g',textspan);
        alert(text);
          alert(textspan);
            alert(text1);
$('div').html(text1);
});





$('#id2').click(
  function(){
      $( "span.red" ).each(function() {
  $( this ).contents().unwrap();

});

    }
);

CSS

.red {
color: red;
}

Answer 1

DEMO

我正在使用此函数获取选定的文本值

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

然后我使用这个脚本来突出显示文本

function thisRespondHightlightText(thisDiv){
    $(thisDiv).on("mouseup", function () {
        var selectedText = getSelectionText();
        var selectedTextRegExp = new RegExp(selectedText,"g");
        var text = $(this).text().replace(selectedTextRegExp, "<span class='red'>" + selectedText + "</span>");
        $(this).html(text);
    });
}

因为这是一个函数，您可以将它用于任何您想要响应突出显示的div。

thisRespondHightlightText(".select--highlight--active");

HTML:

<div class="select--highlight--active">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>