What's the best way to strip out only the anch

Question

Let's say there's a string of HTML, with script tags, plain text, whatever.

What's the best way to strip out only the <a> tags?

I've been using some methods here, but these are for all tags. Strip HTML from Text JavaScript

Answer 1

A <a> tag is not supposed to hold any other <a> tag, so a simple ungreedy regexp would do the trick (i.e. string.match(/<a>(.*?)<\/a>/), but this example suppose the tags have no attribute).

Answer 2

Using jQuery:

var content = $('<div>' + htmlString + '</div>');
content.find('a').replaceWith(function() { return this.childNodes; });
var newHtml = content.html();

Adding a wrapping <div> tag allows us to get the desired HTML back.

I wrote a more detailed explanation on my blog.

Answer 3

Here's a native (non-library) solution if performance is a concern.

function stripTag(str, tag) {
    var a, parent, div = document.createElement('div');
    div.innerHTML = str;
    a = div.getElementsByTagName( tag );
    while( a[0] ) {
        parent = a[0].parentNode;
        while (a[0].firstChild) {
            parent.insertBefore(a[0].firstChild, a[0]);
        }
        parent.removeChild(a[0]);
    }
    return div.innerHTML;
}

Use it like this:

alert( stripTag( my_string, 'a' ) );

Answer 4

This approach will preserve existing DOM nodes, minimizing side-effects if you have elements within the anchors that have events attached to them.

function unwrapAnchors() {
    if(!('tagName' in this) || this.tagName.toLowerCase() != 'a' || !('parentNode' in this)) {
        return;
    }
    var childNodes = this.childNodes || [], children = [], child;
    // Convert childNodes collection to array
    for(var i = 0, childNodes = this.childNodes || []; i < childNodes.length; i++) {
        children[i] = childNodes[i];
    }
    // Move children outside element
    for(i = 0; i < children.length; i++) {
        child = children[i];
        if(('tagName' in child) && child.tagName.toLowerCase() == 'a') {
            child.parentNode.removeChild(child);
        } else {
            this.parentNode.insertBefore(child, this);
        }
    }
    // Remove now-empty anchor
    this.parentNode.removeChild(this);
}

To use (with jQuery):

$('a').each(unwrapAnchors);

To use (without jQuery):

var a = document.getElementsByTagName('a');
while(a.length) {
    unwrapAnchors.call(a[a.length - 1]);
}