使用正则表达式进行jQuery Youtube URL验证

Question

我知道这里有很多问题已经回答/sf/ask/tagged/youtube/+regex,但是找不到类似于我的问题.

任何正文都有JavaScript正则表达式,用于验证下面列出的YouTube VIDEO网址行.只是想知道这样的URL可能在哪里

http://www.youtube.com/watch?v=bQVoAWSP7k4
http://www.youtube.com/watch?v=bQVoAWSP7k4&feature=popular
http://www.youtube.com/watch?v=McNqjYiFmyQ&feature=related&bhablah
http://youtube.com/watch?v=bQVoAWSP7k4

- 更新1-- - 更新2--

这个工作得很好,但网址http://youtube.com/watch?v=bQVoAWSP7k4失败了

var matches = $('#videoUrl').val().match(/http:\/\/(?:www\.)?youtube.*watch\?v=([a-zA-Z0-9\-_]+)/);
if (matches) {
    alert('valid');
} else {
    alert('Invalid');
}

Answer 1

终极YOUTUBE REGEX

采摘樱桃

因为解释越来越长,我将最终结果放在顶部.随意复制+粘贴,然后继续前进.有关详细说明,请阅读下面的"完整故事".

/**
 * JavaScript function to match (and return) the video Id 
 * of any valid Youtube Url, given as input string.
 * @author: Stephan Schmitz <eyecatchup@gmail.com>
 * @url: https://stackoverflow.com/a/10315969/624466
 */
function ytVidId(url) {
  var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
  return (url.match(p)) ? RegExp.$1 : false;
}

全文

一见钟情,Amarghosh的正则表达看起来不错.但它:

1. 与包含破折号( - )的视频ID不匹配,
2. 不验证id长度(v=aa并v=aaaaaaaaaaaaaaaaaa返回有效),
3. 和不符合所有安全网址(http 小号://youtube.com/watch valid_params)

为了匹配https,短划线字符,以及验证id长度,这是我对Amarghosh正则表达式的修改版本的初步建议:

^https?:\/\/(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$

更新1:URL与字符串

在我发布上述模式后,我被问到:"如果URL是这样的话
youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4怎么办？"？

首先,请注意,这根本不是URL.符合RFC的URL必须以该方案开头!;)

无论如何,为了匹配任何指示引用YouTube视频的字符串,我更新了我的答案以排除所需的URL方案.所以我的第二个建议如下:

^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$

更新2:最终的正则表达式

然后我被要求增加对"特例"的支持; 在youtu.be短网址.最初我没有添加这些,因为它不是问题的具体部分.但是我现在用所有可能的"特殊情况"更新了我的答案.这意味着我不仅添加了对youtu.be链接的支持,还添加了对"/ v"和"/ embed"的请求路径的支持.

所以,我可以介绍一下:我的最终和终极Youtube正则表达式:

^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$

匹配什么字符串？

现在这个模式适用于任何字符串,格式如下:

没有scheme和subdomain(Domain:youtu.be,Path:/)

youtu.be/<video:id>   

没有方案,有子域名(域名:youtu.be,路径:/)

www.youtu.be/<video:id>     

使用HTTP方案,没有子域(Domain:youtu.be,Path:/)

http://youtu.be/<video:id>   

使用HTTP方案和子域(Domain:youtu.be,Path:/)

http://www.youtu.be/<video:id>   

使用HTTPS方案,没有子域(Domain:youtu.be,Path:/)

https://youtu.be/<video:id>     

使用HTTPS方案和子域(域名:youtu.be,路径:/)

https://www.youtu.be/<video:id>   

没有方案和子域名(域名:youtube.com,路径:/ embed)

youtube.com/embed/<video:id>   
youtube.com/embed/<video:id>&other_params 

没有方案,有子域名(域名:youtube.com,路径:/ embed)

www.youtube.com/embed/<video:id>   
www.youtube.com/embed/<video:id>&other_params   

使用HTTP方案,没有子域(Domain:youtube.com,Path:/ embed)

http://youtube.com/embed/<video:id>   
http://youtube.com/embed/<video:id>&other_params  

使用HTTP方案和子域(域:youtube.com,路径:/ embed)

http://www.youtube.com/embed/<video:id>   
http://www.youtube.com/embed/<video:id>&other_params  

使用HTTPS方案,没有子域名(域名:youtube.com,路径:/ embed)

https://youtube.com/embed/<video:id>   
https://youtube.com/embed/<video:id>&other_params    

使用HTTPS方案和子域名(域名:youtube.com,路径:/ embed)

https://www.youtube.com/embed/<video:id>   
https://www.youtube.com/embed/<video:id>&other_params

没有方案和子域(域名:youtube.com,路径:/ v)

youtube.com/v/<video:id>   
youtube.com/v/<video:id>&other_params 

没有方案,有子域名(域名:youtube.com,路径:/ v)

www.youtube.com/v/<video:id>   
www.youtube.com/v/<video:id>&other_params   

使用HTTP方案,没有子域(Domain:youtube.com,Path:/ v)

http://youtube.com/v/<video:id>   
http://youtube.com/v/<video:id>&other_params  

使用HTTP方案和子域(Domain:youtube.com,Path:/ v)

http://www.youtube.com/v/<video:id>   
http://www.youtube.com/v/<video:id>&other_params  

使用HTTPS方案,没有子域名(域名:youtube.com,路径:/ v)

https://youtube.com/v/<video:id>   
https://youtube.com/v/<video:id>&other_params    

使用HTTPS方案和子域(Domain:youtube.com,Path:/ v)

https://www.youtube.com/v/<video:id>   
https://www.youtube.com/v/<video:id>&other_params   

没有方案和子域名(域名:youtube.com,路径:/ watch)

youtube.com/watch?v=<video:id>   
youtube.com/watch?v=<video:id>&other_params   
youtube.com/watch?other_params&v=<video:id> 
youtube.com/watch?other_params&v=<video:id>&more_params  

没有方案,有子域名(域名:youtube.com,路径:/ watch)

www.youtube.com/watch?v=<video:id>   
www.youtube.com/watch?v=<video:id>&other_params   
www.youtube.com/watch?other_params&v=<video:id>  
www.youtube.com/watch?other_params&v=<video:id>&more_params   

使用HTTP方案,没有子域(Domain:youtube.com,Path:/ watch)

http://youtube.com/watch?v=<video:id>   
http://youtube.com/watch?v=<video:id>&other_params   
http://youtube.com/watch?other_params&v=<video:id>   
http://youtube.com/watch?other_params&v=<video:id>&more_params  

使用HTTP方案和子域(Domain:youtube.com,Path:/ watch)

http://www.youtube.com/watch?v=<video:id>   
http://www.youtube.com/watch?v=<video:id>&other_params   
http://www.youtube.com/watch?other_params&v=<video:id>   
http://www.youtube.com/watch?other_params&v=<video:id>&more_params  

使用HTTPS方案,没有子域名(域名:youtube.com,路径:/ watch)

https://youtube.com/watch?v=<video:id>   
https://youtube.com/watch?v=<video:id>&other_params   
https://youtube.com/watch?other_params&v=<video:id>   
https://youtube.com/watch?other_params&v=<video:id>&more_params     

使用HTTPS方案和子域(Domain:youtube.com,Path:/ watch)

https://www.youtube.com/watch?v=<video:id>   
https://www.youtube.com/watch?v=<video:id>&other_params   
https://www.youtube.com/watch?other_params&v=<video:id>
https://www.youtube.com/watch?other_params&v=<video:id>&more_params  

功能用途

使用该模式最简单的方法是将其包装到这样的函数中:

/**
 * JavaScript function to match (and return) the video Id
 * of any valid Youtube Url, given as input string.
 * @author: Stephan Schmitz <eyecatchup@gmail.com>
 * @url: https://stackoverflow.com/a/10315969/624466
 */
function ytVidId(url) {
  var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
  return (url.match(p)) ? RegExp.$1 : false;
}

// for example snippet only!
document.body.addEventListener('click', function(e) {
    if (e.target.className == 'yt-url' && 'undefined' !== e.target.value) {
        var ytId = ytVidId(e.target.value);
        alert(e.target.value + "\r\nResult: " + (!ytId ? 'false' : ytId));
    }
}, false);

<!-- Click the buttons to probe URLs -->
<input type="button" value="https://www.youtube.com/watch?v=p-e2G_VcTms&feature=g-logo&context=G29aead6FOAAAAAAABAA" class="yt-url">
<input type="button" value="https://www.youtube.com/latest" class="yt-url">

如果函数的结果值的类型必须是布尔值,则只需替换RegExp.$1为true.而已.

关于视频Id长度的最后一个注释:有人询问id是否有11个字符的固定长度？如果将来可能发生变化？

这个问题的最佳答案可能也是我在这里找到的唯一"官方"声明,其中说:"我没有在文档中看到我们正式承诺为YouTube视频ID标准长度为11个字符的地方这是我们目前实施的事情之一,它可能会无限期地保持这种状态.但是我们没有提供任何官方承诺,所以请自担风险."

Answer 2

^http:\/\/(?:www\.)?youtube.com\/watch\?v=\w+(&\S*)?$

//if v can be anywhere in the query list

^http:\/\/(?:www\.)?youtube.com\/watch\?(?=.*v=\w+)(?:\S+)?$