开发者

jQuery Youtube URL Validation with regex

开发者 https://www.devze.com 2023-01-02 07:14 出处：网络
I know there is plenty of ques开发者_StackOverflowtion answered over here https://stackoverflow.com/questions/tagged/youtube+regex, but not able find a question similar to me.
相关专题：javascriptjqueryregexyoutube

I know there is plenty of ques开发者_StackOverflowtion answered over here https://stackoverflow.com/questions/tagged/youtube+regex, but not able find a question similar to me.

Any body has the JavaScript Regular expression for validating the YouTube VIDEO URL's line below listed. Just want to know where such a URL can be possible

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

-- update 1-- -- update 2--

This one worked almost fine, but failed for the URL 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');
}

ULTIMATE YOUTUBE REGEX

Cherry picking

Because the explanation is getting longer and longer, I place the final result at the top. Feel free to copy+paste, and go on your way. For a detailed explanation, read _"the full story"_ below. 
/**
 * 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;
}

The full story

Amarghosh's regex looks good, at first sight. But it:

  1. doesn't match video id's that include dashes (-),
  2. doesn't validate the id length (v=aa and v=aaaaaaaaaaaaaaaaaa return to be valid),
  3. and doesn't match secured URLs at all (https://youtube.com/watch?valid_params)

To match https, the dash character, and to validate the id length, this was my initial suggestion of a modified version of Amarghosh's regex:

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

UPDATE 1: URLs versus Strings

After I posted the above pattern, I was asked: "What if the URL is like this;
youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4"?

First of, please note that this not a URL at all. RFC compliant URLs must start with the scheme! ;)

Anyway, to match any kind of string that indicates to refer to a YouTube video, I updated my answer to exclude the URL scheme being required. So my second suggestion was as follows:

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

UPDATE 2: The ultimate regex

Then I was asked to add support for a "special case"; the youtu.be short urls. Initially I did not add these, since it wasn't specifically part of the question. However I updated my answer now with all possible "special cases". This means that not only have I added support for youtu.be links, but also the request paths "/v" and "/embed".

So, may I introduce: My final and ultimate Youtube regex:

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

What strings are matched?

Now this pattern will work for any strings, formatted as follows:

Without scheme and subdomain (Domain: youtu.be, Path: /)

youtu.be/<video:id>

Without scheme, with subdomain (Domain: youtu.be, Path: /)

www.youtu.be/<video:id>

With HTTP scheme, without subdomain (Domain: youtu.be, Path: /)

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

With HTTP scheme and subdomain (Domain: youtu.be, Path: /)

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

With HTTPS scheme, without subdomain (Domain: youtu.be, Path: /)

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

With HTTPS scheme and subdomain (Domain: youtu.be, Path: /)

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

Without scheme and subdomain (Domain: youtube.com, Path: /embed)

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

Without scheme, with subdomain (Domain: youtube.com, Path: /embed)

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

With HTTP scheme, without subdomain (Domain: youtube.com, Path: /embed)

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

With HTTP scheme and subdomain (Domain: youtube.com, Path: /embed)

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

With HTTPS scheme, without subdomain (Domain: youtube.com, Path: /embed)

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

With HTTPS scheme and subdomain (Domain: youtube.com, Path: /embed)

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

Without scheme and subdomain (Domain: youtube.com, Path: /v)

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

Without scheme, with subdomain (Domain: youtube.com, Path: /v)

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

With HTTP scheme, without subdomain (Domain: youtube.com, Path: /v)

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

With HTTP scheme and subdomain (Domain: youtube.com, Path: /v)

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

With HTTPS scheme, without subdomain (Domain: youtube.com, Path: /v)

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

With HTTPS scheme and subdomain (Domain: youtube.com, Path: /v)

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

Without scheme and subdomain (Domain: youtube.com, Path: /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

Without scheme, with subdomain (Domain: youtube.com, Path: /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

With HTTP scheme, without subdomain (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

With HTTP scheme and subdomain (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

With HTTPS scheme, without subdomain (Domain: youtube.com, Path: /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

With HTTPS scheme and subdomain (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

FUNCTIONAL USAGE

The most easy way to use the pattern, is to wrap it into a function such as this one:

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

If the type of the function's result value must be a boolean value, just replace RegExp.$1 by true. That's it.

One final note on the video Id length: One asked if the ids have a fixed length of 11 chars? and if it might change in the future?

The best answer to that question is probably also the only "official" statement that I've found here and which says: "I don't see anywhere in the documentation where we officially commit to a standard length of 11 characters for YouTube video ids. It's one of those things where we have a current implementation, and it may stay that way indefinitely. But we're not offering any official commitment to that, so proceed at your own risk."

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

You can not match the id-part with \w+, as it does not include the dash character (-). [a-zA-Z0-9_-]+ would be something more correct.

@eyecatchup ubove has an excelent regex, but with the help of regexper.com i saw that his regex will pass any youtube url where the ?v parameter had a value of any word or - sign repeated 11 times. But youtube specificly restricts the video id to 11 characters so a fix for his regex would be

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

compare the vizualization of his regex 

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

and my fix

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

as an edit to the 11 character limit changing in future then the current regex would mean that any word or - would have to be repeated exactly 11 times, to that my fix is 

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

Improvement for @eyecatchUp's great regex:

  1. Add support for m.youtube.com domain
  2. Add support for youtube-nocookie.com domain by @Nijikokun
^(?:https?:\/\/)?(?:(?:www|m)\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$

Regexper:

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


 /* 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); 
  }

Here it is with Youtube shorts added:

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

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


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

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9