使用鼠标选择文本并在该div中突出显示多个出现的相同文本 [英] Selecting text with mouse and highlighting the same text with multiple occurences in that div

问题描述

我正在尝试编写一个程序，当我在鼠标中选择div内的文本时，我想突出显示该div中所选文本的所有出现，直到现在我已经完成了

I am trying to code a program in which when i select a text inside a div on mouse up i want to highlight all the occurrence of the selected text in that div what i have done till now

在该div的任何地方突出显示所选文字

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

But this works with only static i.e hardcoded words as shown in the demo like this

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

这里的Ipsum很硬，而且工作正常。我想做的是用动态选择替换ipsum失败的文字。我已经添加了我到目前为止的演示，代码是在
以下给出 演示在鼠标上动态选择文本

here Ipsum is hardcorded and it works fine .What i am trying to do is replace ipsum with dynamically selected text which fails.I have added the demo with what i have reached till now and the code is give below Demo getting selected text dynamically on mouseup

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

Jquery

Jquery

$("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

Css

.red {
color: red;
}

推荐答案

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;
}

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

Then i am using using this script to highlight the 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你想要回复突出显示。

Since this is a function you can use it for any div you want to respond to highlighting.

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>

这篇关于使用鼠标选择文本并在该div中突出显示多个出现的相同文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！