Sử dụng jQuery để thay thế một thẻ này bằng một thẻ khác

Mục tiêu:

Sử dụng jQuery, tôi đang cố gắng thay thế tất cả các lần xuất hiện của:

<code> ... </code>

với:

<pre> ... </pre>

Giải pháp của tôi:

Tôi đã đi xa như sau,

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

Vấn đề với giải pháp của tôi:

nhưng vấn đề là nó thay thế mọi thứ giữa các thẻ "mã" (thứ hai, thứ ba, thứ tư, v.v.) bằng nội dung giữa các thẻ "mã" đầu tiên .

ví dụ

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

trở thành

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

Tôi nghĩ rằng tôi cần phải sử dụng "this" và một số loại hàm nhưng tôi sợ rằng tôi vẫn đang học và không thực sự hiểu cách ghép một giải pháp với nhau.

Bạn có thể chuyển một hàm vào .replaceWith ^[docs] :

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

Bên trong hàm, thisđề cập đến codephần tử hiện đang được xử lý .

BẢN GIỚI THIỆU

Cập nhật: Không có sự khác biệt lớn về hiệu suất , nhưng trong trường hợp các codephần tử có các phần tử HTML khác, việc nối các phần tử con thay vì nối tiếp chúng sẽ cảm thấy chính xác hơn:

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

Cái này đẹp hơn nhiều:

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

Mặc dù phải thừa nhận là giải pháp Felix Kling của xấp xỉ nhanh gấp hai lần :

Đúng là bạn sẽ luôn nhận được codenội dung của $('code').html()phần tử đầu tiên , vì sẽ luôn tham chiếu đến phần tử đầu tiên, dù bạn sử dụng nó ở đâu.

Thay vào đó, bạn có thể sử dụng .eachđể lặp lại tất cả các phần tử và thay đổi từng phần tử riêng lẻ:

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

Thử cái này:

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

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

});

http://jsfiddle.net/mTGhV/

Còn cái này thì sao?

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

Dựa trên câu trả lời của 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;
});

Điều này sẽ tái tạo các thuộc tính của các codethẻ trong các prethẻ thay thế .

Chỉnh sửa: Điều này sẽ thay thế ngay cả những codethẻ nằm bên trong innerHTMLcác codethẻ khác .

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

Kể từ jQuery 1.4.2:

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

Sau đó, bạn có thể chọn các phần tử mới:

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

Nguồn: http://api.jquery.com/replaceWith/#comment-45493689

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

Nếu bạn đang sử dụng JavaScript vani, bạn sẽ:

• Tạo phần tử mới
• Di chuyển phần tử con của phần tử cũ vào phần tử mới
• Chèn phần tử mới trước phần tử cũ
• Xóa phần tử cũ

Đây là jQuery tương đương với quá trình này:

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

Đây là URL jsperf:
http://jsperf.com/substituting-one-tag-for-aosystem-with-jquery/7

PS: Tất cả các giải pháp sử dụng .html()hoặc .innerHTMLlà phá hoại .

Một cách ngắn gọn và dễ dàng khác:

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

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

Cách tốt nhất và sạch sẽ.

Bạn có thể sử dụng hàm html của jQuery. Dưới đây là một mẫu thay thế thẻ mã bằng thẻ trước trong khi vẫn giữ lại tất cả các thuộc tính của mã.

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

Điều này có thể hoạt động với bất kỳ tập hợp thẻ phần tử html nào cần được hoán đổi trong khi vẫn giữ lại tất cả các thuộc tính của thẻ trước đó.

Đã tạo jqueryplugin, cũng duy trì các thuộc tính.

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

Sử dụng:

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

Tất cả các câu trả lời được đưa ra ở đây giả định (như ví dụ câu hỏi chỉ ra) rằng không có thuộc tính nào trong thẻ. Nếu câu trả lời được chấp nhận được chạy trên này:

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

nếu sẽ được thay thế bằng

<pre>A</pre>

Điều gì xảy ra nếu bạn muốn giữ lại các thuộc tính - việc thay thế một thẻ sẽ có nghĩa là gì ...? Đây là giải pháp:

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

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

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