Usando jQuery para reemplazar una etiqueta con otra

Objetivo:

Usando jQuery, estoy tratando de reemplazar todas las apariciones de:

<code> ... </code>

con:

<pre> ... </pre>

Mi solución:

Llegué tan lejos como lo siguiente,

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

El problema con mi solución:

pero el problema es que está reemplazando todo entre las etiquetas de "código" (segunda, tercera, cuarta, etc.) con el contenido entre las primeras etiquetas de "código".

p.ej

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

se convierte en

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

Creo que necesito usar "esto" y algún tipo de función, pero me temo que todavía estoy aprendiendo y realmente no entiendo cómo armar una solución.

Puede pasar una función a .replaceWith ^[docs] :

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

Dentro de la función, se thisrefiere al codeelemento procesado actualmente .

MANIFESTACIÓN

Actualización: No hay una gran diferencia de rendimiento , pero en caso de que los codeelementos tengan otros elementos secundarios HTML, agregar los elementos secundarios en lugar de serializarlos parece más correcto:

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

Esto es mucho mejor:

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

Aunque es cierto que la solución de Felix Kling es aproximadamente el doble de rápida :

Es correcto que siempre obtendrás el codecontenido del primero , porque$('code').html() siempre hará referencia al primer elemento, donde sea que lo uses.

En su lugar, puede usar .eachpara iterar sobre todos los elementos y cambiar cada uno 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.
});

Prueba esto:

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

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

});

http://jsfiddle.net/mTGhV/

¿Qué tal esto?

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

Construyendo sobre la respuesta de 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;
});

Esto reproducirá los atributos de las codeetiquetas en el reemplazo.pre etiquetas de .

Editar: esto reemplazará incluso las codeetiquetas que están dentro innerHTMLde otras codeetiquetas.

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 partir de jQuery 1.4.2:

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

A continuación, puede seleccionar los nuevos elementos:

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

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

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

Si estuviera usando JavaScript vainilla, haría lo siguiente:

• Crea el nuevo elemento
• Mueve los hijos del elemento antiguo al nuevo elemento.
• Inserte el nuevo elemento antes que el antiguo
• Eliminar el elemento antiguo

Aquí está jQuery equivalente de este proceso:

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

Aquí está la URL de jsperf:
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

PD: Todas las soluciones que usan .html()o .innerHTMLson destructivas .

Otra forma corta y fácil:

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

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

Mejor y limpia manera.

Puede usar la función html de jQuery. A continuación se muestra una muestra que reemplaza una etiqueta de código con una preetiqueta conservando todos los atributos del código.

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

Esto podría funcionar con cualquier conjunto de etiquetas de elementos html que debían intercambiarse conservando todos los atributos de la etiqueta anterior.

jqueryComplemento hecho , manteniendo los atributos también.

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

Todas las respuestas dadas aquí asumen (como indica el ejemplo de pregunta) que no hay atributos en la etiqueta. Si la respuesta aceptada se ejecuta en esto:

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

si será reemplazado con

<pre>A</pre>

¿Qué sucede si también desea conservar los atributos, que es lo que significaría reemplazar una etiqueta ...? Esta es la solucion:

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

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

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