Question

我试图突出显示页面上任何位置出现的单词数组，无论其父元素如何。

我已经适应了以下question's solution，如果我知道选择器可以使用该功能，那么它会很好用。但是，这些单词可能会出现在ANY选择器中，因此我尝试使用通配符选择器，但它不起作用。

(function($) {
var keywords = ['Breathalyzer', 'Marijuana', 'Alcohol'];

function highlightWords(element) {
    full_text = element.html();
    $.each(keywords, function(i) {
        full_text = full_text.replace(RegExp(keywords[i], "gi"), "<span class='highlighttext'>"+keywords[i]+"</span>");
    });
    element.html(full_text);
  }
highlightWords($("*"));

})(jQuery);

我正在使用不区分大小写的正则表达式，以便无论大小写均匹配搜索词。而且我期望该函数将所有匹配的术语包装在<span class="highlighttext"></span>中，但是它不起作用...

编辑：我想我应该补充一点，就是控制台中没有任何错误

Answer 1

答案：

要使其按预期工作，需要进行一些更改：

$("*")返回一个集合。它是元素的数组，而不是单个元素。因此，将数组传递给需要单个元素的函数将不起作用。

解决方案：

我们可以使用JQuery的.each函数遍历集合中的每个项目，然后然后调用您的高亮函数来解决上述问题。

我们必须将您的highlightWords函数调整为在each方法的接收端。

解决方案：

我们更改参数以匹配传递的内容 in。这就是为什么我们使用element而不是index, element的原因。

.html是一种JQuery方法。我们需要确保我们收到的{strong>变量element包含这种方法，否则我们将无法使用它。

解决方案：

由于element不是JQuery对象，因此通过将element变量作为选择器传入，将元素包装在JQuery对象中。 element = $(element);

工作代码：

(function($) {
var keywords = ['Breathalyzer', 'Marijuana', 'Alcohol'];

function highlightWords(index, element) {
    element = $(element);
    full_text = element.html();
    $.each(keywords, function(i) {
        full_text = full_text.replace(RegExp(keywords[i], "gi"), "<span class='highlighttext'>"+keywords[i]+"</span>");
    });
    element.html(full_text);
  }
$("*").each(highlightWords);

})(jQuery);

.highlighttext {
 color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>Hello Alcohol</p>
<p>This is a test of <code>marijuana</code></p>
<small>Maybe we should get a Breathalyzer?</small>
<h3>No, no, we should get more Alcohol.</h3>
</div>

替换页面

1 个答案:

答案：

工作代码：