Question

I’ve got a weird issue with trying to match a url containing an image file extension on the end. The regex im using is pretty simple (has no url validation as such but as a first iteration will do for now).

I’ve set up a fiddle which should explain it better than i can in words. See the fiddle here:

http://jsfiddle.net/Vwat2/1/

Notes:

1. Make sure your testing in chrome
2. Make sure you have task manager open for chrome (settings icon > tools > task manager)
3. Run the jsfiddle, the regex without the file extension match on the end will fire 3 seconds after you copy the url into the textarea and will be ok), 3 seconds after that the one WITH the file extension match will fire, if it’s affecting you, the text will not change to fired and you will see jsfiddle eat up CPU in the task manager

Hopefully someone can explain what is going on here, i’ve run the regex in PHP and in expresso and it doesn’t have any issues so i dont think its stuck in some sort of regex internal loop or anything.

Thanks for any help

Edit: Heres a slimmed down version which more closely resembles my use of it in my application (ive removed the timers and other helpers from the first fiddle).

http://jsfiddle.net/A96Mw/1/

Answer 1

Seems to be a case of Catastrophic Backtracking because of this expression: (?:[^ ]+)+. Not sure why the first one works while the second doesn’t.

The regexes you want are

url = new RegExp("https?://(?:[^ ]+)\\.", "i")
// or
url = /https?:\/\/(?:[^ ]+)+\./i

and

imgurl = new RegExp("https?://(?:[^ ]+)\\.(?:jpe?g|gif|png)", "i")
// or
imgurl = /https?:\/\/(?:[^ ]+)+\.(?:jpe?g|gif|png)/i