Javascript regex to find

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

***WHY*** are you using regex when you've got a DOM to use?! — Matt Ball, Oct 04 '12 at 21:09
Don't regex html. Written in stone somewhere which is probably why you didn't see it online! So now you know... — Travis J, Oct 04 '12 at 21:10
Please see this: http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags — Justin Self, Oct 04 '12 at 21:10
Whoa, whoa, whoa people! Downvotes are not meant to be used to judge whether or not the OP is following an approach that you personally disfavor. "Use your downvotes whenever you encounter an **egregiously sloppy, no-effort-expended post**, or an **answer** that is clearly and perhaps dangerously incorrect." http://stackoverflow.com/privileges/vote-down This is an unusually good question - shows effort and provides sufficient code examples. Focus on providing good answers! (Adding +1 for poor @Erik) — JDB, Oct 04 '12 at 23:10
(...and I agree that regex is not the correct approach, but use answers to convey that message... not downvotes!) — JDB, Oct 04 '12 at 23:12
Please explain why regex is a bad method instead of just screaming it in my face. I am new to javascript and I am self-taught so I dont have all the theory. What I would like to point out though, is that I dont think that any metod should be considered "bad" in programming by default. Programming is about problem solving, and all the functions in a programming language are there to be used. If you have a method that you think is more efficient, please tell me (like Travis did, even though he did not specify why his solution is better than mine, and my original question has not been answered). — Erik Boberg, Oct 05 '12 at 08:06
@ErikBoberg Trying to parse HTML with regex is a very well known noob mistake, if you have researched your approach a bit before asking you would easily have found out why. Downvotes are used to show that the question doesn't show prior research, and people are free to define what that means for them themselves. No one is screaming at you or anything like that, I can understand that downvotes sting a bit, but please try to do some research of your own before asking. This question has been asked a million times before... — yannis, Oct 11 '12 at 07:54

score 5 · Answer 1 · answered Oct 04 '12 at 21:14

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);
}

Thank you Travis, I implemented your solution and it works. It still leaves empty blabla tags instead of just the text, but that really does not matter, and I can easily change them into instead if I want to. Are you guys sure that this is faster than doing the regex? Say I have 100 links in the html code, and 5 of them are class="tag_link". Using your method I have to loop through all 100 links and check them, instead of running the regex and replacing the 5 that I want to affect. I am pretty new to javascript and I dont really know which methods are fast and slow yet... — Erik Boberg, Oct 05 '12 at 08:02
@ErikBoberg - `var links = document.getElementsByTagName("a");` will run quickly, never fear O(n). Then you are only iterating that set. — Travis J, Oct 05 '12 at 17:22

score 2 · Answer 2 · answered Oct 04 '12 at 21:12

2

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

answered Oct 04 '12 at 21:12

rbernabe

1,062
8
10

2

It shouldn't be anything involving regexes. – saml Oct 04 '12 at 21:20
+1 Answers the OP's question - should add a note that this is not the preferred method for parsing HTML in javascript. – JDB Oct 04 '12 at 23:14
`document.write(document.getElementById(preview_div_ID).innerHTML);"` is used only to check the result of my replace for debugging purpouses. – Erik Boberg Oct 05 '12 at 08:11

score 0 · Answer 3 · answered Oct 04 '12 at 21:13

0

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

answered Oct 04 '12 at 21:13

Markus Hedlund

23,374
22
80
109

I dont use jquery, and i am afraid that I dont understand how I would use your solution without it. Is there a "replacewith" function built in to javascript? – Erik Boberg Oct 05 '12 at 08:11
@ErikBoberg See [this question/answer](http://stackoverflow.com/questions/843680/how-to-replace-dom-element-in-place-using-javascript) on how to replace DOM elements without jQuery – Markus Hedlund Oct 05 '12 at 09:24

Javascript regex to find

3 Answers3