Question

我使用此脚本用span标记替换嵌套字体标记：

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

这是带有我要替换的字体标签的html

<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>

我的脚本不会替换内部字体标记（<font color="#ff0000">Stet clita</font>）。知道为什么吗？

提前致谢

Answer 1

您可以使用replaceWith方法。

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

Fiddle

Answer 2

我猜想外部font标记首先被新span替换。该操作实际上从DOM中删除了初始内部font元素，因此each()的第二次迭代将失败。替换的新font不受原始each()调用的约束，因此不会对其执行任何操作。

Answer 3

尝试将换行更改为：

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

而不是

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

如果您确定<font>标记内只有文字

，请执行此操作

Answer 4

尝试这种深度优先的方法：

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

Answer 5

略有不同的方法：working demo

请注意，与您的版本不同，更改仅在#output中进行，而不是在#input中进行;我怀疑这是你的意图，基于名称（因此使用.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() );
});

替换嵌套的html标记

5 个答案: