CODEWITHSUNDEEP
javascriptjquerycss
SkyeBoniwell
SkyeBoniwell

Reputation: 7122

How to replace font tags with span?

I'm trying to replace all instances of a font tag that has a color attribute like this:

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

with this:

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

I did some hunting on StackOverflow and found this link, and modeled my code after it: Javascript JQuery replace tags

I've created a little jQuery loop below that is supposed to do the following:

  1. Go through the string(contents of a div)
  2. Get the font color attribute
  3. Replace the tags with a
  4. Set a CSS style attribute with the appropriate color.

Right now, it doesn't work. I just get an error stating that 'replaceWith' is not a function.

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

Any help would be greatly appreciated!

Upvotes: 2

Views: 3501

Answers (3)

emerson.marini
emerson.marini

Reputation: 9348

Quite a late answer, but I think it's still worth it posting.

If your font tags may have other attributes than just color (ie: face, size), this would cover them all:

HTML (Example)

<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

Upvotes: 1

epascarello
epascarello

Reputation: 207537

There is no need for each, replaceWith will do it internally. 

$("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/

Upvotes: 8

patrykf
patrykf

Reputation: 449

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

Upvotes: 1

Related Questions