Regex replace text outside html tag

Question

I'm working on an autocomplete component that highlights all ocurrences of searched text. What I do is explode the input text by words, and wrap every ocurrence of those words into a

My code looks like this

inputText = 'marriott st';
text = "Marriott east side";
textSearch = inputText.split(' ');
for (var i in textSearch) {
  var regexSearch = new RegExp('(?!<\/?strong>)' + textSearch[i]), "i");
  var textReplaced = regexSearch.exec(text);
  text = text.replace(regexSearch, '< strong>' + textReplaced + '< /strong>');
}

For example, given the result: "marriott east side"

And the input text: "marriott st"

I should get

  <strong>marriot< /strong > ea < strong >st < /strong > side

And i'm getting

  <<strong>st</strong>rong>marriot</<strong>st </strong>rong>ea<<strong>st</strong> rong>s</strong> side

Any ideas how can I improve my regex, in order to avoid ocurrences inside the html tags? Thanks

   /(?!<\/?strong>)st/

Answer 1

I would process the string in one pass. You can create one regular expression out of the search string:

var search_pattern = '(' + inputText.replace(/\s+/g, '|') + ')';
// `search_pattern` is now `(marriot|st)`
text = text.replace(RegExp(search_pattern, 'gi'), '<strong>$1</strong>');

DEMO

You could even split the search string first, sort the words by length and combine them, to give a higher precedence to longer matches.

You definitely should escape special regex characters inside the string: How to escape regular expression special characters using javascript?.

Answer 2

Before each search, I suggest getting (or saving) the original search string to work on each time. For example, in your current case that means you could replace all '<strong>' and '</strong>' tags with ''. This will help keep your regEx simple, especially if you decide to add other html tags and formatting in the future.