Gol:

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

<code> ... </code>

Con:

<pre> ... </pre>

Mi solución:

Llegué a 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" (segundo, tercero, cuarto, etc.) con el contenido entre las etiquetas de "código" primero .

E.g.

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

Se convierte

<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.

105
jon 17 ago. 2011 a las 17:10

13 respuestas

La mejor respuesta

Puede pasar una función a .replaceWith [docsicsoft :

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

Dentro de la función, this se refiere al elemento procesado actualmente code.

Demo

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

$('code').replaceWith(function(){
    return $("<pre />").append($(this).contents());
});
156
Felix Kling 23 ago. 2011 a las 00:26

Puede usar la función html de jQuery. A continuación se muestra una muestra que reemplaza una etiqueta de código con una etiqueta previa mientras conserva 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 manteniendo todos los atributos de la etiqueta anterior.

0
Arnab C. 2 abr. 2015 a las 16:52

Es correcto que siempre obtenga los primeros contenidos de code, porque $('code').html() siempre se referirá al primer elemento, donde sea que lo use.

En su lugar, puede usar .each para 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.
});
26
pimvdb 17 ago. 2011 a las 13:39

Prueba esto:

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

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

});

http://jsfiddle.net/mTGhV/

12
Kokos 17 ago. 2011 a las 13:14

¿Qué te parece esto?

$('code').each(function () {
    $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );
});
11
Xavi 23 ago. 2011 a las 17:47

A partir de la respuesta de Félix.

$('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 etiquetas code en las etiquetas pre de reemplazo.

Editar: Esto reemplazará incluso aquellas etiquetas code que están dentro de las innerHTML de otras etiquetas 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');
6
tewathia 10 dic. 2013 a las 11:51
$('code').each(function(){
    $(this).replaceWith( "<pre>" + $(this).html()  + "</pre>" );
    });

La mejor y limpia manera.

0
Nimek 13 ago. 2013 a las 09:10

Si estuvieras usando JavaScript de vainilla, deberías:

  • Crea el nuevo elemento
  • Mover los elementos secundarios del elemento antiguo al elemento nuevo
  • Inserte el nuevo elemento antes del anterior.
  • 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 .innerHTML son destructive .

2
Salman A 23 abr. 2014 a las 04:21

Otra forma corta y fácil:

$('code').wrapInner('<pre />').contents();
2
Fabian von Ellerts 9 jul. 2018 a las 09:22

Complemento jquery, 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')
0
JagsSparrow 27 ene. 2016 a las 18:45

Esto es mucho mejor:

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

Aunque es cierto que la solución de Felix Kling es aproximadamente < a href = "http://jsperf.com/substituting-one-tag-for-another-with-jquery" rel = "noreferrer"> dos veces más rápido :

80
Community 23 may. 2017 a las 12:32

A partir de jQuery 1.4.2:

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

Luego puede seleccionar los nuevos elementos:

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

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

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

3
Simon 20 sep. 2012 a las 11:02

Todas las respuestas dadas aquí suponen (como indica el ejemplo de la 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 significa reemplazar una etiqueta ...? Esta es la solución:

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

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

    $( this ).replaceWith( content );
} );
0
patrick 16 jul. 2016 a las 11:16