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

Answer 2

满屋子悲伤、哭泣的小猫希望你能摆脱那些 <font> 标记，但你可以通过明确地向下遍历嵌套标记来使其工作。

它之所以会像现在这样，是因为对.text() 的外部调用会针对第一个<font> 标签运行，而它会删除其他标签。

edit — 澄清，当你打电话时

$('#mydiv').find('font')

jQuery 会找到 3 个字体标签。因此，库将为每个元素调用您传递给.text() 的函数。但是，第一次调用将具有从 DOM 中删除其他两个 <font> 元素的效果。即使库继续为这些元素调用您的回调，也没有任何效果，因为它们不再在页面上。

以下是可行的方法：

var $fonts = $('#mydiv').find('font');
var text = $fonts.text();

var attrs = {};
$fonts.each(function(_, font) {
  var names = ["size", "color", "face"];
  for (var i = 0; i < names.length; ++i)
    if (font[names[i]]) attrs[names[i]] = font[names[i]];
});

var newText = "";
for (var name in attrs) {
  if (attrs.hasOwnProperty(name))
    newText += '[' + name + '=' + attrs[name] + ']';
}
newText += text;
for (var name in attrs) {
  if (attrs.hasOwnProperty(name))
    newText += '[/' + name + ']';
}

$('#mydiv').text(newText);

请注意，我不太确定您为什么要将 BBCode 放在这样的页面上，但这似乎是本意。

Answer 3

在我看来你的第一行应该是：

$("#mydiv").find("font").each(function(){