Javascript 如何从 URL 获取 YouTube 视频 ID？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3452546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get the YouTube video ID from a URL?
提问by Adam
I want to get the v=idfrom YouTube's URL with JavaScript (no jQuery, pure JavaScript).
我想v=id使用 JavaScript（没有 jQuery，纯 JavaScript）从 YouTube 的 URL 中获取。
Example YouTube URL formats
YouTube URL 格式示例
http://www.youtube.com/watch?v=u8nQa1cJyX8&a=GxdCwVVULXctT2lYDEPllDR0LRTutYfW
http://www.youtube.com/watch?v=u8nQa1cJyX8&a=GxdCwVVULXctT2lYDEPllDR0LRTutYfW
http://www.youtube.com/watch?v=u8nQa1cJyX8
http://www.youtube.com/watch?v=u8nQa1cJyX8
Or any other YouTube format that contains a video ID in the URL.
或者在 URL 中包含视频 ID 的任何其他 YouTube 格式。
Result from these formats
这些格式的结果
u8nQa1cJyX8
u8nQa1cJyX8
采纳答案by Jacob Relkin
You don't need to use a regular expression for this.
您不需要为此使用正则表达式。
var video_id = window.location.search.split('v=')[1];
var ampersandPosition = video_id.indexOf('&');
if(ampersandPosition != -1) {
video_id = video_id.substring(0, ampersandPosition);
}
回答by Lasnv
I made an enhancement to Regex provided by "jeffreypriebe" because he needed a kind of YouTube URL is the URL of the videos when they are looking through a channel.
我对“jeffreypriebe”提供的正则表达式进行了增强，因为他需要一种 YouTube URL，即视频在浏览频道时的 URL。
Well no but this is the function that I have armed.
好吧，不，但这是我武装的功能。
<script type="text/javascript">
function youtube_parser(url){
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
var match = url.match(regExp);
return (match&&match[7].length==11)? match[7] : false;
}
</script>
These are the types of URLs supported
这些是支持的 URL 类型
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
Can be found in [http://web.archive.org/web/20160926134334/] http://lasnv.net/foro/839/Javascript_parsear_URL_de_YouTube
回答by mantish
I simplified Lasnv's answer a bit.
我稍微简化了 Lasnv 的回答。
It also fixes the bug that WebDeb describes.
它还修复了 WebDeb 描述的错误。
Here it is:
这里是：
var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
return match[2];
} else {
//error
}
Here is a regexer link to play with: http://regexr.com/3dnqv
这是一个可以使用的正则表达式链接：http://regexr.com/3dnqv
回答by J W
None of these worked on the kitchen sink as of 1/1/2015, notably URLs without protocal http/s and with youtube-nocookie domain. So here's a modified version that works on all these various Youtube versions:
截至 2015 年 1 月 1 日，这些都不适用于厨房水槽，尤其是没有 http/s 协议和 youtube-nocookie 域的 URL。所以这是一个适用于所有这些不同 Youtube 版本的修改版本：
// Just the regex. Output is in [1].
/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/
// For testing.
var urls = [
'//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\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
for (i = 0; i < urls.length; ++i) {
r = urls[i].match(rx);
console.log(r[1]);
}
回答by xronosiam
/^.*(youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*/
Tested on:
测试：
- 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
- 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
Inspired by this other answer.
受到另一个答案的启发。
回答by jeffreypriebe
Given that YouTube has a variety of URL styles, I think Regex is a better solution. Here is my Regex:
鉴于 YouTube 有多种 URL 样式，我认为 Regex 是一个更好的解决方案。这是我的正则表达式：
^.*(youtu.be\/|v\/|embed\/|watch\?|youtube.com\/user\/[^#]*#([^\/]*?\/)*)\??v?=?([^#\&\?]*).*
Group 3 has your YouTube ID
第 3 组有您的 YouTube ID
Sample YouTube URLs (currently, including "legacy embed URL style") - the above Regex works on all of them:
YouTube URL 示例（目前包括“传统嵌入 URL 样式”）——上述正则表达式适用于所有这些：
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/QdK8U-VIH_o
Hat tip to Lasnv
对 Lasnv 的提示
回答by Joakim
I created a function that tests a users input for Youtube, Soundcloud or Vimeo embed ID's, to be able to create a more continous design with embedded media. This function detects and returns an object withtwo properties: "type" and "id". Type can be either "youtube", "vimeo" or "soundcloud" and the "id" property is the unique media id.
我创建了一个函数来测试用户对 Youtube、Soundcloud 或 Vimeo 嵌入 ID 的输入，以便能够使用嵌入式媒体创建更连续的设计。此函数检测并返回具有两个属性的对象：“type”和“id”。类型可以是“youtube”、“vimeo”或“soundcloud”，“id”属性是唯一的媒体 ID。
On the site I use a textarea dump, where the user can paste in any type of link or embed code, including the iFrame-embedding of both vimeo and youtube.
在网站上，我使用 textarea 转储，用户可以在其中粘贴任何类型的链接或嵌入代码，包括 vimeo 和 youtube 的 iFrame 嵌入。
function testUrlForMedia(pastedData) {
var success = false;
var media = {};
if (pastedData.match('http://(www.)?youtube|youtu\.be')) {
if (pastedData.match('embed')) { youtube_id = pastedData.split(/embed\//)[1].split('"')[0]; }
else { youtube_id = pastedData.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0]; }
media.type = "youtube";
media.id = youtube_id;
success = true;
}
else if (pastedData.match('http://(player.)?vimeo\.com')) {
vimeo_id = pastedData.split(/video\/|http:\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
media.type = "vimeo";
media.id = vimeo_id;
success = true;
}
else if (pastedData.match('http://player\.soundcloud\.com')) {
soundcloud_url = unescape(pastedData.split(/value="/)[1].split(/["]/)[0]);
soundcloud_id = soundcloud_url.split(/tracks\//)[1].split(/[&"]/)[0];
media.type = "soundcloud";
media.id = soundcloud_id;
success = true;
}
if (success) { return media; }
else { alert("No valid media id detected"); }
return false;
}
回答by podperson
Late to the game here, but I've mashed up two excellent responses from mantish and j-w. First, the modified regex:
在这里比赛晚了，但我已经融合了 mantish 和 jw 的两个出色的回应。首先，修改后的正则表达式：
const youtube_regex = /^.*(youtu\.be\/|vi?\/|u\/\w\/|embed\/|\?vi?=|\&vi?=)([^#\&\?]*).*/
Here's the test code (I've added mantish's original test cases to j-w's nastier ones):
这是测试代码（我已经将 mantish 的原始测试用例添加到 jw 的更讨厌的测试用例中）：
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');
}
Experimental version to handle the m.youtubeurls mentioned in comments:
处理评论中提到的m.youtube网址的实验版本：
const youtube_regex = /^.*((m\.)?youtu\.be\/|vi?\/|u\/\w\/|embed\/|\?vi?=|\&vi?=)([^#\&\?]*).*/
It requires parsed[2]to be changed to parsed[3]in two places in the tests (which it then passes with m.youtubeurls added to the tests). Let me know if you see problems.
它需要在测试中的两个地方parsed[2]更改为parsed[3]（然后通过m.youtube添加到测试中的 url）。如果您发现问题，请告诉我。
回答by tsdorsey
tl;dr.
tl;博士。
Matches all URL examples on this question and then some.
匹配此问题的所有 URL 示例，然后匹配一些示例。
let re = /^(https?:\/\/)?((www\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)([_0-9a-z-]+)/i;
let id = "https://www.youtube.com/watch?v=l-gQLqv9f4o".match(re)[7];
ID will always be in match group 7.
ID 将始终在比赛组 7 中。
Live examples of all the URLs I grabbed from the answers to this question: https://regexr.com/3u0d4
我从这个问题的答案中获取的所有 URL 的实时示例：https: //regexr.com/3u0d4
Full explanation:
完整解释：
As many answers/comments have brought up, there are many formats for youtube video URLs. Even multiple TLDs where they can appear to be "hosted".
由于提出了许多答案/评论，因此 YouTube 视频 URL 有多种格式。甚至多个 TLD 看起来像是“托管”的。
You can look at the full list of variations I checked against by following the regexr link above.
您可以通过上面的 regexr 链接查看我检查过的完整变体列表。
Lets break down the RegExp.
让我们分解正则表达式。
^Lock the string to the start of the string.
(https?:\/\/)?Optional protocols http:// or https:// The ?makes the preceding item optional so the sand then the entire group (anything enclosed in a set of parenthesis) are optional.
^将字符串锁定到字符串的开头。
(https?:\/\/)?可选协议 http:// 或 https://?使前面的项目可选，因此s整个组（括在一组括号中的任何内容）都是可选的。
Ok, this next part is the meat of it. Basically we have two options, the various versions of www.youtube.com/...[id] and the link shortened youtu.be/[id] version.
好的，下一部分是它的肉。基本上我们有两个选择，各种版本的 www.youtube.com/...[id] 和链接缩短的 youtu.be/[id] 版本。
( // Start a group which will match everything after the protocol and up to just before the video id.
(www\.)? // Optional www.
(youtube(-nocookie)?|youtube.googleapis) // There are three domains where youtube videos can be accessed. This matches them.
\.com // The .com at the end of the domain.
.* // Match anything
(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/) // These are all the things that can come right before the video id. The | character means OR so the first one in the "list" matches.
| // There is one more domain where you can get to youtube, it's the link shortening url which is just followed by the video id. This OR separates all the stuff in this group and the link shortening url.
youtu\.be\/ // The link shortening domain
) // End of group
Finally we have the group to select the video ID. At least one character that is a number, letter, underscore, or dash.
最后，我们让组来选择视频 ID。至少一个字符是数字、字母、下划线或破折号。
([_0-9a-z-]+)
You can find out much more detail about each part of the regex by heading over the regexr link and seeing how each part of the expression matches with the text in the url.
通过转到 regexr 链接并查看表达式的每个部分如何与 url 中的文本匹配，您可以找到有关 regex 的每个部分的更多详细信息。
回答by Vlad
The best solution (from 2019-2020) I found is that:
我发现的最佳解决方案（从 2019-2020 年）是：
function YouTubeGetID(url){
url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
}
I found it here.
/*
* Tested URLs:
var url = 'http://youtube.googleapis.com/v/4e_kz79tjb8?version=3';
url = 'https://www.youtube.com/watch?feature=g-vrec&v=Y1xs_xPb46M';
url = 'http://www.youtube.com/watch?feature=player_embedded&v=Ab25nviakcw#';
url = 'http://youtu.be/Ab25nviakcw';
url = 'http://www.youtube.com/watch?v=Ab25nviakcw';
url = '<iframe width="420" height="315" src="http://www.youtube.com/embed/Ab25nviakcw" frameborder="0" allowfullscreen></iframe>';
url = '<object width="420" height="315"><param name="movie" value="http://www.youtube-nocookie.com/v/Ab25nviakcw?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/Ab25nviakcw?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>';
url = 'http://i1.ytimg.com/vi/Ab25nviakcw/default.jpg';
url = 'https://www.youtube.com/watch?v=BGL22PTIOAM&feature=g-all-xit';
url = 'BGL22PTIOAM';
*/
