CODEWITHSUNDEEP
jquery
user1639348
user1639348

Reputation: 119

Replace nested html tags

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

Upvotes: 1

Views: 584

Answers (5)

nbrooks
nbrooks

Reputation: 18233

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() );
});​

Upvotes: 0

Hayk Martiros
Hayk Martiros

Reputation: 2186

Try this depth-first approach:

http://jsfiddle.net/C8euR/1/

function replace(el) {
    if (el.length == 0) return;
    replace($(el).children('font'));   
    if ($(el).is('font')) {
        var span = document.createElement('span');
        span.style.color = $(el).attr('color');
        span.innerHTML = $(el).html();     
        $(el).replaceWith(span);    
    }
}


$(function(e) {
    var content = $('div').first();
    replace(content);
});

Upvotes: 0

Ram
Ram

Reputation: 144659

You can use replaceWith method.

$('#input font').each(function(){
    var $this = $(this);
    var $span = $('<span/>', {
                   text: $this.text(),
                   style: "color:" + $this.css('color')
                })
    $this.replaceWith($span)
});

Fiddle

Upvotes: 1

sabithpocker
sabithpocker

Reputation: 15558

Try chaging line to:

span.innerHTML = $(this).text();

istead of

span.innerHTML = $(this).html();

Do it if you are sure that <font> tags only has text inside them

Upvotes: 0

Mike Brant
Mike Brant

Reputation: 71384

I would guess that the outer font tag is first replaced with the new span. The action actually removes the initial inner font element from DOM, thus the second iteration of each() would fail. The new font that is replaced is not subject to the original each() invocation, so no action is performed on it.

Upvotes: 0

Related Questions