Why does a regex that works in Chrome not work in Poltergeist/PhantomJS?

Question

I have a problem with some javascript intended to parse a link (in order to embed a video player if appropriate). It works fine in when testing manually in Chrome, but when I run an automated test suite in a different browser, it doesn't.

var n = childNodes[i];
var html = n.nodeValue;

var urlVimeo0 = /http:\/\/(www\.)?vimeo\.com\/(\d+)($|\/)/;
var urlVimeo1 = /http:\/\/(www\.)?vimeo\.com\/(\d+)($)/;
var urlVimeo2 = /http:\/\/(www\.)?vimeo\.com\/(\d+)(\/)/;
var urlVimeo3 = /http:\/\/(www\.)?vimeo\.com\/(\d+)$/,
var urlVimeo4 = /http:\/\/(www\.)?vimeo\.com\/(\d+)\//,
var urlVimeo5 = /http:\/\/(www\.)?vimeo\.com\/(\d+)/;

// Comments show output when run in Poltergeist/PhantomJS
console.log('"'+html+'"'); // "http://vimeo.com/26278283​"
console.log(html.match(urlVimeo0)); // null
console.log(html.match(urlVimeo1)); // null
console.log(html.match(urlVimeo2)); // null
console.log(html.match(urlVimeo3)); // null
console.log(html.match(urlVimeo4)); // null
console.log(html.match(urlVimeo5)); // http://vimeo.com/26278283,,26278283

// Output in Chrome (same order)
// "http://vimeo.com/26278283" 
// ["http://vimeo.com/26278283", undefined, "26278283", "", index: 0, input: "http://vimeo.com/26278283"] 
// ["http://vimeo.com/26278283", undefined, "26278283", "", index: 0, input: "http://vimeo.com/26278283"] 
// null 
// ["http://vimeo.com/26278283", undefined, "26278283", index: 0, input: "http://vimeo.com/26278283"] 
// null
// ["http://vimeo.com/26278283", undefined, "26278283", index: 0, input: "http://vimeo.com/26278283"] 

The original ( urlVimeo0 ) works in Chrome, but when I run this as part of a test suite using Poltergeist, nothing works when there's anything after the bit matching the digits. Both are webkit based, so I have no idea why the dollar/slash is causing a failure.

Answer 1

TL;DR escape your dollar signs /foo\\$/ , and PhantomJS uses a really old version of Webkit with different support for regex syntax than Chrome.

--

You have two potential problems.

The first is your usage of $ ; be aware that in a regular expression it means the end of the string (and ^ means the beginning of the string). So /foo$/ will match "a_foo" but will not match "foo_a" , and will not match "foo$" either.

If you're actually trying to match a dollar sign in your string you need to escape it: /foo\\$/ .

The second problem is that while PhantomJS (which Poltergeist uses under the hood) is based on Webkit, it's an ancient, shitty, forked version of Webkit only used by PhantomJS, and it lacks a lot of modern features including various extensions to regular expression syntax. So you will see some differences between Chrome's interpretation of your regexes and PhantomJS's.

If you want to dig into the available browser compatibility tables/specifications, you could start here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#Specifications . Anything that's available in the ECMAScript 3 spec is probably available in PhantomJS. Anything that comes after is suspect.