Utilizzo di jQuery per sostituire un tag con un altro

Obbiettivo:

Utilizzando jQuery, sto cercando di sostituire tutte le occorrenze di:

<code> ... </code>

con:

<pre> ... </pre>

La mia soluzione:

Sono arrivato fino a quanto segue,

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

Il problema con la mia soluzione:

ma il problema è che sta sostituendo tutto ciò che si trova tra i tag "code" (secondo, terzo, quarto, ecc.) con il contenuto tra i primi tag "code".

per esempio

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

diventa

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

Penso di aver bisogno di usare "questo" e una sorta di funzione, ma temo che sto ancora imparando e non capisco davvero come mettere insieme una soluzione.

Puoi passare una funzione a .replaceWith ^[docs] :

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

All'interno della funzione, thisfa riferimento codeall'elemento attualmente elaborato .

DEMO

Aggiornamento: non c'è una grande differenza di prestazioni , ma nel caso in cui gli codeelementi abbiano altri figli HTML, aggiungere i figli invece di serializzarli sembra essere più corretto:

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

Questo è molto più carino:

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

Anche se è vero che la soluzione di Felix Kling è circa il doppio più veloce :

È corretto che otterrai sempre il codecontenuto del primo , perché $('code').html()farà sempre riferimento al primo elemento, ovunque tu lo usi.

Invece, potresti usare .eachper iterare su tutti gli elementi e cambiarli individualmente:

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

Prova questo:

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

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

});

http://jsfiddle.net/mTGhV/

Cosa ne pensi di questo?

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

Basandosi sulla risposta di 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;
});

Ciò riprodurrà gli attributi dei codetag nei pretag sostitutivi .

Modifica: sostituirà anche quei codetag che si trovano all'interno innerHTMLdi altri codetag.

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

A partire da jQuery 1.4.2:

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

È quindi possibile selezionare i nuovi elementi:

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

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

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

Se stessi utilizzando JavaScript vanilla, dovresti:

• Crea il nuovo elemento
• Sposta i figli del vecchio elemento nel nuovo elemento
• Inserisci il nuovo elemento prima di quello vecchio
• Rimuovi il vecchio elemento

Ecco l'equivalente jQuery di questo processo:

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

Ecco l'URL jsperf:
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

PS: tutte le soluzioni che utilizzano .html()o .innerHTMLsono distruttive .

Un altro modo breve e facile:

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

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

Modo migliore e pulito.

Potresti usare la funzione html di jQuery. Di seguito è riportato un esempio che sostituisce un tag di codice con un tag pre conservando tutti gli attributi del codice.

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

Questo potrebbe funzionare con qualsiasi set di tag elemento html che necessitava di essere scambiato mantenendo tutti gli attributi del tag precedente.

jqueryPlugin realizzato , mantenendo anche gli attributi.

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

Uso:

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

Tutte le risposte fornite qui presuppongono (come indica l'esempio della domanda) che non ci siano attributi nel tag. Se la risposta accettata viene eseguita su questo:

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

se verrà sostituito con

<pre>A</pre>

E se volessi mantenere anche gli attributi, cosa significherebbe sostituire un tag ...? Questa è la soluzione:

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

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

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