Javascript regex: replace an instance in a string

Question

I am trying to create a regex in javascript. What I want to do:

I want to see if there is an html element with class=“get-me” anywhere in the string.
If there is I want to replace it with I found you.

Examples:

<div class="get-me" />

Result: I found you

<div>Some text <div class="get-me" data-type="data-type" js="js" /> more things happening here</div>

Result: <div>Some text I found you more things happening here</div>

<div>Some text <p class="get-me" /> more things</div>

Result: <div>Some text I found you more things</div>

I m testing <<<<div class="get-me" />

Result: I m testing <<<I found you

Thanks.

[Don't parse HTML with regex.](https://stackoverflow.com/a/1732454/3001761) — jonrsharpe, Jul 26 '17 at 21:47
Why have you assumed that I want to be parsing html? I have a specific use case that is not parsing. — Browsing, Jul 26 '17 at 21:48
Find a class in an html tag is _parsing_. And for this you could use library such as [sizzlejs](//sizzlejs.com) instead of using regex. Also there is no lookbehind in javascript, but [there are alternatives](https://stackoverflow.com/q/7376238/6320039) — Ulysse BN, Jul 26 '17 at 21:51
He probably assumed that you want to parse HTML with regex because that is what you are doing in all of your examples. — CAustin, Jul 26 '17 at 21:52
It's not so much an assumption I've made as what you've carefully described above. If you have more context then by all means please [edit] to provide it, but it seems extremely unlikely that regex will be the best tool for the job. — jonrsharpe, Jul 26 '17 at 21:52
pattern matching is parsing, and that's what Regex does lol. — jdmdevdotnet, Jul 26 '17 at 21:54
Looks like even though I said I wont be doing any parsing people cannot focus on the pattern. I have edited the question. I hope all of you nice people who couldn't wait to downvote a question, can provide a helpful answer. — Browsing, Jul 26 '17 at 22:44
Why do you need a lookbehind or lookahead if you plan on replacing the @ symbols as well? "@getMe@" -> "I found you" — Funny Geeks, Jul 26 '17 at 23:02
Good point, lookbehind and lookeahead will not be appropriate here as `@` will remain. However, it will be good to see how to do it only replacing `getMe` within the `@@`. @Funny Geeks, any suggestions? — Browsing, Jul 27 '17 at 07:28

score 1 · Answer 1 · 2017-07-26T23:46:11.093

This works, finds any tag with class="getMe" in it.
You can then replace it with nothing (remove it from the text).

Note that you can't really match a specific tag without matching all tags.
This is because of marks can be embedded inside other tag's, etc...

/<[\w:]+(?=(?:[^>"']|"[^"]*"|'[^']*')*?\sclass\s*=\s*(?:(['"])\s*getMe\s*\1))\s+(?:"[\S\s]*?"|'[\S\s]*?'|[^>]*?)+>/

https://regex101.com/r/PHUrIi/1

Expanded

 < [\w:]+               # Any tag

 (?=                    # Assert (a pseudo atomic group)
      (?: [^>"'] | " [^"]* " | ' [^']* ' )*?
      \s class  \s* = \s* 
      (?:
           ( ['"] )               # (1), Quote
           \s* getMe \s*          # With 'class="getMe"
           \1 
      )
 )
 \s+ 
 (?: " [\S\s]*? " | ' [\S\s]*? ' | [^>]*? )+
 >

Matt Dell · Accepted Answer · 2017-07-27T09:56:34.933

Without getting into the parsing HTML debate, this will answer your original (unedited) question:

const replacementText = 'I found you';
const regex = /(.*)<\w+\s.*class="get-me".*\/>(.*)/;
let str = '<div>Some text <div class="get-me" data-type="data-type" js="js" /> more things happening here</div>';
str = str.replace(regex, `$1${replacementText}$2`);

Output is

"<div>Some text I found you more things happening here</div>"

Here is a JSBin for you: https://jsbin.com/rowaxayodu/edit?js,console

Javascript regex: replace an instance in a string

2 Answers2