jquery - 获取字符串的值；在内容中找到这个字符串；感谢 jQuery 将新样式应用于此字符串

Question

答案看起来很简单，但我找不到解决方案。

我有一个 WordPress 网站。在我的右栏中，我打印了一些元数据。我想获取一些数据的文本值，然后在我的 .entry-content 中找到它，并将新样式应用到这个确切的字符串。我可以通过将新样式应用到 inside.entry-content 的整个内容来完成这项任务，但我不能将它应用到单个字符串(它在文本中有很多地方)。

下面是我的代码:

jQuery(document).ready(function($) {

var str = $('.rrname').text(); // I've got the value
$(".entry-content:contains('"+ str +"')").css( "text-decoration", 
"underline"); // all the content in the div .entry-content now underline

});

例如我有一个带有节目名称的字符串:

剧名:《良医》

在我的文章中，这个短语出现了很多次。我希望每次，The Good Doctor 在我整篇文章的 div .entry-content 中都带有下划线。

我试过这段代码也没有结果:

jQuery(document).ready(function($) {

var str = $('.rrname').text();
$(".entry-content:contains('"+ str +"')").each(function() {
    $(this).text().css( "text-decoration", "underline");
});


});

感谢您的协助!

Answer 1

//dummy pull of an element containing text to match against
var $div = $('div');
//dummy variable containing what to search for to replace
var underlineMe = 'The Good Doctor';
//replace all occurances of our search string with a wrapped version
var modifiedValue = $div.html().replace(new RegExp(underlineMe, 'g'), '<span class="underline">'+ underlineMe +'</span>');

//update the value in the DOM
$div.html(modifiedValue);

.underline {
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Blah Blah Blah, I am text that contains The Good Doctor, and I want it to be underlined.  Oh, and The Good Doctor might appear multiple times.
</div>