Question

目标：

使用jQuery，我试图替换所有出现的：

<code> ... </code>

使用：

<pre> ... </pre>

我的解决方案：

我得到了以下内容，

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

我的解决方案存在问题：

但问题在于它正在替换（第二，第三，第四等）“代码”标签之间的所有内容以及第一个“代码”标签之间的内容。

e.g。

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

变为

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

我认为我需要使用“this”和某种功能，但我担心我还在学习，并且不太懂得如何将解决方案拼凑在一起。

Answer 1

您可以将功能传递给.replaceWith ^[docs]：

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

在函数内部，this引用当前处理的code元素。

DEMO

更新：有no big performance difference，但如果code个元素包含其他HTML子元素，那么追加子元素而不是序列化它们会感觉更正确：

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

Answer 2

这样更好：

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

虽然可以肯定Felix Kling's solution约为twice as fast：

Answer 3

您始终可以获得第一个code内容，这是正确的，因为$('code').html()将始终引用第一个元素，无论您在何处使用它。

相反，您可以使用.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.
});

Answer 4

试试这个：

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

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

});

http://jsfiddle.net/mTGhV/

Answer 5

这个怎么样？

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

Answer 6

建立菲利克斯的答案。

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

Answer 7

从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/

Answer 8

如果你使用的是vanilla JavaScript，你会：

创建新元素
将旧元素的子元素移动到新元素
在旧元素之前插入新元素
删除旧元素

这是jQuery相当于这个过程：

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

这是jsperf网址：
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

PS：使用.html()或.innerHTML的所有解决方案都是 破坏性 。

Answer 9

另一种简便的方法：

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

Answer 10

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

最好和干净的方式。

Answer 11

您可以使用jQuery的html功能。下面是一个示例，它使用pre标签替换代码标记，同时保留代码的所有属性。

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

这可以与任何需要交换的html元素标签一起使用，同时保留前一个标签的所有属性。

Answer 12

制作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')

Answer 13

此处给出的所有答案都假设（如问题示例所示）标签中没有属性。如果接受的答案是：

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

使用jQuery将一个标签替换为另一个标签

目标：

我的解决方案：

我的解决方案存在问题：

13 个答案: