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!

@caTS, thanks for your instant reply! I will check them out and get back to you — TheHaloDeveloper
– TheHaloDeveloper, Commented Sep 24, 2022 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? — TheHaloDeveloper
– TheHaloDeveloper, Commented Sep 24, 2022 at 23:27

CertainPerformance · Accepted Answer · 2022-09-24 23:28:07Z

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, 2022 at 23:28

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheHaloDeveloper Over a year ago

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

k.tten Over a year ago

@Anye Relevant comic: commitstrip.com/en/2014/02/24/coder-on-the-verge-of-extinction?

TheHaloDeveloper Over a year ago

@caTS My first time working with Regex 🤣🤣🤣

Collectives™ on Stack Overflow

JavaScript replace with an exception string

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related