javascript - jQuery Youtube URL Validation with regex

Question

I know there is plenty of question 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');
}

Answer 1

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 <[email protected]>
 * @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 <[email protected]>
 * @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 + "
Result: " + (!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">