Question

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

如何将<font>标记替换为<abbr>，以便输出就像这样。

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

Answer 1

这会将所有<font和</font替换为<abbr和</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")

Answer 2

查找任何p中的所有字体标记，并将其替换为带有样式属性和复制文本的abbr。

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

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

    font.replaceWith(abbr);
});

Answer 3

也许您可以使用getAttributes plugin复制您的属性：

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

注意：对不起，我没有测试过这个......

Answer 4

这应该可以解决问题。

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

Answer 5

我来了这个：

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

可能有一种更直接的方式，但这似乎有效。

用特定属性及其值替换Element

5 个答案: