如何使用jQuery取消文本的包装？

Question

如何使用jQuery从HTML标签中取消文本包装？

例如，如何将以下HTML转换为：

<p>A <i>sentence</i> with <b>bold words</b>.</p>

转换为纯文本（即移除加粗标签）

<p>A <i>sentence</i> with bold words.</p>

如何仅使用jQuery而不使用正则表达式？

- czuk

Answer 1

你可以这样做：

  $("b").each(function() {
    $(this).replaceWith(this.childNodes);
  });

注意：这将保留您在其中的任何HTML，而.text（）可能会对其进行转换。

如果您只想完全去除<b></b>，则可以在jQuery 1.4+中更轻松地使用Cheeso的答案。

$("p").html(function(i,h){ return h.replace(/<b>/g,'').replace(/<\/b>/g,''); }); 

- Nick Craver

---

这在移除未包含在其他元素中的文本的锚元素（或任何其他父元素）时特别有用，此情况下unwrap方法无法使用。虽然“包装和取消包装”方法适用于我刚才描述的情况，但它需要添加和保留诸如<span> </span>之类的标记。 - Dominor Novus

Answer 2

我越来越喜欢先使用wrapInner再使用unwrap的方法。

例如，如果你想要取消超链接的包裹

<a id="anId" href="#">sample text</a>

然后您可以通过以下方式取消超链接:

$('#anId').wrapInner('<span/>');
$('#anId span').unwrap();

- Benjamin

---

这种方法在需要解除HTML部分而不测试inner text()或html()的情况下仍然非常有效。我使用这种方法允许用户取消动态生成的HTML的选择和高亮显示。 - Mike Clymer

Answer 3

你如何做取决于你所处情况的额外限制。

没有通用的去除加粗的方法。

如果标签总是 <b>，那么可以这样做。

var h = $(elementSelector).html;
h = h.replace("<b>","");
h = h.replace("</b>","");
$(elementSelector).html(h);

我不确定为什么你不喜欢正则表达式。

- Cheeso

---

在1.4中，你也可以传递一个函数来实现这种方法：$("p").html(function(i, h) { h = h.replace(/<b>/g,''); return h.replace(/<\/b>/g,''); }); - Nick Craver

@Gaby - 我同意，但如果其他人遇到这个问题并想要这个解决方案，那么保留它也没有什么坏处。 - Nick Craver

从技术上讲，我认为普通的string.replace()使用了正则表达式，不是吗？只是在那个字符串中我没有使用任何正则表达式代码。 - Cheeso

Answer 4

$('b').contents().unwrap();

定位到所选元素的内容并将其解除包装。

- Zachary Hurst

Answer 5

如果您只想提取文本而不包括其他内容，可以使用以下方法：

$("b").replaceWith($("b").text());

- MBO

---

Urh，他的<i>标签去哪了？ - CResults

请注意，如果<b></b>标签内包含任何HTML标签，则此方法不安全，该标签将会丢失。 - Nick Craver

注意：再次大声读出问题 - MBO

我这样做了，它说要删除粗体标签，而不是剥离其他所有内容，因此请注意，以防有人使用此方法并获得意外行为。请注意，您忘记了这个问题以及其他SO中的问题稍后会被试图解决略微不同的问题的人发现。如果存在副作用，则不总是解决手头的问题，最好提到它们。无意冒犯，只是要记住这一点。 - Nick Craver

Answer 6

我认为在这种情况下仅依赖于jQuery会不必要地使事情复杂化。使用replace方法会更容易，该方法接受普通字符串或正则表达式。

在这种情况下，通常使用正则表达式是最好的选择，因为您希望进行多个替换，这些替换大致具有相同的模式。

- mensch