Replace nested html tags

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

Ram · Accepted Answer · 2012-08-31 18:34:09Z

1

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

answered Aug 31, 2012 at 18:34

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1639348 Over a year ago

the example removes the inner font tag.

nbrooks · Accepted Answer · 2012-08-31 18:51:28Z

0

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

answered Aug 31, 2012 at 18:51

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

Comments

Mike Brant · Accepted Answer · 2012-08-31 18:26:14Z

0

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.

answered Aug 31, 2012 at 18:26

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

Comments

sabithpocker · Accepted Answer · 2012-08-31 18:28:10Z

0

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

answered Aug 31, 2012 at 18:28

sabithpocker

15.6k1 gold badge44 silver badges77 bronze badges

Comments

Hayk Martiros · Accepted Answer · 2012-08-31 18:43:52Z

0

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

answered Aug 31, 2012 at 18:43

Hayk Martiros

2,19620 silver badges22 bronze badges

Collectives™ on Stack Overflow

Replace nested html tags

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related