JavaScript, Regex and null result

Question

I have written this regexp: <(a*)\b[^>]*>.*?</\1>

and is tested on this regexp testing site: http://gskinner.com/RegExr/?2tntr

The point of the regexp is to go through a sites HTML and find all of the links. It should then return these in an Array for me to manipulate.

On the regexp testing site it works perfectly, but when put in action with JavaScript on my site it returns null.

JavaScript looks like this:

var data = $('#mainDivOnMiddleOfPage').html();

var pattern = "<(a*).*href=.*>.*</a>";
var modi = "g";

var patt = new RegExp(pattern, modi);
var result = patt.exec(data);

jQuery gets the content of the page. This is tested and verified.

Question is, why does this return null in JavaScript but what it is supposed to return in the regexp tester?

If you're already using jQuery- why not use $("#mainDivOnMiddleOfPage a") ? — Chris Carew
– Chris Carew, Commented Jun 29, 2012 at 21:56
I am using $.ajax to get the html content, this means i cant (i think) use jQuery to get the A elements... but it's a good idea if i could =) — Bjørn
– Bjørn, Commented Jun 29, 2012 at 21:58
You can. It's a matter of where they are and how you have them. You have a string? Are you appending them somewhere? You can do $(HTML_STRING).children("a"), for instance, or otherwise treat the returned object as queryable html. — Chris Carew
– Chris Carew, Commented Jun 29, 2012 at 22:06

Ωmega · Accepted Answer · 2012-06-29 22:15:35Z

1

All <a> links:

<a[^>]*?\bhref=['\"](.*?)['\"]

Absolute links only (starting with http):

<a[^>]*?\bhref=['\"](http.*?)['\"]

JavaScript code:

var html = '<a href="test.html">';
var m = html.match(/<a[^>]*?\bhref=['"](.*?)['"]/);
print (m[1]);

See and test the code here.

edited Jun 29, 2012 at 22:15

answered Jun 29, 2012 at 21:57

Ωmega

44k35 gold badges143 silver badges213 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bjørn Over a year ago

(These are local links so http cant be in the search phrase)

Mitya Over a year ago

JS does support \b. It's failing because, if you prepare your pattern as a string, rather than as a RegExp literal (the former is needed really only if you need to reference variables in the pattern), you have to double-escape special characters. Change \b to \\b and it will work. It would also be sensible to force the closing quote of the href attribute to match the opening one (i.e. double vs. single). Can be achieved with a back-reference. The revised pattern, as a literal rather than a string, would be /<a[^>]*?\bhref=('|")(.*?)\1/

Ωmega Over a year ago

@BjørnØyvindHalvorsen - I have updated my answer with code and test link

Mitya Over a year ago

You'll also need the g global flag to match all links - this will match just the first.

ama2 · Accepted Answer · 2012-06-29 22:10:38Z

1

I use the following code to do the same thing and it works for me, try it out

var data = document.getElementById('mainDivOnMiddleOfPage').textContent;

var result = data.match(/<(a*).*href=.*>.*<\/a>/);

edited Jun 29, 2012 at 22:10

answered Jun 29, 2012 at 22:04

ama2

2,6693 gold badges23 silver badges30 bronze badges

6 Comments

Bjørn Over a year ago

data.match is not a function... might i need some external liberaries?

Ricardo Souza Over a year ago

Sorry... match doen't exists in JS. It's couterpart is exec.

ama2 Over a year ago

Just added a fix to the answer, you need to get the textContent. try it now

ama2 Over a year ago

developer.mozilla.org/en/JavaScript/Reference/Global_Objects/… it does

Mitya Over a year ago

Bear in mind textContent is a relatively new property. Use innerHTML if you need to support IE <= 8.

|

Chris Carew · Accepted Answer · 2012-06-29 22:23:22Z

1

Going to go ahead and post this here, since I think it's what you want -- it is not a RegEx solution, however.

$(function(){
    $.ajax({
        url: "test.htm",
        success: function(data){
            var array_of_links = $.makeArray($("a",data));
            // do your stuff here
        }
    });

});

answered Jun 29, 2012 at 22:23

Chris Carew

1,41811 silver badges6 bronze badges

Comments

Mitya · Accepted Answer · 2012-07-21 19:20:40Z

I'm conscious an answer has been chosen. However it's worth mentioning that the current REGEX solutions match the tags but not the actual HREFs in isolation.

This is where JavaScript falls down, since its somewhat simplistic implementation of REGEX does not allow for the capturing of sub-groups when the global g flag is specified.

One way round this is to exploit the REGEX replacement callback. This will get just the link HREFs, not the tags.

var html = document.body.innerHTML,
    links = [];
html.replace(/<a[^>]*?href=('|")(.*?)\1/gi, function($0, $1, $2) {
    links.push($2);
});
//links is now an array of hrefs

It also uses a back-reference to close the href attribute, i.e. making sure both opening and closing quote are single or double, not mixed.

Sidenote: as others have mentioned, where possible, you'd want to DOM this rather than REGEX.

Roland Bouman · Accepted Answer · 2012-07-23 10:37:58Z

1

"The point of the regexp is to go through a sites HTML and find all of the links. It should then return these in an Array for me to manipulate."

I won't add another regex answer, but just want to point out that if you have hold of the document (not just the html) then it's easier to walk trhough the links collection. That contains all <a href="">'s but also all <area> elements:

for (var link, links = document.links, n = links.length, i=0; i<n; i++){
    link = links[i];
    switch (link.tagName){
        case "A":
            //do something with the link
            break;
        case "AREA":
            //do something with the area.
            break;
    } 
}

edited Jul 23, 2012 at 10:37

answered Jun 29, 2012 at 22:22

Roland Bouman

32.1k8 gold badges69 silver badges69 bronze badges

Comments

Ricardo Souza · Accepted Answer · 2012-06-29 22:30:08Z

0

Your problem is that you are not compiling your regex:

patt.compile();

You have to call it before using with the exec() method.

answered Jun 29, 2012 at 22:30

Ricardo Souza

16.5k6 gold badges40 silver badges70 bronze badges

2 Comments

Mitya Over a year ago

compile() is deprecated and does not do anything extra than the RegExp constructor. Thus, it is not necessary to call it before running exec().

Ricardo Souza Over a year ago

Its necessary for some browsers like IE, but not in all cases. Do a test yourself in IE with the case he pointed.

Collectives™ on Stack Overflow

JavaScript, Regex and null result

6 Answers 6

4 Comments

6 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

6 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related