Menggunakan jQuery untuk mengganti satu tag dengan yang lain

Tujuan:

Menggunakan jQuery, saya mencoba mengganti semua kemunculan:

<code> ... </code>

dengan:

<pre> ... </pre>

Solusi saya:

Saya sampai pada yang berikut,

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

Masalah dengan solusi saya:

tetapi masalahnya adalah ia mengganti semua yang ada di antara tag "kode" (kedua, ketiga, keempat, dll.) dengan konten di antara tag "kode" pertama .

misalnya

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

menjadi

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

Saya rasa saya perlu menggunakan "ini" dan semacam fungsi, tetapi saya khawatir saya masih belajar dan tidak benar-benar memahami cara menyusun solusi bersama.

Anda dapat meneruskan fungsi ke .replaceWith ^[docs] :

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

Di dalam fungsi, thismengacu pada codeelemen yang sedang diproses .

DEMO

Pembaruan: Tidak ada perbedaan performa yang besar , tetapi jika codeelemen memiliki turunan HTML lain, menambahkan turunan alih-alih membuat serialisasi dirasa lebih tepat:

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

Ini jauh lebih bagus:

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

Meskipun memang solusi Felix Kling kira-kira dua kali lebih cepat :

Benar bahwa Anda akan selalu mendapatkan konten pertama code, karena $('code').html()akan selalu mengacu pada elemen pertama, di mana pun Anda menggunakannya.

Sebaliknya, Anda dapat menggunakan .eachuntuk mengulang semua elemen dan mengubahnya satu per satu:

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

Coba ini:

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

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

});

http://jsfiddle.net/mTGhV/

Bagaimana dengan ini?

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

Membangun jawaban Felix.

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

Ini akan mereproduksi atribut codetag dalam penggantinyapre tag .

Sunting: Ini akan menggantikan bahkan codetag yang ada di dalam tag innerHTMLlain 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');

Mulai jQuery 1.4.2:

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

Anda kemudian dapat memilih elemen baru:

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

Sumber: http://api.jquery.com/replaceWith/#comment-45493689

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

Jika Anda menggunakan vanilla JavaScript, Anda akan:

• Buat elemen baru
• Pindahkan anak dari elemen lama ke elemen baru
• Masukkan elemen baru sebelum yang lama
• Hapus elemen lama

Berikut adalah jQuery yang setara dengan proses ini:

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

Ini adalah URL jsperf:
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

PS: Semua solusi yang digunakan .html()atau .innerHTMLyang merusak .

Cara singkat & mudah lainnya:

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

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

Cara terbaik dan bersih.

Anda bisa menggunakan fungsi html jQuery. Di bawah ini adalah contoh yang menggantikan tag kode dengan tag awal dengan tetap mempertahankan semua atribut kode.

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

Ini bisa bekerja dengan kumpulan tag elemen html apa pun yang perlu ditukar sambil mempertahankan semua atribut dari tag sebelumnya.

Membuat jqueryplugin, juga memelihara atribut.

$.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;
}

Pemakaian:

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

Semua jawaban yang diberikan di sini mengasumsikan (seperti yang ditunjukkan contoh pertanyaan) bahwa tidak ada atribut di tag. Jika jawaban yang diterima dijalankan ini:

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

jika akan diganti dengan

<pre>A</pre>

Bagaimana jika Anda ingin mempertahankan atribut juga - yang artinya mengganti tag ...? Inilah solusinya:

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

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

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