Regex backreference problem

Dev Shed Forums Sponsor:

April 4th, 2008, 06:29 PM

ktoz

Contributing User

Join Date: Apr 2003

Posts: 562

Time spent in forums: 1 Week 5 Days 3 h 4 m 2 sec
Reputation Power: 69

Regex backreference problem

Hi

I'm trying to use a regular expression to grab 'a' tags from html returned by xmlhttprequest and have it grabbing the tags correctly but I don't really want the entire tag, I just want the http path. I tried using a back reference and this gives me both the tag and the back referenced text.

Here's the expression:
(assume 'scr' contains valid html)

alert(scr.match(/<(A|a) (HREF|href)=("|')([a-zA-Z._0-9-]+)("|')>\4/g));

For example, given the tag
<A HREF="herring-bone-warp-dark-blue.png">

I want to extract only the "herring-bone-warp-dark-blue.png" part (sans quotes)

Any help appreciated

April 4th, 2008, 06:52 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,834

Time spent in forums: 6 Months 1 Day 21 h 3 m 17 sec
Reputation Power: 4192

Why don't you use the case-insensitive option?

Try this:

Code:

alert(scr.match(/<a href=["']([a-z._0-9\/\%\?\&-]+)["']>/gi)[1]);

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

April 4th, 2008, 07:10 PM

ktoz

Contributing User

Join Date: Apr 2003

Posts: 562

Time spent in forums: 1 Week 5 Days 3 h 4 m 2 sec
Reputation Power: 69

Quote:

Originally Posted by Kravvitz

Why don't you use the case-insensitive option?

Didn't know about it.

Quote:

Try this:

Code:

alert(scr.match(/<a href=["']([a-z._0-9\/\%\?\&-]+)["']>/gi)[1]);

Your expression is definitely cleaner, but it's still returning the entire tag.

Any ideas how to return just the path?

April 4th, 2008, 07:14 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,834

Time spent in forums: 6 Months 1 Day 21 h 3 m 17 sec
Reputation Power: 4192

Oh right, that only works without the global option. Do you need it?

Code:

alert(scr.match(/<a href=["']([a-z._0-9\/\%\?\&-]+)["']>/i)[1]);

April 4th, 2008, 07:19 PM

ktoz

Contributing User

Join Date: Apr 2003

Posts: 562

Time spent in forums: 1 Week 5 Days 3 h 4 m 2 sec
Reputation Power: 69

Quote:

Originally Posted by Kravvitz

Oh right, that only works without the global option. Do you need it?

Yes.

April 4th, 2008, 07:42 PM

ktoz

Contributing User

Join Date: Apr 2003

Posts: 562

Time spent in forums: 1 Week 5 Days 3 h 4 m 2 sec
Reputation Power: 69

ugly solution

This is butt ugly but it does what I want...

Code:

scr	= scr.match(/<a href=["']([a-zA-Z._0-9-]+)["']>/gi).toString();
scr	= scr.match(/["']([a-zA-Z._0-9-]+)["']/gi).toString();
scr	= scr.match(/[a-zA-Z._0-9-]+/gi);
	
alert(scr);

April 4th, 2008, 07:46 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,834

Time spent in forums: 6 Months 1 Day 21 h 3 m 17 sec
Reputation Power: 4192

I'm working on an alternate way to do this, which I'll post in a few minutes.

Do you really need 3 of those? Try this:

Code:

scr	= scr.match(/<a href=["']([a-z._0-9-]+)["']>/gi).toString();
scr	= scr.match(/["']([a-z._0-9-]+)["']/i)[1];
alert(scr);

April 4th, 2008, 07:54 PM

ktoz

Contributing User

Join Date: Apr 2003

Posts: 562

Time spent in forums: 1 Week 5 Days 3 h 4 m 2 sec
Reputation Power: 69

Quote:

Originally Posted by Kravvitz

I'm working on an alternate way to do this, which I'll post in a few minutes.

Do you really need 3 of those? Try this:

Code:

scr	= scr.match(/<a href=["']([a-z._0-9-]+)["']>/gi).toString();
scr	= scr.match(/["']([a-z._0-9-]+)["']/i)[1];
alert(scr);

That does give me one correct result, but the problem is that "scr" rarely contains just a single <a href=xxx> match and I need all of them.

April 4th, 2008, 07:54 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,834

Time spent in forums: 6 Months 1 Day 21 h 3 m 17 sec
Reputation Power: 4192

Try this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript">/* <![CDATA[ */
// versions of IE before 5.5 don't support Array.push() natively.
// You might want this for versions of IE before 5.5.
if(![].push){ // for old browsers that don't natively support Array.push()
  Array.prototype.push=function(){
    for(var i=0,l=arguments.length;i<l;i++) this[this.length]=arguments[i];
    return this.length;
  }
}
function findURLsInHTML(str){
  var reStr = '<a[^>]*href=[\"\\\']([\\w\/;:\%\?\&=.-]+)[\"\\\'][^>]*>';
  var re1 = new RegExp(reStr,'gi'), re2 = new RegExp(reStr,'i');
  var results = [], matches = str.match(re1), temp, i=0;
  while(temp = matches[i++]) {
    results.push(temp.match(re2)[1]);
  }
  return results.join('\n');
}
window.onload = function(){

  document.forms['form1'].btn1.onclick=function(){
    this.form.results.value = findURLsInHTML(this.form.ta1.value);
  }
}
/* ]]> */</script>
</head>
<body>

<form id="form1" action="#"><div>
<textarea name="ta1" rows="16" cols="64"></textarea>
<textarea name="results" rows="12" cols="64"></textarea>
<input type="button" id="btn1" name="btn1" value="Run Function">
</div></form>

</body>
</html>

Comments on this post

ktoz agrees!

#10

April 4th, 2008, 08:18 PM

ktoz

Contributing User

Join Date: Apr 2003

Posts: 562

Time spent in forums: 1 Week 5 Days 3 h 4 m 2 sec
Reputation Power: 69

Works like a champ! Thanks.

I was thinking a loop might be required. It would be slick though if match allowed a second parameter like this:

scr.match(/<a href=["']([0-9a-z_.-\/)['"]>/gi, \1);

Then it could be done in one swell foop

#11

April 5th, 2008, 02:19 PM

Joseph Taylor

c0der

Join Date: Jun 2005

Location: Vancouver

Posts: 665

Time spent in forums: 2 Weeks 31 m 38 sec
Reputation Power: 153

Is there a good reason for you to return the HTML as a string rather than XML? If you passed it as XML you'd be able to use getElementsByTagName("a") and collect the hrefs using the usual DOM calls. You are after all "[assuming] 'scr' contains valid html". Better the absence of an answer than a wrong answer, no?

Last edited by Joseph Taylor : April 5th, 2008 at 02:21 PM.

#12

April 5th, 2008, 04:22 PM

ktoz

Contributing User

Join Date: Apr 2003

Posts: 562

Time spent in forums: 1 Week 5 Days 3 h 4 m 2 sec
Reputation Power: 69

Quote:

Originally Posted by Joseph Taylor

Not sure if this is a 'good reason' but I'm processing the raw html so I don't need to create an invisible div to put stuff in.

I know the files I'm processing will be valid html because they are created and returned by the web server. Processing the html in string form targets the 'a' tag search to only this string. If I put this html in a dummy item, 'getElementsByTagName' would include every tag in the document not just the ones in the html block I'm processing. This would require adding a filter to make sure I'm only getting the paths from the dummy item.

The basic idea here is, I'm writing some experimental development tools to make it possible to design really cool Web 2.0 applications and this little part is in a Javascript resource mapper. Basically what I'm doing is using the document.URL to find the root directory, appending on the name of a special shared folder (Resources) and recursively scanning this folder from within javascript by using the following function at each level of recursion.

Code:

function DirectoryContentsAtPath(inPath)
{
	var http = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP') ;
	
	http.open("get", inPath, false);
	http.send(null);
	
	if (http.status == 200)
	{
		// get the 'a' tags from the html
		var result	= http.responseText.match(/<a href=["']([0-9a-z._\/-]+)["']>/gi).toString();
		
		// get the hrefs from the 'a' tags
		result	= result.match(/['"]([0-9-a-z_.\/-]+)["']/gi).toString();
		
		// strip the quotes from the hrefs
		result	= result.match(/[0-9a-z_.\/-]+/gi);
		
		if ((result.length) && (result.length > 0))
			// Apache includes the directory as the first item 
			// so slice array to get a list of just the files
			return  result.slice(1);	
	}
	
	return null;
}

It's still a little rough, but I have the resource mapper working on my home Apache web server. Surprisingly fast too.

I may be wrong here, but my gut instinct is that extracting the path info from a string is faster and more memory efficient than actually adding the http.responseText to a dummy element in the DOM searching the dummy element, filtering the search results and deleting it's contents.

What do you think?

#13

April 5th, 2008, 04:39 PM

Joseph Taylor

c0der

Join Date: Jun 2005

Location: Vancouver

Posts: 665

Time spent in forums: 2 Weeks 31 m 38 sec
Reputation Power: 153

Quote:

I may be wrong here, but my gut instinct is that extracting the path info from a string is faster and more memory efficient than actually adding the http.responseText to a dummy element in the DOM searching the dummy element, filtering the search results and deleting it's contents.

What do you think?

I think I'd still use the invisible div method--but given your situation, the regex should be fine. I wasn't aware that invisibleDiv.getElementsByTagName("a") would return all the links in the document... Nevertheless, it's entirely possible that this is a quirk of Internet Explorer. The fact that you don't have direct control of the HTML generation does rule out the responseXML idea.

#14

April 5th, 2008, 05:18 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,834

Time spent in forums: 6 Months 1 Day 21 h 3 m 17 sec
Reputation Power: 4192

It seems ktoz forgot that getElementsByTagName() is a method of Document and of Element, so you can use it on a <div> or any other element when needed.

Comments on this post

Joseph Taylor agrees: Yeah, I figured it was an oversight.

#15

April 5th, 2008, 05:28 PM

ktoz

Contributing User

Join Date: Apr 2003

Posts: 562

Time spent in forums: 1 Week 5 Days 3 h 4 m 2 sec
Reputation Power: 69

Quote:

Originally Posted by Kravvitz

It seems ktoz forgot that getElementsByTagName() is a method of Document and of Element

I did indeed. Or rather, never knew it to forget.

The only way I've ever seen it used in examples is document.getElementsByTagName so never bothered to check.

Regex backreference problem

Developer Shed Advertisers and Affiliates