Replacing the Element with specific attribute and its value

Question

<p>
lorem ipsum lorem ipsums <font style="background-color:yellow">ipsum</font> ipsume lorem
</p>

how to replace the <font> tag with <abbr> so the out put will be like this.

 <p>
    lorem ipsum lorem ipsums <abbr style="background-color:yellow">ipsum</abbr> ipsume lorem
    </p>

Answer 1

Finds all font tags within any p, and replaces it with an abbr with the style attribute and text copied over.

$("p font").each(function() {
    var font = $(this);

    var abbr = $("<abbr>", {
        style: font.attr("style"),
        text: font.text()
    });

    font.replaceWith(abbr);
});
​

Answer 2

This will replace all <font and </font with <abbr and </abbr.

var p = document.getElementsByTagName("p")[0]; // assume this is the first P in the document
var p.innerHTML = p.innerHTML.replace(/(<|<\/)font/g, "$1abbr")