使用 jQuery 將一個標簽替換為另一個

Question

目標：

使用 jQuery，我試圖替換所有出現的：

<code> ... </code>

和：

<pre> ... </pre>

我的解決方案：

我得到了以下，

$('code').replaceWith( "<pre>" + $('code').html() + "</pre>" );

我的解決方案的問題：

但問題是它正在用第一個“代碼”標簽之間的內容替換（第二、第三、第四等）“代碼”標簽之間的所有內容。

例如

<code> A </code>
<code> B </code>
<code> C </code>

變成

<pre> A </pre>
<pre> A </pre>
<pre> A </pre>

我想我需要使用“這個”和某種 function 但恐怕我還在學習並且並不真正了解如何將解決方案拼湊在一起。

Answer 1

您可以將 function 傳遞給.replaceWith ^[docs] ：

$('code').replaceWith(function(){
    return $("<pre />", {html: $(this).html()});
});

在 function 內部， this是指當前處理的code元素。

演示

更新： 沒有大的性能差異，但如果code元素有其他 HTML 孩子，追加孩子而不是序列化他們感覺更正確：

$('code').replaceWith(function(){
    return $("<pre />").append($(this).contents());
});

Answer 2

這要好得多：

$('code').contents().unwrap().wrap('<pre/>');

雖然不可否認， Felix Kling 的解決方案大約是 兩倍快：

Answer 3

您將始終獲得第一個code的內容是正確的，因為$('code').html()將始終引用第一個元素，無論您在何處使用它。

相反，您可以使用.each遍歷所有元素並單獨更改每個元素：

$('code').each(function() {
    $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );
    // this function is executed for all 'code' elements, and
    // 'this' refers to one element from the set of all 'code'
    // elements each time it is called.
});

Answer 4

嘗試這個：

$('code').each(function(){

    $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );

});

http://jsfiddle.net/mTGhV/

Answer 5

這個怎么樣？

$('code').each(function () {
    $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );
});

Answer 6

建立在菲利克斯的回答之上。

$('code').replaceWith(function() {
    var replacement = $('<pre>').html($(this).html());
    for (var i = 0; i < this.attributes.length; i++) {
        replacement.attr(this.attributes[i].name, this.attributes[i].value);
    }
    return replacement;
});

這將重現替換pre標簽中code標簽的屬性。

編輯：這將替換其他code標簽的innerHTML內的那些code標簽。

function replace(thisWith, that) {
    $(thisWith).replaceWith(function() {
        var replacement = $('<' + that + '>').html($(this).html());
        for (var i = 0; i < this.attributes.length; i++) {
            replacement.attr(this.attributes[i].name, this.attributes[i].value);
        }
        return replacement;
    });
    if ($(thisWith).length>0) {
        replace(thisWith, that);
    }
}

replace('code','pre');

Answer 7

從 jQuery 1.4.2 開始：

$('code').replaceWith(function(i,html) {
  return $('<pre />').html(html);
});​

然后你可以 select 新元素：

$('pre').css('color','red');

來源： http://api.jquery.com/replaceWith/#comment-45493689

jsFiddle： http://jsfiddle.net/k2swf/16/

Answer 8

如果您使用的是香草 JavaScript，您將：

• 創建新元素
• 將舊元素的子元素移動到新元素中
• 在舊元素之前插入新元素
• 刪除舊元素

這是此過程的等效 jQuery：

$("code").each(function () {
    $("<pre></pre>").append(this.childNodes).insertBefore(this);
    $(this).remove();
});

這是jsperf URL：
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

PS：所有使用.html()或.innerHTML的解決方案都是破壞性的。

Answer 9

另一個簡短而簡單的方法：

$('code').wrapInner('<pre />').contents();

Answer 10

這里給出的所有答案都假設（如問題示例所示）標簽中沒有屬性。 如果對此運行接受的答案：

<code class='cls'>A</code>

如果將替換為

<pre>A</pre>

如果您還想保留屬性怎么辦 - 這就是替換標簽的意思......？ 這是解決方案：

$("code").each( function(){
    var content = $( "<pre>" );

    $.each( this.attributes, function(){ 
         content.attr( this.name, this.value );
    } );

    $( this ).replaceWith( content );
} );

Answer 11

$('code').each(function(){
    $(this).replaceWith( "<pre>" + $(this).html()  + "</pre>" );
    });

最好和干凈的方式。

Answer 12

您可以使用 jQuery 的 html function。 下面是一個示例，它用 pre 標記替換了代碼標記，同時保留了代碼的所有屬性。

    $('code').each(function() {
        var temp=$(this).html();
        temp=temp.replace("code","pre");
        $(this).html(temp);
    });

這適用於任何需要交換的 html 元素標簽集，同時保留前一個標簽的所有屬性。

Answer 13

制作jquery插件，同時維護屬性。

$.fn.renameTag = function(replaceWithTag){
  this.each(function(){
        var outerHtml = this.outerHTML;
        var tagName = $(this).prop("tagName");
        var regexStart = new RegExp("^<"+tagName,"i");
        var regexEnd = new RegExp("</"+tagName+">$","i")
        outerHtml = outerHtml.replace(regexStart,"<"+replaceWithTag)
        outerHtml = outerHtml.replace(regexEnd,"</"+replaceWithTag+">");
        $(this).replaceWith(outerHtml);
    });
    return this;
}

用法：

$('code').renameTag('pre')