Replace an anchor with its innerHTML

Question

I want to replace a link with its innerHTML, how is it done?

Example:

Bla bla bla <a href="#nogo">No link here</a> bla bla bla

has to become

Bla bla bla No link here bla bla bla

Tried to replace the node with its innerHTML but I can't get the text in the node itself..

I guess I have to work with regular expressions but I can't figure out how.

EDIT: Thank you all for the quick responses! I still can't seem to get it right. It looks like there's more going on.

I am using prototype js as well.

I got some text with could contain a link. If the text contains a link it should be replaced by it's innerHTML. It looks something like this:

<td id="text">This is some text <a href="/link/Go_%28To%29" title="Go (to)">goto</a>. Some more text.</td>

I tried using hasChildNodes() to check wether the text contained a link but it always returns yes, even when the text did not contain a link or other element. So I thought that maybe the text is considered a node too and tried childElements[1]. That returns undefined. So maybe the link is a node of the textnode then. Nothing! I am scraping this data and evalling the JSON so the weirdness may come from that. Walking the DOM in the rest of the response goes well though..

However when I alert

$('text').childElements()[0]

The actual href get's alerted! (localhost//link/Go_%28To%29)

$('text'.childElements()[0].up() gets me to the actual td parent element.

So I am using

if($('text').childElements()[0])

To check wether the text contains a link.

I guess this gets a bit off-topic but I actually can't get the a element right. Any tips? Maybe a regexp is the best option?

Answer 1

Try this:

var aElems = document.getElementsByTagName("a");
for (var i=0, n=aElems.length; i<n; ++i) {
    var elem = aElems[i];
    elem.parentNode.replaceChild(document.createTextNode(elem.innerHTML), elem);
}

Answer 2

Set outerHTML to the innerHTML...

window.onload = function() {
  var ancs = document.getElementsByTagName("A");

  for(var i = 0; l = ancs.length; i < l; i++) {
    var anc = ancs[i];
    if(anc.href.substring(0, 1) == "#")
      anc.outerHTML = anc.innerHTML;
  }
}

Answer 3

I highly recommend using one of the Javascript libraries for this sort of work.

Here's a one-liner using Prototype that will do the trick:

$$('a').each( function( a ) { a.replace( a.innerHTML ) } )

It simply iterates through each <a> tag in the page and replaces it with its innerHTML.

jQuery is also terrific for this sort of thing.

Answer 4

Or another way, neutralizes a link (w/o jquery, i dislike it):

create test link:

javascript:var a=document.createElement("a");a.href="#nogo";a.innerText="NOGO";document.body.appendChild(a);void(0);

and unset href attribute:

javascript:for(var i=0;i<document.links.length;i++)if(document.links[i].hash.toLowerCase()=="#nogo")document.links[i].removeAttribute("href");void(0);

note, link still have its style, you have to reset it also

Answer 5

In the end I solved the problem with an ugly replace(/<\/?[^>]+(>|$)/g, "\n"). There were a lot of other things going on which I haven't documented well, my fault.

Answer 6

This would, in short, do your job:

var a = document.links;

for( var x = 0; x < a.length; x++ ){

a[x].outerHTML = a[x].innerHTML; x-- };

Or instead of the previous paradox, one could use some "pure scripting magic", or a future proof classic:

var a = document.links;
while( a.length > 0 ){ a[0].outerHTML = a[0].innerHTML }