javascript - 如何突出显示替换文本的所有实例

Question

我试图突出显示 div 中与文本字符串匹配的所有实例。这是 div:

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

我希望字符串“Lorem ipsum”突出显示两次，所以我使用以下代码:

let textCurrent = $("div").html().trim();
let text = "Lorem ipsum";
let newText = "Lorem ipsum";

textCurrent = textCurrent.replace(text, "<span class='highlight'>"+newText+"</span>");
$("div").html(textCurrent);

它突出显示了“Lorem ipsum”的第一个实例，但问题是它只突出显示了“Lorem ipsum”的第一个实例，而不是两个实例。当我用实际字符串替换变量 text 和 newText 时，如下所示:

textCurrent = textCurrent.replace(/'Lorem ipsum'/g, "<span class='highlight'>Lorem ipsum</span>");
$("div").html(textCurrent);

它有效。但是，如何在使用 text 和 newText 等变量时突出显示所有实例？

https://jsfiddle.net/crduling/zmyxtd79/7/

`

Answer 1

你可能会喜欢:-

$(function(){
  
let textCurrent = $("div").html().trim();
let text = "Lorem ipsum";
let newText = "Lorem ipsum";
let replaceText = "<span class='highlight'>"+newText+"</span>";
  
textCurrent = textCurrent.replace(new RegExp(text, 'g'), replaceText);

$("div").html(textCurrent);
  
});

.highlight {
  background:yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>