Remove whitespace and line breaks between HTML elements using jQuery

javascript, jquery, regex, replace, string

Solution

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();

Problem

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?

Original source

Related problems