代码之家 › 专栏 › 技术社区 › Mithun Sreedharan Kuldeep Modi

使用regex进行jQuery Youtube URL验证

youtube url regex jquery javascript

Mithun Sreedharan Kuldeep Modi · 技术社区 · 14 年前

我知道这里有很多问题需要回答 https://stackoverflow.com/questions/tagged/youtube+regex ,但找不到和我类似的问题。

任何主体都有JavaScript正则表达式来验证下面列出的YouTube视频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');
}

7 回复 | 直到 7 年前

Amarghosh 14 年前

^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+)?$

189

Community davidgyoung 7 年前

终极YOUTUBE正则表达式

樱桃采摘

因为解释越来越长,我把最终结果放在最上面。随意复制+粘贴,继续你的路。有关详细解释,请阅读

/**
 * 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's regex

与包含破折号(-)的视频id不匹配,
不验证id长度( v=aa 和 v=aaaaaaaaaaaaaaaaaa
与安全URL完全不匹配(http ://youtube.com/watch?有效的\u参数)

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

更新1:URL与字符串

“如果是这样的;
youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4 " ?

首先,请注意这不是 统一资源定位地址 完全。 RFC compliant URLs 必须从方案开始!;)

不管怎样,要匹配任何类型的一串这表示要引用YouTube视频,我更新了我的答案以排除所需的URL方案。所以我的第二个建议是:

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

更新2:终极正则表达式

可能的 . 这意味着我不仅添加了对youtu.be链接的支持,而且还添加了请求路径“/v”和“/embed”。

那么,请允许我介绍一下:我的最终Youtube正则表达式:

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

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

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

youtu.be/<video:id>

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

www.youtu.be/<video:id>

使用HTTP方案,无子域(域:youtu.be,路径:/)

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

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

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

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

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

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/<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

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

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

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

使用HTTP方案和子域(域:youtube.com,路径:/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方案和子域(域:youtube.com,路径:/v)

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

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方案,无子域(域:youtube.com,路径:/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方案和子域(域:youtube.com,路径:/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方案和子域(域:youtube.com,路径:/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个字符的固定长度?如果将来会改变呢?

对这个问题最好的回答可能也是我找到的唯一的“官方”声明 here 上面写着: “我在文档中没有看到任何地方正式承诺YouTube视频ID的标准长度为11个字符。这是我们当前实现的一个方面,它可能会无限期地保持这种状态。但我们并没有对此作出任何官方承诺,因此请自行承担风险。”

safdsas 14 年前

Blagoj Atanasovski 11 年前

@eyecatchup ubove有一个出色的正则表达式,但是在regexper.com的帮助下我看到他的正则表达式会传递任何youtube的url,其中?v参数的值是任何单词或-符号,重复11次。但是youtube特别限制了视频id为11个字符,所以他的regex的修正是

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

http://www.regexper.com/#/%5E%28?:https?:%5C/%5C/%29?%28?:www%5C.%29?%28?:youtu%5C.be%5C/%7Cyoutube%5C.com%5C/%28?:embed%5C/%7Cv%5C/%7Cwatch%5C?v=%7Cwatch%5C?.%2b&v=%29%29%28%28%5Cw%7C-%29%7B11%7D%29%28?:%5CS%2b%29?$/

还有我的解决方案

http://www.regexper.com/#%2F%5E(%3F%3Ahttps%3F%3A%5C%2F%5C%2F)%3F(%3F%3Awww%5C.)%3F(%3F%3Ayoutu%5C.be%5C%2F%7Cyoutube%5C.com%5C%2F(%3F%3Aembed%5C%2F%7Cv%5C%2F%7Cwatch%5C%3Fv%3D%7Cwatch%5C%3F.%2B%26v%3D))((%5Ba-zA-Z0-9%5D%7C-)%7B11%7D)(%3F%3A%5CS%2B)%3F%24%2F

作为对未来11个字符限制的修改,那么当前的正则表达式意味着任何单词或-都必须重复11次,我的修正是

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

Mrskman 9 年前

添加对m.youtube.com域的支持

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

正则表达式:

http://regexper.com/#%5E(%3F%3Ahttps%3F%3A%5C%2F%5C%2F)%3F(%3F%3A(%3F%3Awww%7Cm)%5C.)%3F(%3F%3Ayoutu%5C.be%5C%2F%7Cyoutube(%3F%3A-nocookie)%3F%5C.com%5C%2F(%3F%3Aembed%5C%2F%7Cv%5C%2F%7Cwatch%5C%3Fv%3D%7Cwatch%5C%3F.%2B%26v%3D))((%5Cw%7C-)%7B11%7D)(%3F%3A%5CS%2B)%3F%24

Someshver Thakur 4 年前

 /* test youtube */
 var src = "https://www.youtube.com/watch?v=HCPLKrRguDM";
  regExTestYT(src);
   function regExTestYT(str){
   var exp = new RegExp(/(youtu\.be|youtube\.com)/);
   return exp.test(str); 
  }

-2

HiTech 11 年前

function get_youtube_video_id_from_url(url){
    var code = url.match(/v=([^&#]{5,})/)
    return (typeof code[1] == 'string') ? code[1] : false;
}

-4

Taryn 11 年前

function validYT(url) {
  var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
  return (url.match(p)) ? RegExp.$1 : false;
}