How do u replace a string that's not inside a specific div?

Question

I have this html:

<div id="content">This following word is not <span id="notOk">ok</span> but all the other words are ok</div>

And using this jquery I'm trying to replace the word ok with cool, as long as the word ok is not inside the span #notOk.

var content = $('#content').html()
content = content.replace('ok', 'cool');
$('#content').html(content)

I also want to preserve the sentence and not move any words around, which is what happened when I tried. I guess I'm looking for something like dontGetElementByID('').?

FIDDLE

Answer 1

You can use the .contents() method and replace nodeValue properties of the textNodes.

$('#content').contents().each(function(){
    if (this.nodeType === 3)
        this.nodeValue = this.nodeValue.replace('ok', 'cool');
});

http://jsfiddle.net/82tmP/

Answer 2

Replace the value just like you did.. then replace it back :)

var content = $('#content').html()
content = content.replace('ok', 'cool');
$('#content').html(content);

content = $('#notOk').html();
content = content.replace('cool', 'ok');
$('#notOk').html(content);