java 替换替换a标签,javascript - 使用jQuery将一个标签替换为另一个标签

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

目标：

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

...

有：

 ... 

我的解决方案

我得到了以下，

$('code').replaceWith( "

" + $('code').html() + "

" );

我的解决方案的问题：

但问题是，它正在用第一个“代码”标签之间的内容替换(第二，第三，第四等)“代码”标签之间的所有内容。

例如

A

B

C

变

 A 

 A 

 A 

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

13个解决方案

149 votes

您可以将函数传递给code [docs]：

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

return $("

", {html: $(this).html()});

});

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

DEMO

更新：没有很大的性能差异，但是如果code元素具有其他HTML子元素，则附加子元素而不是序列化它们会感觉更正确：

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

return $("

").append($(this).contents());

});

Felix Kling answered 2019-08-08T13:33:16Z

78 votes

这更好：

$('code').contents().unwrap().wrap('

');

虽然Felix Kling的解决方案速度大约是其两倍：

Jens Roland answered 2019-08-08T13:33:50Z

25 votes

你总是会得到第一个.each的内容是正确的，因为$('code').html()总是会引用第一个元素，无论你在哪里使用它。

相反，您可以使用.each迭代所有元素并单独更改每个元素：

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

$(this).replaceWith( "

" + $(this).html() + "

" );

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

});

pimvdb answered 2019-08-08T13:34:23Z

11 votes

试试这个：

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

$(this).replaceWith( "

" + $(this).html() + "

" );

});

[http://jsfiddle.net/mTGhV/]

Kokos answered 2019-08-08T13:34:52Z

10 votes

这个怎么样？

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

$(this).replaceWith( "

" + $(this).html() + "

" );

});

Tae-Sung Shin answered 2019-08-08T13:35:14Z

5 votes

建立菲利克斯的答案。

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

var replacement = $('

').html($(this).html());

for (var i = 0; i < this.attributes.length; i++) {

replacement.attr(this.attributes[i].name, this.attributes[i].value);

}

return replacement;

});

这将在替换innerHTML标签中重现code标签的属性。

编辑：这将替换其他code标签的innerHTML内的那些code标签。

function replace(thisWith, that) {

$(thisWith).replaceWith(function() {

var replacement = $('').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');

tewathia answered 2019-08-08T13:35:56Z

2 votes

从jQuery 1.4.2开始：

$('code').replaceWith(function(i,html) {

return $('

').html(html);

});​

然后，您可以选择新元素：

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

资料来源：[http://api.jquery.com/replaceWith/#comment-45493689]

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

Simon answered 2019-08-08T13:36:45Z

1 votes

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

创建新元素

将旧元素的子元素移动到新元素中

在旧元素之前插入新元素

删除旧元素

这是jQuery相当于这个过程：

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

$("

").append(this.childNodes).insertBefore(this);

$(this).remove();

});

这是jsperf URL：

[http://jsperf.com/substituting-one-tag-for-another-with-jquery/7]

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

Salman A answered 2019-08-08T13:38:14Z

1 votes

另一个简短的＆amp; 简单的方法：

$('code').wrapInner('

').contents();

Fabian von Ellerts answered 2019-08-08T13:38:43Z

0 votes

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

$(this).replaceWith( "

" + $(this).html()  + "

" );

});

最好，最干净的方式。

Nimek answered 2019-08-08T13:39:19Z

0 votes

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

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

var temp=$(this).html();

temp=temp.replace("code","pre");

$(this).html(temp);

});

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

Arnab C. answered 2019-08-08T13:39:55Z

0 votes

制作jquery插件，同时维护属性。

$.fn.renameTag = function(replaceWithTag){

this.each(function(){

var outerHtml = this.outerHTML;

var tagName = $(this).prop("tagName");

var regexStart = new RegExp("^

var regexEnd = new RegExp(""+tagName+">$","i")

outerHtml = outerHtml.replace(regexStart,"

outerHtml = outerHtml.replace(regexEnd,""+replaceWithTag+">");

$(this).replaceWith(outerHtml);

});

return this;

}

用法：

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

JagsSparrow answered 2019-08-08T13:40:26Z

0 votes

这里给出的所有答案都假定(如问题示例所示)标签中没有属性。 如果接受的答案是：

A

如果将被取代

A

如果你想保留属性怎么办 - 替换标签的意思是什么......？ 这是解决方案：

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

var content = $( "

" );

$.each( this.attributes, function(){

content.attr( this.name, this.value );

} );

$( this ).replaceWith( content );

} );

patrick answered 2019-08-08T13:41:10Z