Question

我在页面上有一个YouTube视频列表，我想使用JS从每个<embed>标记中获取src网址列表，并使用它们在页面的其他位置附加缩略图。

要做到这一点，我需要使用RegExp从YouTube网址中获取视频ID，但它拒绝工作，即使RegExp在我在此处测试时似乎有效：http://www.regular-expressions.info/javascriptexample.html

这是我的代码：

**这是JSBin页面，可以全面了解它：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;

警报用于测试RegExp正在查找的内容，并且每次都推送整个mysrc字符串，因为它根本不匹配。 mysrc值是

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

正在从此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>

有谁知道为什么我的RegExp或我的JS在这里偏离轨道？

** PS这是JSBin网址http://jsbin.com/uvoya3/23/edit

Answer 1

它工作正常，除了第三个，因为那个包含-。顺便说一句，也可以支持_。

因此，更好的正则表达式是：/^(http:\/\/www.youtube.com\/v\/)([a-zA-Z0-9-_]*)(\?[^\?]*)$/。

在我的Javascript控制台上，这很好用：

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

您可以通过以下方式优化代码：

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');
  }

  ...

为什么这个JS RegExp不能工作？

1 个答案: