使用Javascript正則表達式來找到<a href tag

Question

I am using this regex to try to find links that look like this and replace them with only the content between the start and end tag of the link.

The regex:

/<a class="tag_link"[^>]*>([^<]*)<\/a>/mg 

I tested the regex on a sample code and it works, but when i try to apply it on object.innerHTML it doesnt replace anything. What is wrong?

The code:

document.getElementById(preview_div_ID).innerHTML.replace(/<a class="tag_link"[^>]*>([^<]*)<\/a>/mg, '$1'); 
document.write(document.getElementById(preview_div_ID).innerHTML); 

Some sample html that is in "document.getElementById(preview_div_ID).innerHTML" above:

<h5 style="line-height: 9px; margin: 2px; "> 
      <span style="font-size: 7px; line-height: 8px; "> 
       Ost- (caseous) <a class="tag_link" href="javascript:;" onclick="open_tag('nekros', this);">nekros</a> 
      </span> 
     </h5> 

Any help is much appreciated

Answer 1

instead of

document.getElementById(preview_div_ID).innerHTML.replace(/<a class="tag_link"[^>]*>([^<]*)<\/a>/mg, '$1') 
document.write(document.getElementById(preview_div_ID).innerHTML); 

It should be

document.getElementById(preview_div_ID).innerHTML = document.getElementById(preview_div_ID).innerHTML.replace(/<a class="tag_link"[^>]*>([^<]*)<\/a>/mg, '$1') 

Answer 2

This could be solved by letting JS create DOM elements from your HTML. I will be using jQuery for simplicity in my answer.

var $code = $('<h5 style="line-height: 9px; margin: 2px; "> 
      <span style="font-size: 7px; line-height: 8px; "> 
       Ost- (caseous) <a class="tag_link" href="javascript:;" onclick="open_tag(\'nekros\', this);">nekros</a> 
      </span> 
     </h5>'); 

$code.find('a').replaceWith(function() { 
    return $(this).text(); 
}); 

Please note that this code isn't tested

Answer 3

Try this instead:

var links = document.getElementsByTagName("a"); 
for(var link in links){ 
if(links[link].getAttribute("class").indexOf("tag_link") != -1){ 
    var oldLink = links[link]; 
    var newLink = document.createElement("a"); 
    var newLink.innerHTML = oldLink.innerHTML; 
    oldLink.parentNode.insertBefore(newLink , oldLink); 
    oldLink.parentNode.removeChild(oldLink); 
} 
} 

It will iterate through all links that have the class name "tag_link" and then remove all of their attributes while retaining the link text. You can change this to just a single element if you by id, just make the foreach loop target the single dom element. Like this:

function stripAnchor(anchorId){ 
    var oldLink = document.getElementById(anchorId); 
    var newLink = document.createElement("a"); 
    var newLink.innerHTML = oldLink.innerHTML; 
    oldLink.parentNode.insertBefore(newLink , oldLink); 
    oldLink.parentNode.removeChild(oldLink); 
}