CODEWITHSUNDEEP
javascripthtmlexceptionreplace
Halo
Halo

Reputation: 1970

JavaScript replace with an exception string

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 &lt;, and all the > with &gt;

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!

Upvotes: 1

Views: 320

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370679

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>

Upvotes: 2

Related Questions