Javascript - replace tags in CMS formated content Pt. II

Question

I'm dealing with a CMS that formats a block of text like so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus ipsum, semper non consequat eu, facilisis at lectus. Vestibulum et magna ac odio semper porttitor lacinia congue orci. Vivamus suscipit eleifend dolor, in hendrerit turpis bibendum ut. Morbi interdum augue et nisl ullamcorper sit amet ornare  lorem tempus. Duis nec nisi quis ipsum pulvinar volutpat. Suspendisse venenatis malesuada metus,
nec pretium dui cursus eget. Donec vitae lorem vitae risus dapibus malesuada congue vel nunc.

The company that uses this CMS has made it standard practice to use SHIFT+Enter x 2, to indicate a paragraph break, and a single Shift+Enter as a line break. I am not able to patch or change how the CMS works.

This is the desired result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus ipsum, semper non consequat eu, facilisis at lectus. Vestibulum et magna ac odio semper porttitor lacinia congue orci. Vivamus suscipit eleifend dolor, in hendrerit turpis bibendum ut.Morbi interdum augue et nisl ullamcorper sit amet ornare lorem tempus. Duis nec nisi quis ipsum pulvinar volutpat. Suspendisse venenatis malesuada metus, nec pretium dui cursus eget. Donec vitae lorem vitae risus dapibus malesuada congue vel nunc.

I need to replace double   tags with a closing and opening  tag to maintain the paragraph break, and then remove any remaining single   tags that are for line breaks.

I have tried this, and it almost works:

<script>
$('#V01-cntntTxt').html($('#V01-cntntTxt').html().replace(/<br><br>/g, '</p>'));
$('#V01-cntntTxt').html($('#V01-cntntTxt').html().replace(/<br>/g, ' '));
</script>

However, the result ends up with an empty paragraph. The two  tags in the middle are backwards. It should be  and not . It seems as though an opening tag is being inserted even though I have not specified that it should.

This is the result of the above script, with the tags backwards:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus ipsum, semper non consequat eu, facilisis at lectus. Vestibulum et magna ac odio semper porttitor lacinia congue orci. Vivamus suscipit eleifend dolor, in hendrerit turpis bibendum ut.Morbi interdum augue et nisl ullamcorper sit amet ornare lorem tempus. Duis nec nisi quis ipsum pulvinar volutpat. Suspendisse venenatis malesuada metus, nec pretium dui cursus eget. Donec vitae lorem vitae risus dapibus malesuada congue vel nunc.

blocco blocco · Accepted Answer · 2012-04-13T17:28:58

It seems as though replacing the innerHTML in your  tag isn't creating a new  tag as desired, so you should explicitly create one and split the contents into the new  tag at that point. For this we'll use string.split to split the contents of the string into an array and create a new  tag for each array index:

var par = $('#V01-cntntTxt'); // our first tag
var splits = par.html().split("<br><br>"); // using the first tag to get the array
par.html(splits[0].replace(/<br>/g, " ")); // handling the first index
splits.splice(0, 1) // deleting the first index so it doesnt happen twice
splits.forEach(function(str){ // iterating through the array of strings
    var nPar = $("<p></p>"); // a new <p> tag
    nPar.html(str.replace(/<br>/g, " ")); // removing single <br>s from it
    nPar.insertAfter(par);
    par = nPar; // if another is found it will insert after this
})

There is also a demo here of this.

Javascript - replace tags in CMS formated content Pt. II

1 Answers