Shortening jQuery Function

Question

I've written the following functions to remove non-breaking spaces from the html code in a SharePoint site (SharePoint designer litters whatever code you write with non-breaking spaces whenever you open the masterpage or page layouts! You end up spending all your time going back and deleting them).

In any case, it seems overly long, I'm quite new to jQuery and wondered if there is a cleaner way to perform the same task.

<script type="text/javascript">
    $(function(){
            $('h1').each( function() {  
        var $h = $(this);  
        var html = $h.html();  
        html = html.replace( '&nbsp;', '' );  
        $h.html( html );  
    });
}); 
$(function(){
            $('h2').each( function() {  
        var $h = $(this);  
        var html = $h.html();  
        html = html.replace( '&nbsp;', '' );  
        $h.html( html );  
    });
}); 
$(function(){
            $('h3').each( function() {  
        var $h = $(this);  
        var html = $h.html();  
        html = html.replace( '&nbsp;', '' );  
        $h.html( html );  
    });
}); 
$(function(){
            $('h4').each( function() {  
        var $h = $(this);  
        var html = $h.html();  
        html = html.replace( '&nbsp;', '' );  
        $h.html( html );  
    });
}); 
    $(function(){
            $('p').each( function() {  
        var $h = $(this);  
        var html = $h.html();  
        html = html.replace( '&nbsp;', '' );  
        $h.html( html );  
    });
}); 

    </script>

Answer 1

$(function() {
    $('h2, h3, h4, p').each(function() {
        var $h = $(this);
        var html = $h.html();
        html = html.replace( ' ', '' );
        $h.html( html );
    });
})

Answer 2

$(function() {
   $('h2, h3, h4, p').html(function(){ return $(this).html().replace(" ", "") }) 
});

Answer 3

You can combine all of them into one $(function() { ... }); There is not much reason for you to be wrapping each of those calls in its own document ready event handler.

Also, you are calling the same function on many elements, you can combine your selectors with a , resulting in the much shorter $('h2,h3,h4,h5').each(function() {....}); proposed by others.

Shortening the function body:

var html = $h.html();
html = html.replace(' ', '');

can be done on one line with:

var html = $h.html().replace(' ', '');

and since you only reference it long enough to call another function - it doesn't even really need to be stored in its own variable:

$h.html($h.html().replace(' ', ''));

Or if using jQuery > 1.4 , use the new function syntax:

$h.html(function(index, oldHtml) { return oldHtml.replace(' ', ''); });

Of course - your method across multiple lines gives you more places to insert debugging code if need be, I usually compress this sort of thing manually after I verify it works.

Making it a plugin

This next approach is a little overkill for the situation, but may shed a little more insight into jQuery and creating 'reusable' code.

// generic replace in html function - proxies all the arguments to 
// .replace()
$.fn.replaceHtml = function() {
  var replaceArgs = arguments;
  // jQuery 1.4 allows
  return this.html(function(idx, oldHtml) {
    return oldHtml.replace.apply(oldHtml, replaceArgs);
  });
  // older versions / another way to write it
  // return this.each(function() { 
  //   var $t = $(this), html = $t.html();
  //   $t.html(html.replace.apply(html, replaceArgs));
  // });
};

// single task that uses the replaceHtml function
$.fn.removeNBSP = function() {
  return this.replaceHtml(' ', '');
};

$('h1,h2,h3,h4,h5,p').removeNBSP();