ใช้ jQuery เพื่อแทนที่แท็กหนึ่งด้วยอีกแท็ก

เป้าหมาย:

ใช้ 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>

ฉันคิดว่าฉันต้องใช้ "this" และฟังก์ชันบางอย่าง แต่ฉันกลัวว่าฉันยังคงเรียนรู้และไม่เข้าใจวิธีการแก้ปัญหาเข้าด้วยกัน

คุณสามารถส่งผ่านฟังก์ชันไปยัง.replaceWith ^[docs] :

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

ภายในฟังก์ชันthisหมายถึงcodeองค์ประกอบที่ประมวลผลในปัจจุบัน

การสาธิต

อัปเดต:มีไม่แตกต่างกันประสิทธิภาพขนาดใหญ่แต่ในกรณีที่codeองค์ประกอบมีลูก HTML อื่น ๆ ผนวกเด็กแทน serializing พวกเขารู้สึกมีความถูกต้องมากขึ้น:

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

นี่ดีกว่ามาก:

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

แม้ว่าวิธีการแก้ปัญหาของ Felix Klingจะเร็วกว่าประมาณสองเท่า :

ถูกต้องที่คุณจะได้รับ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.
});

ลองสิ่งนี้:

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

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

});

http://jsfiddle.net/mTGhV/

แล้วเรื่องนี้ล่ะ?

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

สร้างคำตอบของเฟลิกซ์

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

สิ่งนี้จะสร้างแอตทริบิวต์ของcodeแท็กในการแทนที่preแท็ก

แก้ไข: สิ่งนี้จะแทนที่แม้กระทั่ง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');

ณ jQuery 1.4.2:

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

จากนั้นคุณสามารถเลือกองค์ประกอบใหม่:

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

ที่มา: http://api.jquery.com/replaceWith/#comment-45493689

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

หากคุณใช้วานิลลา 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มีการทำลายล้าง

อีกวิธีที่สั้นและง่าย:

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

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

วิธีที่ดีที่สุดและสะอาด

คุณสามารถใช้ฟังก์ชัน html ของ jQuery ด้านล่างนี้คือตัวอย่างที่แทนที่แท็กโค้ดด้วยแท็กก่อนหน้าในขณะที่ยังคงคุณสมบัติทั้งหมดของโค้ดไว้

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

สิ่งนี้สามารถใช้ได้กับชุดของแท็กองค์ประกอบ html ที่จำเป็นต้องสลับในขณะที่ยังคงรักษาแอตทริบิวต์ทั้งหมดของแท็กก่อนหน้านี้

ทำ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')

คำตอบทั้งหมดที่ให้ไว้ที่นี่ถือว่า (ตามที่ตัวอย่างคำถามระบุ) ว่าไม่มีแอตทริบิวต์ในแท็ก หากคำตอบที่ยอมรับถูกเรียกใช้ในสิ่งนี้:

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