Search a string but ignore tag [duplicate]

Answer 1

Try this regex:

var str = 'hey there. <a href="github.com">github.com/bvaughn</a>';
str = str.replace(/<.*>(.*)<\/.*>/g, "$1")
console.log(str);
str.match(/git/gi)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Honestly, I'm annoyed by the question and the answers. This topic has been discussed dozens of times here on SO.

First of, you should not use the answer from mike510a. The answer from JuniorNunes7 should only be used in case your content isn't in the DOM already. Here are the reasons:

• innerHTML will destroy events!
• innerHTML will trigger regeneration of the DOM!

In order to avoid this you'll need to modify text nodes itself. But, instead of reinverting the wheel here's a comparison of text highlighter plugins using jQuery. The only one that is using plain JavaScript is mark.js. Since you're using React, I'd recommend to use this.

Example in your situation:

new Mark(document.querySelector(".context")).mark("git");

<script src="https://cdn.jsdelivr.net/mark.js/8.4.0/mark.min.js"></script>
<div class="context">
  hey there. <a href="github.com">github.com/bvaughn</a>
</div>

For your interface you may have a look at this example.

It also has an option to ignore matches inside specific elements e.g. links.