Question

I have lots of elements within CKEditor with events hooked up to them and data bound to them using the .data() method. I would like to remove any  s from this block of HTML. I could simply do

$('body').html($('body').html().replace(/&nbsp\;/, ''));

But because this resets the HTML it effectivly re-creates all of the elements which means that I have to re-bind all of the events and data. What I am currently doing is this:

if ($body.html().indexOf(' ') > -1) {
    $body.find(':*:not(:has(*))').each(function(){
            // These nodes don't have any children so contain text or nothing
            $(this).html($(this).html().replace(/&nbsp\;/,''));
    });
}

This will replace  s in HTML like this:

     <p>Foo&nbsp;Bar</p>

But not in HTML like this:

     <div>Foo&nbsp;<span>Bar</span></div>

Can anyone think of a better way of doing this?

Thanks,

Joe

Answer 1

Just select all text nodes inside of the target element then loop through them making your replacement.

$("*").contents().filter(function(){
    return this.nodeType === 3;
}).each(function(){
    // do your replace here using this.nodeValue
});

I highly suggest filtering down to a smaller subset of elements if possible, '*' and 'body *' will probably be slow.