Question

I have a div (contenteditable="true") which contains some text and some html. I’m trying to replace text in the entire div except in links with a certain class.

I tried:

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

But it seems that $(this).html() is null ?

The test content of the div is 'test <a class="selected">test2</a> test3'

As output, I want "test " and " test3" to be replaced with the result of the replace() function, while the text inside the a.selected is untouched.

EDIT

there could be some other html inside the div, it can be ignored. if the replace function switches things to uppercase, here are the desired input ant ouptut :

input : 'test <a class="selected">test2</a> <a>test3</a>'

output: 'TEST <a class="selected">test2</a> TEST3'

EDIT 2

This seems to work, but not when replace() returns some HTML

$("div#text").contents().not("a.selected").each(function() {
    this.nodeValue = replace(this.nodeValue);
});

demo : http://jsfiddle.net/ApgEc/2/

Answer 1

Do you mean something like that?

$("div").contents().not("a.selected").each(function() {
    this.nodeValue = replace(this.nodeValue);
});​

DEMO: http://jsfiddle.net/ApgEc/

---

In order to make possible to insert HTML in replace function, we need to rewrite the code:

$("div").contents().map(function() {
    if (!$(this).is("a.selected")) {
        return replace(this.nodeValue);
    }
    return this.outerHTML;
}).appendTo($("div").empty());​

DEMO: http://jsfiddle.net/ApgEc/3/