我想要得到v=id从YouTube的URL与JavaScript(没有jQuery，纯JavaScript)。
YouTube URL格式示例
http://www.youtube.com/watch?v=u8nQa1cJyX8&a=GxdCwVVULXctT2lYDEPllDR0LRTutYfW
http://www.youtube.com/watch?v=u8nQa1cJyX8
或在URL中包含视频ID的任何其他YouTube格式。
这些格式的结果
u8nQa1cJyX8
当前回答
截至2015年1月1日，这些都不能在厨房里工作，特别是没有http/s协议和youtube-nocookie域的url。这里有一个修改过的版本，适用于所有这些不同的Youtube版本:
// Just the regex. Output is in [1]. /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/ // For testing. var urls = [ 'https://youtube.com/shorts/dQw4w9WgXcQ?feature=share', '//www.youtube-nocookie.com/embed/up_lNV-yoK4?rel=0', 'http://www.youtube.com/user/Scobleizer#p/u/1/1p3vcRhsYGo', 'http://www.youtube.com/watch?v=cKZDdG9FTKY&feature=channel', 'http://www.youtube.com/watch?v=yZ-K7nCVnBI&playnext_from=TL&videos=osPknwzXEas&feature=sub', 'http://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I', 'http://www.youtube.com/user/SilkRoadTheatre#p/a/u/2/6dwqZw0j_jY', 'http://youtu.be/6dwqZw0j_jY', 'http://www.youtube.com/watch?v=6dwqZw0j_jY&feature=youtu.be', 'http://youtu.be/afa-5HQHiAs', 'http://www.youtube.com/user/Scobleizer#p/u/1/1p3vcRhsYGo?rel=0', 'http://www.youtube.com/watch?v=cKZDdG9FTKY&feature=channel', 'http://www.youtube.com/watch?v=yZ-K7nCVnBI&playnext_from=TL&videos=osPknwzXEas&feature=sub', 'http://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I', 'http://www.youtube.com/embed/nas1rJpm7wY?rel=0', 'http://www.youtube.com/watch?v=peFZbP64dsU', 'http://youtube.com/v/dQw4w9WgXcQ?feature=youtube_gdata_player', 'http://youtube.com/vi/dQw4w9WgXcQ?feature=youtube_gdata_player', 'http://youtube.com/?v=dQw4w9WgXcQ&feature=youtube_gdata_player', 'http://www.youtube.com/watch?v=dQw4w9WgXcQ&feature=youtube_gdata_player', 'http://youtube.com/?vi=dQw4w9WgXcQ&feature=youtube_gdata_player', 'http://youtube.com/watch?v=dQw4w9WgXcQ&feature=youtube_gdata_player', 'http://youtube.com/watch?vi=dQw4w9WgXcQ&feature=youtube_gdata_player', 'http://youtu.be/dQw4w9WgXcQ?feature=youtube_gdata_player' ]; var i, r, rx = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/; for (i = 0; i < urls.length; ++i) { r = urls[i].match(rx); console.log(r[1]); }
其他回答
截至2015年1月1日，这些都不能在厨房里工作，特别是没有http/s协议和youtube-nocookie域的url。这里有一个修改过的版本，适用于所有这些不同的Youtube版本:
// Just the regex. Output is in [1]. /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/ // For testing. var urls = [ 'https://youtube.com/shorts/dQw4w9WgXcQ?feature=share', '//www.youtube-nocookie.com/embed/up_lNV-yoK4?rel=0', 'http://www.youtube.com/user/Scobleizer#p/u/1/1p3vcRhsYGo', 'http://www.youtube.com/watch?v=cKZDdG9FTKY&feature=channel', 'http://www.youtube.com/watch?v=yZ-K7nCVnBI&playnext_from=TL&videos=osPknwzXEas&feature=sub', 'http://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I', 'http://www.youtube.com/user/SilkRoadTheatre#p/a/u/2/6dwqZw0j_jY', 'http://youtu.be/6dwqZw0j_jY', 'http://www.youtube.com/watch?v=6dwqZw0j_jY&feature=youtu.be', 'http://youtu.be/afa-5HQHiAs', 'http://www.youtube.com/user/Scobleizer#p/u/1/1p3vcRhsYGo?rel=0', 'http://www.youtube.com/watch?v=cKZDdG9FTKY&feature=channel', 'http://www.youtube.com/watch?v=yZ-K7nCVnBI&playnext_from=TL&videos=osPknwzXEas&feature=sub', 'http://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I', 'http://www.youtube.com/embed/nas1rJpm7wY?rel=0', 'http://www.youtube.com/watch?v=peFZbP64dsU', 'http://youtube.com/v/dQw4w9WgXcQ?feature=youtube_gdata_player', 'http://youtube.com/vi/dQw4w9WgXcQ?feature=youtube_gdata_player', 'http://youtube.com/?v=dQw4w9WgXcQ&feature=youtube_gdata_player', 'http://www.youtube.com/watch?v=dQw4w9WgXcQ&feature=youtube_gdata_player', 'http://youtube.com/?vi=dQw4w9WgXcQ&feature=youtube_gdata_player', 'http://youtube.com/watch?v=dQw4w9WgXcQ&feature=youtube_gdata_player', 'http://youtube.com/watch?vi=dQw4w9WgXcQ&feature=youtube_gdata_player', 'http://youtu.be/dQw4w9WgXcQ?feature=youtube_gdata_player' ]; var i, r, rx = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/; for (i = 0; i < urls.length; ++i) { r = urls[i].match(rx); console.log(r[1]); }
虽然说得太晚了，但我已经把mantish和j-w的两个精彩回答搞混了。首先，修改后的正则表达式:
const youtube_regex = /^.*(youtu\.be\/|vi?\/|u\/\w\/|embed\/|\?vi?=|\&vi?=)([^#\&\?]*).*/
下面是测试代码(我已经将mantish的原始测试用例添加到j-w的更糟糕的测试用例中):
var urls = [
'http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index',
'http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/QdK8U-VIH_o',
'http://www.youtube.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0',
'http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s',
'http://www.youtube.com/embed/0zM3nApSvMg?rel=0',
'http://www.youtube.com/watch?v=0zM3nApSvMg',
'http://youtu.be/0zM3nApSvMg',
'//www.youtube-nocookie.com/embed/up_lNV-yoK4?rel=0',
'http://www.youtube.com/user/Scobleizer#p/u/1/1p3vcRhsYGo',
'http://www.youtube.com/watch?v=cKZDdG9FTKY&feature=channel',
'http://www.youtube.com/watch?v=yZ-K7nCVnBI&playnext_from=TL&videos=osPknwzXEas&feature=sub',
'http://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I',
'http://www.youtube.com/user/SilkRoadTheatre#p/a/u/2/6dwqZw0j_jY',
'http://youtu.be/6dwqZw0j_jY',
'http://www.youtube.com/watch?v=6dwqZw0j_jY&feature=youtu.be',
'http://youtu.be/afa-5HQHiAs',
'http://www.youtube.com/user/Scobleizer#p/u/1/1p3vcRhsYGo?rel=0',
'http://www.youtube.com/watch?v=cKZDdG9FTKY&feature=channel',
'http://www.youtube.com/watch?v=yZ-K7nCVnBI&playnext_from=TL&videos=osPknwzXEas&feature=sub',
'http://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I',
'http://www.youtube.com/embed/nas1rJpm7wY?rel=0',
'http://www.youtube.com/watch?v=peFZbP64dsU',
'http://youtube.com/v/dQw4w9WgXcQ?feature=youtube_gdata_player',
'http://youtube.com/vi/dQw4w9WgXcQ?feature=youtube_gdata_player',
'http://youtube.com/?v=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://www.youtube.com/watch?v=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtube.com/?vi=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtube.com/watch?v=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtube.com/watch?vi=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtu.be/dQw4w9WgXcQ?feature=youtube_gdata_player'
];
var failures = 0;
urls.forEach(url => {
const parsed = url.match(youtube_regex);
if (parsed && parsed[2]) {
console.log(parsed[2]);
} else {
failures++;
console.error(url, parsed);
}
});
if (failures) {
console.error(failures, 'failed');
}
实验版处理评论中提到的m.b utube网址:
const youtube_regex = /^.*((m\.)?youtu\.be\/|vi?\/|u\/\w\/|embed\/|\?vi?=|\&vi?=)([^#\&\?]*).*/
它需要在测试中的两个地方将已解析的[2]更改为已解析的[3](然后通过将m.u utube urls添加到测试中)。如果你发现问题请告诉我。
回答很好，但我最近发现，如果你试图在文本中找到你的youtube链接，并在youtube url后放置一些随机文本，regexp匹配的方式比需要的更多。改进的Chris Nolet回答:
- ^ * (?): youtu。be | u - v | \ \ \ w / |嵌入- | watch \ v ? =)([^#\&\?]{ 11,11})。* /
/^.*(youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*/
测试:
http://www.youtube.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0 http://www.youtube.com/embed/0zM3nApSvMg?rel=0 http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index http://www.youtube.com/watch?v=0zM3nApSvMg http://youtu.be/0zM3nApSvMg http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/KdwsulMb8EQ http://youtu.be/dQw4w9WgXcQ http://www.youtube.com/embed/dQw4w9WgXcQ http://www.youtube.com/v/dQw4w9WgXcQ http://www.youtube.com/e/dQw4w9WgXcQ http://www.youtube.com/watch?v=dQw4w9WgXcQ http://www.youtube.com/?v=dQw4w9WgXcQ http://www.youtube.com/watch?feature=player_embedded&v=dQw4w9WgXcQ http://www.youtube.com/?feature=player_embedded&v=dQw4w9WgXcQ http://www.youtube.com/user/IngridMichaelsonVEVO#p/u/11/KdwsulMb8EQ http://www.youtube-nocookie.com/v/6L3ZvIMwZFM?version=3&hl=en_US&rel=0
受到另一个答案的启发。
这个正则表达式匹配嵌入、共享和链接url。
const youTubeIdFromLink = (url) => url.match(/(?:https?:\/\/)?(?:www\.|m\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\/?\?v=|\/embed\/|\/)([^\s&\?\/\#]+)/)[1];
console.log(youTubeIdFromLink('https://youtu.be/You-Tube_ID?rel=0&hl=en')); //You-Tube_ID
console.log(youTubeIdFromLink('https://www.youtube.com/embed/You-Tube_ID?rel=0&hl=en')); //You-Tube_ID
console.log(youTubeIdFromLink('https://m.youtube.com/watch?v=You-Tube_ID&rel=0&hl=en')); //You-Tube_ID
推荐文章
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 使用String.split()和多个分隔符
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- 数组的indexOf函数和findIndex函数的区别
- jQuery添加必要的输入字段
