javascript - (jquery) 将嵌套的相同 html 标签更改为其他 bbcode 标签

Question

好的，这就是我所拥有的:

<div id="mydiv">
<font color="green"><font size="3"><font face="helvetica">hello world</font></font></font>
</div>

我知道标签很奇怪，但这就是网站生成的内容。所以基本上我想将字体标签更改为 bbcdoe 标签，我写的 jquery 代码:

$("#mydiv").find("font").text(function(){
    var text = $(this).text();
    var size = $(this).attr("size");
    var color = $(this).attr("color");
    var face = $(this).attr("face");;
    if(size!=undefined){
        return '[size="'+size+'"]'+text+'[/size]';
    }
    if(color!=undefined){
        return '[color="'+color+'"]'+text+'[/color]';
    }
    if(face!=undefined){
        return '[type="'+face+'"]'+text+'[/type]';
    }

});

所以我得到的只是:[color="green"] hello world [/color]。总是只有第一个标签。有什么想法吗？

ps:我都试过了，replaceWith，html()，都是一样的结果。只有第一个标签是变化的。

Answer 1

它不起作用的原因是当你调用

$("#mydiv").find("font").text("New text")

对于每个字体标签，从第一个标签开始，它将替换该标签内的文本。

这是一个向您展示发生了什么的示例。

Example |代码

$fonts = $("font","#mydiv");

console.log($fonts.text());

$fonts.text(function(){
    return "New text";
});

console.log($fonts.text());

这里有一个例子，说明你可以如何做到这一点

Example |代码

jQuery.fn.reverse = [].reverse;

var attributes= ["size", "color", "face"];
var text = $.trim($("#mydiv").text());

$("font","#mydiv").reverse().each(function(i, e) {
    for (var i = 0; i < attributes.length; ++i){
        var attr = $(e).attr(attributes[i]);

        if( typeof attr != "undefined")
            text = "["+attributes[i]+"="+attr+"]"+text+"[/"+attributes[i]+"]";
    }
});

$("#mydiv").text(text);