Usando jQuery para substituir uma tag por outra

Objetivo:

Usando jQuery, estou tentando substituir todas as ocorrências de:

<code> ... </code>

com:

<pre> ... </pre>

Minha solução:

Eu cheguei até o seguinte,

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

O problema com minha solução:

mas o problema é que ele está substituindo tudo entre as (segunda, terceira, quarta, etc) tags de "código" pelo conteúdo entre as primeiras tags de "código".

por exemplo

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

torna-se

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

Acho que preciso usar "isso" e algum tipo de função, mas ainda estou aprendendo e não entendo realmente como montar uma solução.

Você pode passar uma função para .replaceWith ^[documentos] :

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

Dentro da função, thisrefere-se ao codeelemento processado atualmente .

DEMO

Atualização: não há grande diferença de desempenho , mas caso os codeelementos tenham outros filhos HTML, anexar os filhos em vez de serializá-los parece ser mais correto:

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

Isso é muito melhor:

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

Embora reconhecidamente a solução de Felix Kling seja aproximadamente duas vezes mais rápida :

É correto que você obterá sempre o codeconteúdo do primeiro , pois $('code').html()sempre se referirá ao primeiro elemento, onde quer que o use.

Em vez disso, você pode usar .eachpara iterar todos os elementos e alterar cada um 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.
});

Experimente isto:

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

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

});

http://jsfiddle.net/mTGhV/

Que tal agora?

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

Construindo a resposta 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;
});

Isso reproduzirá os atributos das codetags nas pretags de substituição .

Editar: Isso substituirá até mesmo as codetags que estão dentro innerHTMLde outras codetags.

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 do jQuery 1.4.2:

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

Você pode então selecionar os novos elementos:

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

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

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

Se você estivesse usando o JavaScript vanilla, você:

• Crie o novo elemento
• Mova os filhos do elemento antigo para o novo elemento
• Insira o novo elemento antes do antigo
• Remova o elemento antigo

Aqui está o equivalente em jQuery deste processo:

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

Aqui está o URL do jsperf:
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

PS: Todas as soluções que usam .html()ou .innerHTMLsão destrutivas .

Outra maneira curta e fácil:

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

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

Maneira melhor e limpa.

Você pode usar a função html do jQuery. Abaixo está um exemplo que substitui uma tag de código por uma tag pre, mantendo todos os atributos do código.

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

Isso poderia funcionar com qualquer conjunto de tags de elemento html que precisassem ser trocadas enquanto retinham todos os atributos da tag anterior.

jqueryPlugin feito , mantendo também atributos.

$.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 as respostas fornecidas aqui presumem (como indica o exemplo da pergunta) que não há atributos na tag. Se a resposta aceita for executada neste:

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

se será substituído por

<pre>A</pre>

E se você quiser manter os atributos também - que é o que significaria substituir uma tag ...? Esta é a solução:

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

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

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