Javascript 如何用span替换字体标记？

我正在尝试替换字体的所有实例 具有如下颜色属性的标记：

<font color="red">Some text</font>

一些文本

为此：

<span style="color: red;">Some text</span>

一些文本

我对StackOverflow进行了一些搜索，找到了这个链接，并根据它对代码进行了建模：

我在下面创建了一个小jQuery循环，它应该执行以下操作：

浏览字符串（div的内容）

获取字体颜色属性

将标签替换为

使用适当的颜色设置CSS样式属性

现在，它不起作用。我刚刚收到一个错误，指出“replaceWith”不是一个函数

$('font').each(function () {
    var color;
    this.$('font').replaceWith(function () {
        color = this.attr("color");
        return $('<span>').append($(this).contents());
    });
    this.$("span").attr("style", "color=" + color);
});

$（'font'）。每个（函数（）{
颜色变异；
此.$（'font'）.replaceWith（函数（）{
颜色=此.attr（“颜色”）；
返回$（''）.append（$（this.contents（））；
});
这是$（“span”）.attr（“样式”、“颜色=“+color”）；
});

任何帮助都将不胜感激

$（'font'）。每个（函数（）{
$('font').each(function () {
    var $this = $(this);
    var color = $this.attr('color');
    var text = $this.text();
    var span = $('<span style="' + color '">' + text + '</span>';
    $this.before(span);
    $this.remove();
});

var$this=$（this）；
var color=$this.attr（'color'）；
var text=$this.text（）；
变量span=$（''+文本+''；
$this.before（span）；
$this.remove（）；
});

每个都不需要，replaceWith将在内部完成

$("font").replaceWith(  //find all font tags and call replace with to change the element
    function(){
        var tag = $(this);
        return $("<span/>")  //create new span
                   .html(tag.html())  //set html of the new span with what was in font tag
                   .css("color", tag.attr("color"));  //set the css color with the attribute
    }
);

$（“font”）.replaceWith（//查找所有字体标记并调用replace-with以更改元素
函数（）{
var tag=$（这个）；
return$（“”）//创建新范围
.html（tag.html（））//使用字体标记中的内容设置新跨距的html
.css（“color”，tag.attr（“color”）；//使用属性设置css颜色
}
);

---

jshiddle:

回答得很晚，但我认为还是值得发布

如果您的

字体

标签可能具有除

颜色

（即：

面部

，

大小

）以外的其他属性，这将涵盖所有这些属性：

HTML（示例）

一些文本


一些文本

jQuery（Javascript）：

$(function () {
    var fontSizes = [ 
        'xx-small', // 1
        'x-small',  // 2
        'small',    // 3
        'medium',   // 4
        'large',    // 5
        'x-large',  // 6
        'xx-large'  // 7
    ];

    $('font').replaceWith(function () {
        var attrs = this.attributes;
        var span = $('<span />').append($(this).contents());

        for (var i = 0; i < attrs.length; i++) {
            var name = attrs[i].name;
            var value = attrs[i].value;

            if (name.indexOf('face') >= 0) {
                name = 'font-family';
            }

            if (name.indexOf('size') >= 0) {
                name = 'font-size';
                value = fontSizes[value - 1];
            }

            span.css(name, value);
        }

        return span;
    });
});

$（函数（）{
var fontSizes=[
'xx小'，//1
“x-small”，//2
'小'，//3
'中等'，//4
'大'，//5
“x-large”，//6
“xx大”//7
];
$（'font'）。替换为（函数（）{
var attrs=this.attributes；
var span=$（''）.append（$（this.contents（））；
对于（变量i=0；i=0）{
名称='字体系列'；
}
if（name.indexOf（'size'）>=0）{
名称='字体大小'；
值=字体大小[值-1]；
}
css（名称、值）；
}
返回跨度；
});
});

---

您从哪里了解到的

这个。$

哦，对不起，我使用backbone.js，这是backbone.js的一个构造，作为一个纯代码的答案，这完全没有指出它会破坏任何嵌套在

标记中的HTML。@NiettheDarkAbsol您是对的，但我假设“一些文本”有些文本不是html。如果有嵌套的html，你是对的。如果嵌套了

元素，则此操作将失败。只有6 yers tool late@RokoC.Buljan，并且它没有嵌套在这里，因此它对原始海报有效。对于公共页面来说永远都不会太晚-用注释提示提供的代码不是递归的；）-以防万一，例如：

Hello world

，这在仍然使用不推荐的

标记的旧式网站上非常常见。因此，快速破解将是

while（$（（$）.length）$（$）（$）

或

$（$（$（$）.get（）.reverse（））.replaceWith（$）

或代替tag.html（）附加子项。原始代码没有嵌套的标记，因此是原始答案。

$(function () {
    var fontSizes = [ 
        'xx-small', // 1
        'x-small',  // 2
        'small',    // 3
        'medium',   // 4
        'large',    // 5
        'x-large',  // 6
        'xx-large'  // 7
    ];

    $('font').replaceWith(function () {
        var attrs = this.attributes;
        var span = $('<span />').append($(this).contents());

        for (var i = 0; i < attrs.length; i++) {
            var name = attrs[i].name;
            var value = attrs[i].value;

            if (name.indexOf('face') >= 0) {
                name = 'font-family';
            }

            if (name.indexOf('size') >= 0) {
                name = 'font-size';
                value = fontSizes[value - 1];
            }

            span.css(name, value);
        }

        return span;
    });
});