Why won't this JS RegExp work?

I have a list of YouTube videos on a page and I want to use JS to grab a list of the src URLs from each <embed> tag and use them to append thumbnail images elsewhere on the page.

To do this, I need to grab the Video ID from the YouTube URL using a RegExp, but it refuses to work, even though the RegExp appears to work when I test it here: http://www.regular-expressions.info/javascriptexample.html

Here's the code I have:

**Here is the JSBin page to see it all in action: http://jsbin.com/uvoya3/23/edit

var addImages = function () {
  var features = document.getElementById('features'),
  embeds = features.getElementsByTagName('embed'),
  ids = [], i, thumbNav, items, mysrc, pattern, ytid, newImg, matchArray;

  for (i = 0; i < embeds.length; i += 1) {
    mysrc = embeds[i].getAttribute('src');
    pattern = /^(http:\/\/www.youtube.com\/v\/)([a-zA-Z0-9]*)(\?[^\?]*)$/;
    ytid = mysrc.replace(pattern, '$2');

    alert("src number " + i + " is " + ytid);
    ids.push(ytid);
  }

};

window.onload = addImages;

The alert is there to test what the RegExp is finding, and each time it pushes the whole mysrc string because it's not matching at all. The mysrc values are

http://www.youtube.com/v/jfiNQGFVjb4?fs=1&hl=en_US
http://www.youtube.com/v/qtzjzMsJiO8?fs=1&hl=en_US
http://www.youtube.com/v/baa-dGj2LhQ?fs=1&hl=en_US

which 开发者_如何学运维are being pulled from this HTML

<ul id="features">
  <li><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/jfiNQGFVjb4?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/jfiNQGFVjb4?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
  <li><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/qtzjzMsJiO8?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qtzjzMsJiO8?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
  <li><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/baa-dGj2LhQ?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/baa-dGj2LhQ?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></li>
</ul>

Does anyone see why my RegExp or my JS is off track here?

**PS Here is the JSBin URL http://jsbin.com/uvoya3/23/edit

It's working fine, except for the third one, because that one contains a -. And by the way, _ may be supported as well.

So, a better regular expression would be: /^(http:\/\/www.youtube.com\/v\/)([a-zA-Z0-9-_]*)(\?[^\?]*)$/.

On my Javascript console this works fine:

> "http://www.youtube.com/v/baa-dGj2LhQ?fs=1&hl=en_US".replace(/^(http:\/\/www.youtube.com\/v\/)([a-zA-Z0-9-_]*)(\?[^\?]*)$/, '$2');
< "baa-dGj2LhQ"

You could optimize your code by the way:

var addImages = function () {

  // Part 1
  var features = document.getElementById('features'),
  embeds = features.getElementsByTagName('embed'),
  pattern = /^(http:\/\/www.youtube.com\/v\/)([a-zA-Z0-9-_]*)(\?[^\?]*)$/,
  ids = [], i, thumbNav, items, mysrc, ytid, newImg;

  for (i = 0; i < embeds.length; i++) {
    ids[i] = embeds[i].src.replace(pattern, '$2');
  }

  ...