使用jQueryreplace一个标签与另一个

目标：

使用jQuery，我试图取代所有的事件：

<code> ... </code> 

有：

 <pre> ... </pre> 

我的解决scheme

我得到了以下，

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

我的解决scheme的问题：

但问题在于它将（第二，第三，第四等）“代码”标签与第一个 “代码”标签之间的内容全部replace掉​​。

例如

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

变

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

我认为我需要使用“这个”和某种function，但是我恐怕还在学习，并不知道如何拼凑解决scheme。

Answer 1

您可以将一个函数传递给.replaceWith ^[docs] ：

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

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

DEMO

更新： 没有什么大的性能差异 ，但是如果code元素有其他的HTML子元素，追加孩子而不是序列化他们感觉更正确：

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

Answer 2

这更好：

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

尽pipeFelix Kling的解决scheme的 速度大约快了一倍 ：

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

build立在费利克斯的答案。

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

这将重现replacepre标签中code标签的属性。

编辑：这将取代那些在其他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); });​ 

然后你可以select新的元素：

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

来源： http : //api.jquery.com/replaceWith/#comment-45493689

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

Answer 8

如果你使用的是香草JavaScript，你会：

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

这里是jQuery相当于这个过程：

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

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

PS：所有使用.html()或.innerHTML解决scheme都具有破坏性 。

Answer 9

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

最好和干净的方式。

Answer 10

你可以使用jQuery的html函数。 下面是一个例子，用一个pre标签代替一个代码标签，同时保留代码的所有属性。

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

这可以处理任何需要交换的html元素标记，同时保留前一个标记的所有属性。

Answer 11

制作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 12

这里给出的所有答案都假设（如问题示例所示）标记中没有任何属性。 如果接受的答案是这样运行的：

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

如果将被replace

 <pre>A</pre> 

如果你想保留这些属性，那么replace一个标签意味着什么？ 这是解决scheme：

 $("code").each( function(){ var content = $( "<pre>" ); $.each( this.attributes, function(){ content.attr( this.name, this.value ); } ); $( this ).replaceWith( content ); } );