Question

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

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

用这个：

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

我在StackOverflow上做了一些搜索并找到了这个链接，然后在我的代码之后建模： Javascript JQuery replace tags

我在下面创建了一个小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);
});

非常感谢任何帮助！

Answer 1

不需要每个，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
    }
);

JSFiddle：http://jsfiddle.net/qggadmmn/

Answer 2

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

Answer 3

很晚才回答，但我认为它还值得发帖。

如果您的font代码可能包含其他属性，而不仅仅是color（即：face，size），这将涵盖所有内容：

HTML（示例）

<font color="red" size="3">Some text</font>
<br />
<font color="blue" face="Verdana">Some text</font>

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

Demo

如何用span替换字体标签？

3 个答案: