Custom jQuery selector ":blank"

The jQuery selector :empty will not find elements which only contains whitespace. So I made this custom selector :blank which does. Below you can see it working (I hope :-)

HTML

<link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.min.css">
<h1>Custom jQuery selector ":blank"</h1>
<blockquote>The jQuery selector <code>:empty</code> will not find elements which only contains <em>whitespace</em>. So I made this custom selector <code>:blank</code> which does. Below you can see it working (I hope :-))</blockquote>
<h3>Sten Hougaard, 2012-09-18 - <a href="http://twitter.com/netsi1964">@netsi1964</a></h3>
<table class="table bordered" id="emptyTest">
    <thead>
        <tr><th colspan="3"><h4>This is tested using build <code>:empty</code>.</h4>
            <code>jQuery('table#emptyTest span:empty').closest('tr').addClass('blank');</code>
            </th></tr>
    </thead>
    <tbody>
<tr><td class="span1"></td><td>Not empty</td><td><span>Not empty</span></td></tr>
<tr><td class="span1"></td><td>No content</td><td><span></span></td></tr>
<tr><td class="span1"></td><td>Contains some spaces</td><td><span>    </span></td></tr>
<tr><td class="span1"></td><td>Had empty child element</td><td><span><span></span></span></td></tr>
<tr><td class="span1"></td><td>Had child no-empty element</td><td><span><span>I am a child</span></span></td></tr>
    </tbody>
</table>
<table class="table bordered" id="blankTest">
    <thead>
        <tr><th colspan="3"><h4>This is tested using <code>:blank</code>.</h4>
            <code>jQuery('table#emptyTest span<strong>:blank</strong>').closest('tr').addClass('blank');</code></th></tr>
    </thead>
    <tbody>
<tr><td class="span1"></td><td>Not empty</td><td><span>Not empty</span></td></tr>
<tr><td class="span1"></td><td>No content</td><td><span></span></td></tr>
<tr><td class="span1"></td><td>Contains some spaces</td><td><span>    </span></td></tr>
<tr><td class="span1"></td><td>Had empty child element</td><td><span><span></span></span></td></tr>
<tr><td class="span1"></td><td>Had child no-empty element</td><td><span><span>I am a child</span></span></td></tr>
    </tbody>
</table>
<div class="span12">
...

CSS

span {min-width: 20px;}
tbody tr, .passed  {background-color: green; background-color: rgba(0,200,0,.6);}
.blank, .failed {background-color: red; background-color: rgba(200,0,0,.6);}
body {padding: 20px;}
textarea {height: 150px;}

JavaScript

jQuery.extend(jQuery.expr[':'],
  { blank: function (el) {
      return (jQuery(el).text().replace(/\s/ig,'').length===0);
    }
  }
);

jQuery(function() {

jQuery('table#emptyTest span:empty').closest('tr').addClass('blank');
jQuery('table#blankTest span:blank').closest('tr').addClass('blank');
})