Utiliser jQuery pour remplacer une balise par une autre

Objectif:

En utilisant jQuery, j'essaye de remplacer toutes les occurrences de:

<code> ... </code>

avec:

<pre> ... </pre>

Ma solution:

Je suis allé jusqu'à ce qui suit,

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

Le problème avec ma solution:

mais le problème est qu'il remplace tout ce qui se trouve entre les balises "code" (deuxième, troisième, quatrième, etc.) par le contenu entre les premières balises "code".

par exemple

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

devient

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

Je pense que j'ai besoin d'utiliser «ceci» et une sorte de fonction, mais j'ai peur d'apprendre encore et de ne pas vraiment comprendre comment reconstituer une solution.

Vous pouvez transmettre une fonction à .replaceWith ^[docs] :

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

À l'intérieur de la fonction, thisfait référence à l' codeélément actuellement traité .

DEMO

Mise à jour: il n'y a pas de grande différence de performances , mais dans le cas où les codeéléments ont d'autres enfants HTML, ajouter les enfants au lieu de les sérialiser semble plus correct:

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

C'est beaucoup plus agréable:

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

Certes, la solution de Felix Kling est environ deux fois plus rapide :

Il est vrai que vous obtiendrez toujours le codecontenu du premier , car il $('code').html()fera toujours référence au premier élément, où que vous l'utilisiez.

Au lieu de cela, vous pouvez utiliser .eachpour itérer sur tous les éléments et modifier chacun individuellement:

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

Essaye ça:

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

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

});

http://jsfiddle.net/mTGhV/

Que dis-tu de ça?

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

S'appuyant sur la réponse 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;
});

Cela reproduira les attributs des codebalises dans les prebalises de remplacement .

Modifier: Cela remplacera même les codebalises qui se trouvent à l'intérieur innerHTMLdes autres codebalises.

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

À partir de jQuery 1.4.2:

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

Vous pouvez ensuite sélectionner les nouveaux éléments:

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

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

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

Si vous utilisiez du JavaScript vanille, vous:

• Créer le nouvel élément
• Déplacez les enfants de l'ancien élément dans le nouvel élément
• Insérez le nouvel élément avant l'ancien
• Supprimer l'ancien élément

Voici l'équivalent jQuery de ce processus:

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

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

PS: Toutes les solutions qui utilisent .html()ou .innerHTMLsont destructives .

Un autre moyen court et facile:

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

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

Meilleure et propre manière.

Vous pouvez utiliser la fonction html de jQuery. Voici un exemple qui remplace une balise de code par une balise pré tout en conservant tous les attributs du code.

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

Cela pourrait fonctionner avec n'importe quel ensemble de balises d'élément html qui devaient être permutées tout en conservant tous les attributs de la balise précédente.

Fait jqueryplug - in, en maintenant les attributs aussi.

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

Usage:

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

Toutes les réponses données ici supposent (comme l'indique l'exemple de question) qu'il n'y a aucun attribut dans la balise. Si la réponse acceptée est exécutée sur ceci:

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

si sera remplacé par

<pre>A</pre>

Que faire si vous souhaitez également conserver les attributs - ce que signifierait le remplacement d'une balise ...? Voici la solution:

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

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

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