Remove html links with jQuery

Question

I have a jQuery string:

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

Above you can see, that there are many <a> tags in my string. In the <a> tags there are img and span tags.

The output should look like this:

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

As you can see, I want to replace the <a> tag with the content of the span tag.

Normally I would use this:

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

But I want to replace all <a> tags with the content of their <span> elements.

Please notice that there can be more than 3 links in my string and they can look different (different <span> and href content).

Answer 1

You can use replaceWith method:

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