jQuery Youtube的URLvalidation与正则expression式
我知道有很多问题在这里回答https://stackoverflow.com/questions/tagged/youtube+regex ，但不能find类似于我的问题。
任何机构都有JavaScript正则expression式来validation下面列出的YouTubevideourl的行。 只是想知道这样的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'); }
^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+)?$
ULTIMATE 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的正则expression式看起来不错，一见钟情。 但它：
- 与包含破折号（ – ）的videoID不匹配，
- 不validationid长度（
v=aa和v=aaaaaaaaaaaaaaaaaa返回有效）， - 并且完全不符合安全的URL（http：//youtube.com/watch？valid_params）
为了匹配https，破折号字符，并validationID长度，这是我最初的build议修改后的Amarghosh的正则expression式：
^https?:\/\/(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$
更新1：url与string
发布上述模式后，我被问到： “如果URL是这样的，
youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4 “ ？
首先，请注意，这不是一个URL 。 符合RFC的URL必须以该scheme开始！ ;）
无论如何，要匹配任何types的string ，指示一个YouTubevideo，我更新了我的答案，排除所需的URLscheme。 所以我的第二个build议如下：
^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$
更新2：最终的正则expression式
然后我被要求增加对“特例”的支持。 youtu.be短的url。 起初我没有添加这些，因为这不是问题的具体部分。 不过，我现在更新了所有可能的“特殊情况” 。 这意味着我不仅添加了对youtu.be链接的支持，而且还添加了请求path“/ v”和“/ embed”。
那么，我可以介绍一下：我的最终和最终的Youtube正则expression式：
^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$
什么string匹配？
现在这个模式可以用于任何string，格式如下：
没有scheme和子域（域：youtu.be，path：/）
youtu.be/<video:id>
没有scheme，与子域（域：youtu.be，path：/）
www.youtu.be/<video:id>
使用HTTPscheme，无子域（域：youtu.be，path：/）
http://youtu.be/<video:id>
使用HTTPscheme和子域（域：youtu.be，path：/）
http://www.youtu.be/<video:id>
使用HTTPSscheme，无子域（域：youtu.be，path：/）
https://youtu.be/<video:id>
使用HTTPSscheme和子域（域：youtu.be，path：/）
https://www.youtu.be/<video:id>
没有scheme和子域（域：youtube.com，path：/embedded）
youtube.com/embed/<video:id> youtube.com/embed/<video:id>&other_params
没有scheme，与子域（域：youtube.com，path：/embedded）
www.youtube.com/embed/<video:id> www.youtube.com/embed/<video:id>&other_params
使用HTTPscheme，无子域（域：youtube.com，path：/embedded）
http://youtube.com/embed/<video:id> http://youtube.com/embed/<video:id>&other_params
使用HTTPscheme和子域（域：youtube.com，path：/embedded）
http://www.youtube.com/embed/<video:id> http://www.youtube.com/embed/<video:id>&other_params
使用HTTPSscheme，无子域（域：youtube.com，path：/embedded）
https://youtube.com/embed/<video:id> https://youtube.com/embed/<video:id>&other_params
使用HTTPSscheme和子域（域：youtube.com，path：/embedded）
https://www.youtube.com/embed/<video:id> https://www.youtube.com/embed/<video:id>&other_params
没有scheme和子域名（域：youtube.com，path：/ v）
youtube.com/v/<video:id> youtube.com/v/<video:id>&other_params
没有scheme，与子域（域：youtube.com，path：/ v）
www.youtube.com/v/<video:id> www.youtube.com/v/<video:id>&other_params
使用HTTPscheme，无子域（域：youtube.com，path：/ v）
http://youtube.com/v/<video:id> http://youtube.com/v/<video:id>&other_params
使用HTTPscheme和子域（域：youtube.com，path：/ v）
http://www.youtube.com/v/<video:id> http://www.youtube.com/v/<video:id>&other_params
使用HTTPSscheme，无子域（域：youtube.com，path：/ v）
https://youtube.com/v/<video:id> https://youtube.com/v/<video:id>&other_params
使用HTTPSscheme和子域（域：youtube.com，path：/ v）
https://www.youtube.com/v/<video:id> https://www.youtube.com/v/<video:id>&other_params
没有scheme和子域名（域：youtube.com，path：/手表）
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
没有scheme，与子域（域：youtube.com，path：/手表）
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
使用HTTPscheme，无子域名（域：youtube.com，path：/手表）
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
使用HTTPscheme和子域（域：youtube.com，path：/手表）
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
使用HTTPSscheme，无子域名（域：youtube.com，path：/手表）
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
使用HTTPSscheme和子域（域：youtube.com，path：/手表）
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
function使用
使用这个模式最简单的方法就是把它包装成一个这样的函数：
/** * 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">
您不能将id部分与\ w +相匹配，因为它不包含破折号字符（ – ）。 [a-zA-Z0-9 _-] +会更正确一些。
@eyecatchup ubove有一个优秀的正则expression式，但在regexper.com的帮助下，我看到他的正则expression式会传递任何youtube url，其中？v参数的值是任何单词或 – 重复11次的符号。 但YouTube专门将videoID限制为11个字符，所以他的正则expression式的修复将是
/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((.|-){11})(?:\S+)?$/
比较他的正则expression式的vizualization
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个字符的限制在将来改变，那么当前的正则expression式意味着任何单词或 – 将不得不被重复正好11次，我的修复是
/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11,})(?:\S+)?$/
@ eyecatchUp伟大的正则expression式的改进：
- 添加对m.youtube.com域的支持
- 通过@Nijikokun添加对youtube-nocookie.com域的支持
^(?: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
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; }
