时间戳

首页 > 解决方案 > 如何突出显示替换文本的所有实例

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

问题描述

我正在尝试突出显示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/crdiling/zmyxtd79/7/

`

标签： javascriptjquery

解决方案

你可能会喜欢：-

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

推荐阅读