2010-11-08 32 views
0

我有一个页面上的YouTube视频列表,我想用JS来获取每个<embed>标签的src URL列表,并使用它们在页面的其他地方添加缩略图图像。为什么这个JS RegExp不能工作?

要做到这一点,我需要使用正则表达式从YouTube网址抓取视频ID,但它拒绝工作,即使正则表达式出现在工作的时候我在这里测试:http://www.regular-expressions.info/javascriptexample.html

下面的代码我有:

**这里是JSBin页面看到这一切在行动:每次推动整个MYSRC串时间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; 

警报是有测试什么的正则表达式的查找和因为它不是matchi一点都不。该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> 

有谁看到为什么我的正则表达式或我的JS是偏离了轨道吗?

** PS这里是JSBin URL http://jsbin.com/uvoya3/23/edit

+0

看来,据我可以告诉是工作得很好,尽管你需要确保“src”的名字可以包含短划线。 – Pointy 2010-11-08 19:57:06

回答

0

它的正常工作,除了第三个,因为一个包含-。顺便说一下,_也可能受支持。

因此,更好的正则表达式是:/^(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'); 
    } 

    ...