JQuery.replaceWith changing <br/ "> <br/"> to </p>?

Question

I am working with a CMS that creates double break tags instead of my preferred paragraph tag. I tried:

$('<br /><br />').replaceWith('</p>'); 

Now that you have finished laughing; could you tell me if this is possible, and if so, then the best way to approach this.

Update (from OP comment):
The paragraphs are not empty, they have the <p> at the beginning and the last pair is closed with </p> paragraphs between them are spaced with the double tag <br> .

I do not have access to the editor, which is my problem. It was an ordinary assembly and horror.

Answer 1

There are several ways you could try. Preferred (since you're already using jQuery) probably uses contents () :

 $('.your_cms_container').contents().filter(function() { return this.nodeType == 3; // Only text nodes }).wrap('<p></p>') 

This will transfer all text nodes to paragraph tags. Follow this by tearing out all the tags on the web:

 $('.your_cms_container').filter('br').remove(); 

Of course, this gets complicated if your text nodes are not all simple children of the main text container.

Another (dirty) option is to simply manually manually drag and drop the html and then return it back to jQuery after completion:

 var htmlAsString = $('.your_cms_container').html(); // Get the contents as simple text ... // Do nasty things to the string here $('.your_cms_container').html(htmlAsString); // Put it back and let jQuery try and sort out any mess 

I am not saying that the second way is wrong, and sometimes this is the only way to succeed without rewriting everything. But it still makes me feel dirty if I have to do it ,-)

Answer 2

• Get all nodes <br> . Optionally, ignore those that are directly inside the <p> block.
• Then, for each <br> node, wrap any text nodes that immediately precede or immediately follow it.
• Finally, remove <br> node.

This approach handles nesting and not garbage links, page layout, etc.

The code:

 $('.your_cms_container br').each ( function () { if (this.parentNode.nodeName != "P") { $.each ([this.previousSibling, this.nextSibling], function () { if (this.nodeType === 3) { // 3 == text $(this).wrap ('<p></p>'); } } ); $(this).remove (); //-- Kill the <br> } } ); 

---

---

Update:

After editing the OP question, I realized that I did not quite understand his specific situation. (I use the code above, which is very important for custom scripts.)

He wants to change this:

 <p> "Paragraph 1" <br /> <a href="http://xkcd.com/246/">Link, the first</a> Line after single break. <br /><br /> "Paragraph 2" </p> 

in it:

 <p> "Paragraph 1" <br /> <a href="http://xkcd.com/246/">Link, the first</a> Line after single break. </p> <p> "Paragraph 2" </p> 

The difficulty is that you do not want to delete nested elements (if any) or event handlers (if any).

To do this, use the following approach:

• Take only offensive paragraphs with a p:has(br+br) selector p:has(br+br) . Remember that an adjacent selector ignores text nodes - this is what we do not want to do in this case.
• Scroll through the contents of each paragraph, one at a time.
• Use the state machine to create a new paragraph in each <br><br> and to move content nodes to the corresponding <p> .

The code is as follows. You can see it in action in jsFiddle :

 var badGraphs = $("#content p:has(br+br)"); var targetP = null; var justSplit = false; badGraphs.each ( function () { var parentP = $(this); parentP.contents ().each ( function (J) { if (justSplit) { justSplit = false; // Continue the loop. Otherwise, it would copy an unwanted <br>. return true; } var thisjNode = $(this); var nextjNode = $(this.nextSibling); if (thisjNode.is ("br") && nextjNode.is ("br") ) { thisjNode.remove (); //-- Kill this <br> nextjNode.remove (); //-- and the next //-- Create a new p for any following content targetP = targetP || parentP; targetP.after ('<p></p>'); targetP = targetP.next ("p"); justSplit = true; } else if (targetP) { //-- Move the node to its new home. targetP.append (this); } } ); } ); 

Answer 3

if your server language is php you can use str_replace()

http://php.net/manual/en/function.str-replace.php

Answer 4

This is the answer to your question:

 $( 'br' ).before( '<p></p>' ).remove(); 

but as said, it’s better to do things like the server side