javascript - 如何使用 JavaScript 突出显示包含数组中关键字的所有链接

Question

我正在网页中从数组中搜索关键字。该代码的工作原理是用突出显示文本的标签替换文本，但是当它找到链接的关键字时，它会破坏它们，因为它会放置 <span> <a> 内的标签标签。

我尝试通过将 $this.html() 更改为 $this.parent.html() 来引用父元素，但这不起作用。这是 JSFiddle:https://jsfiddle.net/uzfsjqyr/1/

我希望得到一些帮助，好吗？

var regex = /(Apples|oranges)/g;
$('*').each(function() {
    var $this = $(this);
    var text = $this.text();
    if (regex.test(text)) {
        $this.html(
            $this.html().replace(regex, '</a><span style="background: #fa7373;">$1</span>')
        );
    }
});

Answer 1

您应该选择全部p和a body 中的标签而不是使用*它甚至会选择 script标签本身。另外，删除 </a>这就是关闭任何 anchor 标记。为了不修改 anchor 标记的 HTML，您可以在替换之前检查当前元素是否没有子元素。

var regex = /(apples|oranges)/g;

$('body a, body p').each(function() {
    var $this = $(this);
    var text = $this.text();
    if (text.match(regex) && $this.children().length===0) {
        $this.html(
            $this.html().replace(regex, '<span style="background: #fa7373;">$1</span>')
        );
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
I bought some apples.
</p>

<p>
<a href="oranges.html">I bought some oranges.</a>
</p>

<p>
I bought some pears.
</p>