Regex: Replace semi-colons with enter key "\n"

Question

I have a string to replace semi-colons with \n. The requirement I have is to detect only those semi-colons that are outside HTML <> tags and replace them with \n.

I have come very close by using this regex by implementing multiple fixes.

/((?:^|>)[^<>]*);([^<>]*(?:<|$))/g, '$1\n$2'

The above regex works well if I input string like the below one - Value1;Value2;Value3;Value4

The output it gives is this (which is expected and correct) -
Value1
Value2
Value3
Value4

But fails if I input string like - M1;M2;M3

The output this gives is -
M1;M2
M3

(semi-colon doesn't remove between M1 and M2).

whereas the expected output should be -

M1
M2
M3

Also the string can be like this too (both combined) - M1;M2;M3;Value1;Value2;Value3;Value4

The major goal is to replace all the semicolons outside HTML Tags <> and replace it with '\n` (enter key).

Take a look to [this](https://stackoverflow.com/a/1732454/11261546) — Ivan, Jun 21 '21 at 08:25
@Ivan this is about nested HTML tags, not something I am looking for. — shivam dixit, Jun 21 '21 at 08:32
@HaoWu Yes. Using .replace() to replace semi-colons with \n. — shivam dixit, Jun 21 '21 at 08:40

Hao Wu · Accepted Answer · 2021-06-21T08:53:05.620

You can use this regex associate with .replace() function of JavaScript:

/(<[^<>]*>)|;/g

For substitution, you may use this function:

(_, tag) => tag || '\n'

If (<[^<>]*>) catches anything - which is a HTML tag, it will go into tag parameter, otherwise an outbound ; must be matched.

So you can check if tag exists. If it exists, replace with itself, otherwise replace it with a \n.

const text = `Value1;<p style="color:red; font-weight:400;">Value2</p>;<p style="color:red; font-weight:400;">Value3</p>;Value4

M1;M2;M3`;

const regex = /(<[^<>]*>)|;/g;

const result = text.replace(regex, (_, tag) => tag || '\n');

console.log(result);

Regex: Replace semi-colons with enter key "\n"

1 Answers1