Search code examples
javascripthtmlparagraphs

JS - How to split text at a <br> and place in 2 <p>'s

Want I want to do is scan through a paragraph's innerHTML and find where line breaks are which can be in various forms in between paragraph tags < p >< /p >:

<br>, <br />, or <br></br>

and remove them. BUT, where the line break was, I want to place all text before it into its own paragraph using document.createElement('p'), and all text after it into another new paragraph.

If however there are more than 2 line breaks together with no text in the middle, or just white space, then remove/ignore this and don't bother placing this into its own paragraph.

Here is an example of what I mean. Below is before the alteration:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis nisi sem, id gravida felis suscipit at. Sed ipsum felis, posuere ut turpis at, faucibus tempor dui. Nunc gravida sapien id velit vestibulum euismod.
<br />
<br />
Praesent vehicula rhoncus bibendum. Aenean tempus maximus aliquam. Nulla facilisi. Maecenas justo felis, faucibus ut posuere eget, fringilla et arcu. Sed ut pellentesque leo, a tincidunt tellus.</p>

And this is what I want to change it to:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis nisi sem, id gravida felis suscipit at. Sed ipsum felis, posuere ut turpis at, faucibus tempor dui. Nunc gravida sapien id velit vestibulum euismod.</p>

<p>Praesent vehicula rhoncus bibendum. Aenean tempus maximus aliquam. Nulla facilisi. Maecenas justo felis, faucibus ut posuere eget, fringilla et arcu. Sed ut pellentesque leo, a tincidunt tellus.</p>

Is this possible to do in Javascript? Thank you for reading!

Solution

  • For a first simple answer, try this:

    s = prompt('Input HTML text example', '<p>...your text here...</p>');
if(!!s) {
  console.log(s.replace(/(<br ?\/?>)+/ig, '</p><p>'));
}

    This method assumes that the original text is entered through some WYSIWYG editor, so:

    • we don't need to check if the whole text is wrapped in <p>...</p>
    • there's no matter with something like the </br> you cited

    At the opposite if the text is rawly entered as HTML, we might encounter really anything, so it needs a totally different solution, based on a programmatically detailed analysis of the text.