web-dev-qa-db-ja.com

jQueryを使用して1つのタグを別のタグに置き換える

ゴール：

JQueryを使用して、私はすべての出現を置き換えようとしています：

<code> ... </code>

で：

<pre> ... </pre>

私の解決策：

私は次のようになりました、

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

私のソリューションの問題：

ただし、問題は、（2番目、3番目、4番目など）「code」タグの間のすべてをfirst "code"タグの間のコンテンツに置き換えることです。

例えば.

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

になる

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

「これ」とある種の機能を使用する必要があると思いますが、私はまだ学習中であり、ソリューションをつなぎ合わせる方法を本当に理解していないと思います。

javascriptjqueryreplace
97
jon

関数を .replaceWithに渡すことができます[ドキュメント] ：

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

関数内で、thisは現在処理されているcode要素を参照します。

[〜＃〜] demo [〜＃〜]

更新：大きなパフォーマンスの違いはありません がありますが、code要素に他のHTML子がある場合、子を直列化する代わりに追加する方がより正確に感じます：

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

これははるかに良いです：

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

確かに Felix Klingのソリューション はおよそ 2倍の速さ ：

79
Jens Roland

$('code').html()は常に最初の要素を参照するため、最初のcodeのコンテンツを常に取得するのは正しいことです。

代わりに、 .each すべての要素を反復処理し、各要素を個別に変更します。

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

これを試して：

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

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

});

http://jsfiddle.net/mTGhV/

11
Kokos

これはどう？

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

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

これにより、codeタグの属性が置換preタグに再現されます。

編集：これは、他のcodeタグのinnerHTML内にある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');
5
tewathia

JQuery 1.4.2以降：

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

その後、新しい要素を選択できます。

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

ソース： http://api.jquery.com/replaceWith/#comment-45493689

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

2
Simon

Vanilla JavaScriptを使用している場合：

  • 新しい要素を作成する
  • 古い要素の子を新しい要素に移動します
  • 古い要素の前に新しい要素を挿入します
  • 古い要素を削除する

このプロセスに相当するjQueryは次のとおりです。

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

Jsperf URLは次のとおりです。
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

PS：.html()または_.innerHTML_を使用するすべてのソリューションは、destructive。

1
Salman A

別の短く簡単な方法：

$('code').wrapInner('<pre />').contents();
1
Fabian von Ellerts

JQueryのhtml関数を使用できます。以下は、コードのすべての属性を保持しながら、コードタグをpreタグに置き換えるサンプルです。

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

これは、前のタグのすべての属性を保持しながら、交換する必要があるhtml要素タグのセットで機能します。

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

最良かつクリーンな方法。

0
Nimek

ここで与えられるすべての回答は、（質問の例が示すように）タグに属性がないことを前提としています。受け入れられた答えがこれで実行される場合：

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

に置き換えられる場合

<pre>A</pre>

属性も保持したい場合はどうしますか。タグを置き換えるとはどういうことですか？これが解決策です。

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

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

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

jqueryプラグインを作成し、属性も維持します。

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

使用法：

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