html - How to unwrap text using jQuery?

Question

How to unwrap a text from a HTML tag using jQUery?

For instance, how to transform this HTML

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

into (i.e. remove the bold tags)

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

using only jQuery and no regex?

Answer 1

You can do this:

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

Note: this preserves whatever HTML you have inside where .text() might transform it.

If you wanted to quite literally just strip the <b></b> you can use Cheeso's answer a bit easier in jQuery 1.4+:

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