Używanie jQuery do zamiany jednego tagu na inny

Cel:

Używając jQuery, próbuję zamienić wszystkie wystąpienia:

<code> ... </code>

z:

<pre> ... </pre>

Moje rozwiązanie:

Dotarłem do następujących,

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

Problem z moim rozwiązaniem:

ale problem polega na tym, że zastępuje wszystko między tagami „kod” (drugi, trzeci, czwarty itd.) zawartością między pierwszymi tagami „kod”.

na przykład

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

staje się

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

Myślę, że muszę użyć „tego” i jakiejś funkcji, ale obawiam się, że wciąż się uczę i nie bardzo rozumiem, jak połączyć rozwiązanie.

Możesz przekazać funkcję do .replaceWith ^[docs] :

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

Wewnątrz funkcji thisodnosi się do aktualnie przetwarzanego codeelementu.

PRÓBNY

Aktualizacja: nie ma dużej różnicy w wydajności , ale w przypadku, gdy codeelementy mają inne elementy podrzędne HTML, dołączanie elementów podrzędnych zamiast ich serializacji wydaje się być bardziej poprawne:

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

To jest o wiele przyjemniejsze:

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

Chociaż trzeba przyznać, że rozwiązanie Felixa Klinga jest około dwa razy szybsze :

To prawda, że ​​zawsze otrzymasz codezawartość pierwszego , ponieważ $('code').html()zawsze będzie odnosić się do pierwszego elementu, gdziekolwiek go użyjesz.

Zamiast tego możesz użyć .eachiteracji po wszystkich elementach i zmienić każdy z nich indywidualnie:

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

Spróbuj tego:

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

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

});

http://jsfiddle.net/mTGhV/

Co powiesz na to?

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

Opierając się na odpowiedzi Felixa.

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

Spowoduje to odtworzenie atrybutów codetagów w pretagach zastępczych .

Edycja: spowoduje to zastąpienie nawet tych codetagów, które znajdują się wewnątrz innerHTMLinnych codetagów.

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

Od jQuery 1.4.2:

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

Następnie możesz wybrać nowe elementy:

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

Źródło: http://api.jquery.com/replaceWith/#comment-45493689

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

Gdybyś używał waniliowego JavaScript, to:

• Utwórz nowy element
• Przenieś elementy potomne starego elementu do nowego elementu
• Wstaw nowy element przed starym
• Usuń stary element

Oto odpowiednik tego procesu w jQuery:

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

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

PS: Wszystkie rozwiązania, które wykorzystują .html()lub .innerHTMLsą destrukcyjne .

Kolejny krótki i łatwy sposób:

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

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

Najlepszy i czysty sposób.

Możesz użyć funkcji html jQuery. Poniżej znajduje się próbka polegająca na zamianie znacznika kodowego na znacznik wstępny, przy jednoczesnym zachowaniu wszystkich atrybutów kodu.

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

Może to działać z dowolnym zestawem znaczników elementów HTML, które trzeba było zamienić, zachowując wszystkie atrybuty poprzedniego znacznika.

Stworzono jquerywtyczkę, zachowując również atrybuty.

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

Stosowanie:

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

Wszystkie podane tutaj odpowiedzi zakładają (jak wskazuje przykład pytania), że w tagu nie ma atrybutów. Jeśli zaakceptowana odpowiedź zostanie uruchomiona na tym:

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

jeśli zostanie zastąpiony

<pre>A</pre>

Co jeśli chcesz zachować również atrybuty - co oznaczałoby zastąpienie tagu ...? Oto rozwiązanie:

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

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

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