Remove whitespace and line breaks between HTML elements using jQuery

Question

Using jQuery, I'd like to remove the whitespace and line breaks between HTML tags.

var widgetHTML = '    <div id="widget">        <h2>Widget</h2><p>Hi.</p>        </div>'; 

Should be:

alert(widgetHTML); // <div id="widget"><h2>Widget</h2><p>Hi.</p></div> 

I think the pattern I will need is:

>[\s]*< 

Can this be accomplished without using regex?

Answer 1

I tried the technique that user76888 laid out and it worked nicely. I packaged it into a jQuery plugin for convenience, and thought the community might enjoy it, so here:

jQuery.fn.cleanWhitespace = function() {     this.contents().filter(         function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })         .remove();     return this; } 

To use this, just include it in a script tag, then select a tag to clean with jQuery and call the function like so:

$('#widget').cleanWhitespace();