JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>Test Page</title>
    </head>
    <body>
        <p>some sample test<a href="test.html" title="a test title">Test</a>test scenarios test2 notest3.</p>
        <script>
            var test = true;
        </script>
    </body>
</html>

CSS

/**
 * Goal:  To create a regular expression that will wrap a given
 *        list of words with a certain starting and ending tag,
 *        Ignoring the values in html attributes and script tags.
 *
 * Current Problems:
 *         1) The word 'test' in the link title attribute
 *         2) The variable 'test' in the script tag.
 */

JavaScript

var body = document.body.innerHTML
    word_list = ['test', 'test2'];

function replaceWords(words, text) {
  var re = '(^|>| |<a[^>]*>)('+ words.join('|') +')( |<|$)',
      regExp = new RegExp(re, 'ig'),
      sTag = "<span>",
      eTag = "</span>";
    
  return text.replace(regExp, '$1'+ sTag +'$2'+ eTag +'$3');
}

alert(replaceWords(word_list, body));