jQuery Youtube URL Validation with regex

by

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>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

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

http://www.youtube.com/embed/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

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

https://youtube.com/embed/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

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

https://www.youtube.com/embed/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_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>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

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

http://www.youtube.com/v/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

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

https://youtube.com/v/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

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

https://www.youtube.com/v/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_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 + "\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.”

More Related Contents:

  1. How do I get the YouTube video ID from a URL?
  2. Not able to get Regular Expression in javascript
  3. Regex for Email Address along with name format [duplicate]
  4. Regular Expression jquery validation1 [duplicate]
  5. jQuery selector regular expressions
  6. Regex to replace multiple spaces with a single space
  7. How do I get the fragment identifier (value after hash #) from a URL?
  8. How to get the anchor from the URL using jQuery?
  9. Stop a youtube video with jquery?
  10. Parsing URL hash/fragment identifier with JavaScript
  11. How to check if the URL contains a given string?
  12. Get query string parameters url values with jQuery / Javascript (querystring)
  13. Listening for Youtube Event in JavaScript or jQuery
  14. How do I automatically play a Youtube video (IFrame API) muted?
  15. Change URL and redirect using jQuery
  16. How can I select an element by ID with jQuery using regex?
  17. Regex to Match Symbols: !$%^&*()_+|~-=`{}[]:”;’?,./
  18. Javascript regex returning true.. then false.. then true.. etc [duplicate]
  19. How to replace url parameter with javascript/jquery?
  20. Regular Expression – Extract subdomain & domain
  21. Embed HTML5 YouTube video without iframe?
  22. Highlight current page in jquery
  23. How to test if a URL string is absolute or relative?
  24. JavaScript Regex to match a URL in a field of text
  25. Regex in JavaScript for validating decimal numbers
  26. REGEX: Capture Filename from URL without file extension
  27. Extract parameter value from url using regular expressions
  28. Replace url from youtube to embed code – Error: Permission denied to access property ‘toString’
  29. Match all URLs in string and return in array in JavaScript
  30. Regular Expression to MATCH ALL words in a query, in any order

Leave a Comment