删除 html 与 jQuery 的链接

Question

我有一个 jQuery 字符串：

<p>
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</h1>
  tempor invidunt ut labore et
  <a target="_blank" class="marked user-link" href="/user/fc07254b-c063-47e1-a434-0da87b62d105">
    <img class="avatar-big-shadow" src="/avatars/fc07254b-c063-47e1-a434-0da87b62d105.png" alt="Hitzk0pf" />
    <span>Hitzk0pf</span>
  </a>
  lore magna aliquyam erat, sed diam voluptua.
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  <a target="_blank" class="marked user-link" href="/user/a9641490-56e7-41c8-a4d7-3bb0b96d5d8a">
    <img class="avatar-big-shadow" src="/avatars/a9641490-56e7-41c8-a4d7-3bb0b96d5d8a.png" alt="Hitzk0pf"/ >
    <span>Hawked</span>
  </a>
  Lorem ipsum dolor sit amet,
  consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <a target="_blank" class="marked user-link" href="/user/fc07254b-c063-47e1-a434-0da87b62d105">
    <img class="avatar-big-shadow" src="/avatars/fc07254b-c063-47e1-a434-0da87b62d105.png" alt="Hitzk0pf">
    <span>Hitzk0pf</span>
  </a>
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

在上面你可以看到，我的字符串中有很多 <a> 标签。在 <a> 标签中有 img 和 span 标签。

输出应如下所示：

<p>
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</h1>
  tempor invidunt ut labore et Hitzk0pf lore magna aliquyam erat, sed diam voluptua.
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  Hawked Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  Hitzk0pf At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

如您所见，我想用 span 标签的内容替换 <a> 标签。

通常我会用这个：

$('.marked').find('span').html();

但我想用 <span> 元素的内容替换 all <a> 标签。

请注意，我的字符串中可以有超过 3 个链接，它们看起来可能不同（不同的 <span> 和 href 内容）。

Answer 1

您可以使用replaceWith方法：

$('.marked.user-link').replaceWith(function() {
    return $(this).find('span').text();
});

Answer 2

@clark，这完全有道理。我现在还没有时间编写代码，但是如果结构始终为 1，那么您可以创建一个包含所有标签的数组，然后循环遍历它们，将它们替换为第一个 indexOf

如果这还不够，

稍后会尝试找时间运行举个例子。很难有更清洁的方法。

删除 html 与 jQuery 的链接

Remove html links with jQuery

jquery

replace

hyperlink