Question

我试图在product-single__description标记中包含<b>中找到的字词，但到目前为止没有任何内容突出显示。

这些是标签

<ul class="product-tags">
<li><a>one</a></li>
<li><a>two</a></li>
<li><a>three</a></li>
<li><a>four</a></li>
</ul>

我想突出显示p

中b元素中的所有标记

<div class="product-single__description">
<p>Sentence number one</p>
<p>Sentence number two</p>
<p>Sentence number three</p>
<p>Sentence number four</p>
</div>

在javascript运行后它应该是这样的

<div class="product-single__description">
<p>Sentence number <b>one</b></p>
<p>Sentence number <b>two</b></p>
<p>Sentence number <b>three</b></p>
<p>Sentence number <b>four</b></p>
</div>

这是jQuery。

$("ul.product-tags li").each(function() {
     var tag = $(this).children("a").text();


   $('.product-single__description').children("p").each(function() {
     var str = $(this).text();
     var reg = new RegExp(tag, 'gi');
     var txt = textDiv.replace(reg, function(str) {
       return "<b>" + str + "</b>"
     });
    $(this).text(txt);

   });
});

这是JSFiddle https://jsfiddle.net/L4hnenss/2/我仍然无法让它发挥作用。我该如何解决？

Answer 1

一些问题......您正在使用文本函数在jquery中分配html。另外，您正在使用一个名为textDiv的变量，似乎没有定义，因此我将其更改为txt。

这是给出的代码的功能版本：

$("ul.product-tags li").each(function() {
     var tag = $(this).children("a").html();


   $('.product-single__description').children("p").each(function() {
     var str = $(this).html();
     var reg = new RegExp(tag, 'gi');
     var txt = str.replace(reg, function(str) {
       return "<b>" + str + "</b>"
     });
    $(this).html(txt);

   });
});

在字符串中查找单词并将其包装起来不起作用 - jQuery

1 个答案: