Getting whole words with Regexp in Jquery

Question

$.fn.wrapInTag = function(opts) {

    var tag = opts.tag || 'strong',
        words = opts.words || [],
        regex = RegExp(words.join('|'), 'gi'),
        replacement = '<' + tag + '>$&</' + tag + '>';

    return this.html(function() {
        return $(this).text().replace(regex, replacement);
    });
};

$('p').wrapInTag({
    tag: 'em',
    words: ['html', 'CSS', 'JavaScript'],
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p>O HTML d é muito usado nos dias de hoje, juntamente com o HTML usamos JavaScript e CSS...</p>

I’m having problems with Regexp in Jquery, I have a list of words that it takes from <p> and puts inside the <em>. It works almost right, however it does not respect whole words, if I look for HTML it returns HTML1, HTMLX, HTMLZ and not only HTML, if the HTML is along with other words it identifies the word also in the middle of others, it does not respect an entire word.

What I seek is that:

• "HTML" stay: HTML
• "Htmlabc" remain intact, not italicized, only: Htmlabc;

My example code: http://jsbin.com/zopilefevu/edit?html,js,output

Do the test by adding any letter in front of or behind the words html, CSS, and Javascript you can see that it continues to consider the words even though it has other characters together at the beginning or end of the word.

Answer 1

You can add a denial rule to every word. It would look like this:

regex = RegExp('(\\W|^)(' + words.join('|') + ')(\\W|$)', 'gi'),

and that way you’d get a regex like this:

/(\W|^)(html|CSS|JavaScript)(\W|$)/gi

and then an important step:

replacement = '$1<' + tag + '>$2</' + tag + '>$3';

that makes it index what was captured within each of the capture groups () and, respectively, put it in the right place of the new string that will be formed.

Thus, in practice prevents a match if there is a letter or number before or after of the word you indicated.

jsFiddle: https://jsfiddle.net/m4dekxq4/

regex: https://regex101.com/r/lEP8DX/2