Question

I’m trying to remove all html formatting inside a <div>, except for a specific class.

I tried

$('div#text :not(a.keep)').contents().each(function () {
    $(this).html($(this).text());
});

But it doesn’t change anything to the content of the div.

sample input : <span>a </span><span><a class="keep">b</a></span> c

desired output : a <a class="keep">b</a> c

WHY ?

Why am I trying to do this ? I have a div, contenteditable, and I want to format what the user types. I have a timer, and every few seconds I check the contents of the div to find stuff to format, but I want to keep what has been marked to keep.

Answer 1

The issue is that your .keep can be anywhere (deeply) in your element

Here’s an alternative approach.
The idea is to get all elements that your #text contains and THEN, loop through each to see if it’s matching your requirements.

Here’s a sample

function getChildrenDeep(elem)
{
    var ret = [];

    $(elem).each(function(k,v){
        ret.push(v);
        if ($(v).children().length > 0) ret = $.merge(ret,getChildrenDeep($(v).children()));
    });

    return ret;
}
var plainChildren = getChildrenDeep($("#text")),
    final = '';

$(plainChildren).each(function(k,v){
    if (!$(v).hasClass("keep"))
        final += $(v).clone().children().remove().end().text(); /* See Reference */
    else
        final += $(v)[0].outerHTML;
});

document.write(final);

http://jsfiddle.net/5hjnX/4/

Reference