How to split html tag string using regex

Question

I need to split this using <p> tag

  let val = '<p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P>'

Need this

arr= ['<p style={{marginTop:40px}}>ABC</P>','<p style={{marginTop:40px}}>ABC</P>','<p style={{marginTop:40px}}>ABC</P>']

Answer 1

You can add a string to the end of the p tag where you split on.

let val = '<p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P>'


// Replace </p> with </p>###
val = val.replaceAll('</P>', '</p>###');

// Split on the newly added sign
let split = val.split('###');

// Filter out empty lines
newArr = split.filter((a) => a);

// Show result
console.log(newArr)

Answer 2

If the junction between elements has a distinct pattern, you can do this

Here you are relying on it always reading exactly </P><p at the junction between the elements. You use JS's replace function insert a piece of text that you must select to have zero probability of being in the real server response. Then use JS's split function to split every time that inserted text appears.

const inp='<p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P>'

const arr=inp.replace(/<\/P><p/g,"<\/P>###SLICE-HERE###<p").split("###SLICE-HERE###")

console.log(arr)

You probably also want to deal with varying cases of the </P> and <p>

[pP] means "either lower case p or upper case P".

const inp='<p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P>'

const arr=inp.replace(/<\/[pP]><[pP]/g,"<\/p>###SLICE-HERE###<p").split("###SLICE-HERE###")

console.log(arr)

And if the server may send spaces or newlines between the paragraphs?

\s represents any whitespace character. * means 0 or more of them.

const inp='<p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P>   <p style={{marginTop:40px}}>ABC</P>'

const arr=inp.replace(/<\/[pP]>(\s)*<[pP]/g,"<\/p>###SLICE-HERE###<p").split("###SLICE-HERE###")

console.log(arr)

It's still not perfect, because regex can never fully parse HTML

The code examples above will only work in a large but incomplete set of circumstances. For example, if the server sends a line of text that contains a quoted </P><P>, i.e. with the intention of displaying that on the screen, the script I provided will mistake that for the end of the paragraph.

It is, I believe, impossible to handle using a regex alone the general case of all possible HTML sequences, and correctly split them by paragraph.

However, if the server is under your control, or is otherwise reasonably likely to only send well-behaved text, and your purpose is not mission-critical, you can make a reasonable effort at doing what you describe.