JavaScript replace with an exception string

Question

I have the following html tag (which is custom):

<meltdown-code data-lang="HTML">
    <span><br>
        <p>Hi</p><br>
    </span><br>
</meltdown-code>

Simple enough. Now, I'm trying to make the HTML tags show as plain text, instead of being rendered as a separate element. To do that, I am replacing all the < with <, and all the > with >

tagHTML.replace(/</g, '&lt;')

The problem: This also replaces the <br> tags, which doesn't create a new line. Here is the solution, in a perfect world:

tagHTML.replace(/</g, '&lt;', {exceptions: '<br>'})

Obviously, that's not how it works. Any help is appreciated.

Thanks!

Have a look at [negative lookaheads](https://stackoverflow.com/a/1749956/18244921)! — kelsny, Sep 24 '22 at 23:25
@caTS, thanks for your instant reply! I will check them out and get back to you — Halo, Sep 24 '22 at 23:25
@caTS, sorry... I'm not sure I understand. I'm not really good with regex. Would you mind explaining it to me? — Halo, Sep 24 '22 at 23:27

score 2 · Accepted Answer · answered Sep 24 '22 at 23:28

2

Negative lookahead for <br> before matching <.

const text = `<meltdown-code data-lang="HTML">
    <span><br>
        <p>Hi</p><br>
    </span><br>
</meltdown-code>`;

const output = text.replace(/(?!<br>)<([^>]+)>/g, '&lt;$1$gt;');
console.log(output);

<code></code>

answered Sep 24 '22 at 23:28

CertainPerformance

356,069
52
309
320

Wow, thanks! There's no way I would have been able to write that Regex on my own lol. I'll accept when i can :D – Halo Sep 24 '22 at 23:29
1

@Anye Relevant comic: https://www.commitstrip.com/en/2014/02/24/coder-on-the-verge-of-extinction/? – kelsny Sep 24 '22 at 23:32
@caTS My first time working with Regex – Halo Sep 24 '22 at 23:33

JavaScript replace with an exception string

1 Answers1