CODEWITHSUNDEEP
javascriptjqueryhtml
Wasim Shaikh
Wasim Shaikh

Reputation: 7030

Replacing the Element with specific attribute and its value

<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>

Upvotes: 3

Views: 148

Answers (5)

Anurag
Anurag

Reputation: 141909

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

Upvotes: 2

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146630

I've come with this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
--></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
$(function(){
    $("font").replaceWith(function(){
        var font = $(this);
        return $("<abbr></abbr>")
            .attr("style", font.attr("style") )
            .append( font.contents() );
    });
});
//--></script>
</head>
<body>

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

</body>
</html>

There may be a more straightforward way but this seems to work.

Upvotes: 1

partoa
partoa

Reputation: 900

This should do the trick.

$('p').each(
     function(){
          $(this).html($(this).html().replace(/(<|<\/)font/g, "$1abbr"));
     }
);

Upvotes: 1

Reto Aebersold
Reto Aebersold

Reputation: 16644

Maybe you can use the getAttributes plugin to copy your attributes:

var attributes =$.getAttributes($(YOURTAG));
$(YOURTAG).replaceWith($('<abbr>' + YOURTAG.innerHTML + '</abbr>');
$(YOURTAG).attr(attributes);

Note: I'm sorry but I didn't test this one...

Upvotes: 1

Sean Kinsey
Sean Kinsey

Reputation: 38046

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")

Upvotes: 2

Related Questions