Verwenden von jQuery zum Ersetzen eines Tags durch ein anderes

Tor:

Mit jQuery versuche ich, alle Vorkommen von zu ersetzen:

<code> ... </code>

mit:

<pre> ... </pre>

Meine Lösung:

Ich bin so weit gekommen,

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

Das Problem mit meiner Lösung:

Das Problem ist jedoch, dass alles zwischen den (zweiten, dritten, vierten usw.) "Code" -Tags durch den Inhalt zwischen den ersten "Code" -Tags ersetzt wird.

z.B

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

wird

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

Ich denke, ich muss "dies" und irgendeine Art von Funktion verwenden, aber ich fürchte, ich lerne noch und verstehe nicht wirklich, wie man eine Lösung zusammensetzt.

Sie können eine Funktion an .replaceWith ^{[docs] übergeben} :

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

thisBezieht sich innerhalb der Funktion auf das aktuell verarbeitete codeElement.

DEMO

Update: Es gibt keinen großen Leistungsunterschied , aber falls die codeElemente andere HTML-Kinder haben, scheint es korrekter zu sein, die Kinder anzuhängen, anstatt sie zu serialisieren:

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

Das ist viel schöner:

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

Zugegeben, die Lösung von Felix Kling ist ungefähr doppelt so schnell :

Es ist richtig, dass Sie immer den codeInhalt des ersten erhalten , da er $('code').html()sich immer auf das erste Element bezieht, wo immer Sie es verwenden.

Stattdessen können Sie .eachalle Elemente durchlaufen und jedes einzeln ändern:

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

Versuche dies:

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

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

});

http://jsfiddle.net/mTGhV/

Wie wäre es damit?

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

Aufbauend auf Felix 'Antwort.

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

Dadurch werden die Attribute der codeTags in den Ersatz- preTags reproduziert .

Bearbeiten: Dies ersetzt auch die codeTags, die sich innerHTMLin anderen codeTags befinden.

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

Ab jQuery 1.4.2:

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

Sie können dann die neuen Elemente auswählen:

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

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

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

Wenn Sie Vanille-JavaScript verwenden würden, würden Sie:

• Erstellen Sie das neue Element
• Verschieben Sie die untergeordneten Elemente des alten Elements in das neue Element
• Fügen Sie das neue Element vor dem alten ein
• Entfernen Sie das alte Element

Hier ist das jQuery-Äquivalent zu diesem Prozess:

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

Hier ist die jsperf-URL:
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

PS: Alle Lösungen , die Verwendung .html()oder .innerHTMLsind zerstörerisch .

Ein weiterer kurzer und einfacher Weg:

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

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

Beste und saubere Art und Weise.

Sie können die HTML-Funktion von jQuery verwenden. Unten finden Sie ein Beispiel, bei dem ein Code-Tag durch ein Pre-Tag ersetzt wird, wobei alle Attribute des Codes beibehalten werden.

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

Dies kann mit jedem Satz von HTML-Element-Tags funktionieren, die ausgetauscht werden müssen, während alle Attribute des vorherigen Tags beibehalten werden.

Hergestellt jqueryPlugin, Pflege auch Attribute.

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

Verwendung:

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

Alle hier gegebenen Antworten setzen voraus (wie das Fragenbeispiel zeigt), dass das Tag keine Attribute enthält. Wenn die akzeptierte Antwort darauf ausgeführt wird:

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

if wird ersetzt durch

<pre>A</pre>

Was ist, wenn Sie auch die Attribute behalten möchten - was würde das Ersetzen eines Tags bedeuten ...? Das ist die Lösung:

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

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

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