How to highlight all links containing keywords from array using JavaScript

Question

I'm searching a web page for keywords from an array. This code works by replacing text with a tag which highlights the text, but when it finds keywords that are links then it breaks them because it puts a tag within the tag.

I tried to refer to the parent element by changing $this.html() to $this.parent.html() but this didn't work. Here's the JSFiddle: https://jsfiddle.net/uzfsjqyr/1/

I'd appreciate some help, please?

var regex = /(Apples|oranges)/g;
$('*').each(function() {
    var $this = $(this);
    var text = $this.text();
    if (regex.test(text)) {
        $this.html(
            $this.html().replace(regex, '$1')
        );
    }
});

user_4273925 · Answer

Remove from your code. This is closing any anchor tag.

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

$('*').each(function() {
    var $this = $(this);
    var text = $this.text();
    if (regex.test(text)) {
        $this.html(
            $this.html().replace(regex, '$1')
        );
    }
});

user_9513184 · Answer

You should be selecting all p and a tags in the body instead of using * which will even select the script tag itself. Also, remove the that is closing any anchor tag. To not modify the HTML of anchor tags, you can check that the current element has no children before replacing.

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, '$1')
        );
    }
});



I bought some apples.



I bought some oranges.



I bought some pears.

How to highlight all links containing keywords from array using JavaScript

2 Answers