Question

i use this script to replace nested font tags by span tags:

$(document).ready(function(e) {
    var content = $('div').first();

    $('#input font').each(function(index, value){
        var span = document.createElement('span');
        span.style.color = $(this).attr('color');
        span.innerHTML = $(this).html();
        $(content).children('font').first().replaceWith(span);  
    });
    $('#output').html($(content).html());
});

and this is the html with the font tags I want to replace

<div id="input">
    At vero eos et accusam et justo duo dolores et ea rebum. <font color="#00FF99"><font color="#ff0000">Stet clita</font> kasd gubergren</font>, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
</div>
<div id="output"></div>

my script doesn’t replace the inner font tag (<font color="#ff0000">Stet clita</font>). any idea why?

thanks in advance

Answer 1

Slightly different approach: working demo

Note, unlike your version, the changes are only made in #output, not in #input; I suspect that was your intention, based on the names (hence the use of .clone()).

$(document).ready(function(e) {
    var content = $('div').first().clone();
    var fnt = content.find('font');
    while( fnt.length > 0 ) {
        var current = fnt.first();
        var span = $('<span />')
            .css('color', current.attr('color') )
            .html( current.html() );
        current.replaceWith(span);
    }
    $('#output').html( $(content).html() );
});​