我想要得到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
我想要得到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
当前回答
/^https?:\/\/(?:(?:youtu\.be\/)|(?:(?:www\.)?youtube\.com\/(?:(?:watch\?(?:[^&]+&)?vi?=)|(?:vi?\/)|(?:shorts\/))))([a-zA-Z0-9_-]{11,})/i
下面是一个优化的正则表达式,它可以找到视频id,并准确地遵循YouTube oEmbed对embed url的定义。您可以在这里看到我与测试url的匹配:https://regex101.com/r/q4mWg1/1
它故意不匹配协议相对url(//而不是https://)和youtu-nocookie.com url,因为这些不在oEmbed定义中,从而降低了性能。
你可以在这里查看oEmbed规范: https://oembed.com/
官方提供商的定义,包括YouTube的定义,在这里:https://oembed.com/providers.json
我发现这在Wordpress网站上非常有用,我需要在帖子内容中匹配oEmbed url。
其他回答
由于YouTube视频id被设置为11个字符,我们可以简单地在用v=分割url后使用子字符串。 那么我们就不依赖于最后的&号了。
var sampleUrl = "http://www.youtube.com/watch?v=JcjoGn6FLwI&asdasd";
var video_id = sampleUrl.split("v=")[1].substring(0, 11)
很好很简单:)
铊;博士。
匹配这个问题上的所有URL示例。
let re = /(https?:\/\/)?(((m|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总是在匹配组8中。
我从这个问题的答案中抓取的所有url的实例: https://regexr.com/3u0d4
完整的说明:
正如许多回答/评论所提出的,youtube视频url有很多种格式。甚至是多个顶级域名,它们可以显示为“托管”。
您可以通过上面的regexr链接查看我检查过的变体的完整列表。
让我们分析一下RegExp。
^将字符串锁定到字符串的开始。 (https ?: \ \ /) ?可选协议http://或https:// The ?使前一项可选,因此s和整个组(括号中包含的任何内容)都是可选的。
好了,接下来的部分是最重要的部分。基本上我们有两个选项,不同版本的[optional-subdomain].youtube.com/...[id]和缩短的链接youu。/ (id)版本。
( // Start a group which will match everything after the protocol and up to just before the video id.
((m|www)\.)? // Optional subdomain, this supports looking for 'm' or '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
最后,我们有组来选择视频ID。至少一个数字、字母、下划线或破折号字符。
([_0-9a-z-]+)
通过浏览regexr链接,并查看表达式的每个部分如何与url中的文本匹配,您可以找到关于regex每个部分的更多细节。
您不需要为此使用正则表达式。
var video_id = window.location.search.split('v=')[1];
var ampersandPosition = video_id.indexOf('&');
if(ampersandPosition != -1) {
video_id = video_id.substring(0, ampersandPosition);
}
回答很好,但我最近发现,如果你试图在文本中找到你的youtube链接,并在youtube url后放置一些随机文本,regexp匹配的方式比需要的更多。改进的Chris Nolet回答:
- ^ * (?): youtu。be | u - v | \ \ \ w / |嵌入- | watch \ v ? =)([^#\&\?]{ 11,11})。* /
var video_url = document.getElementById('youtubediv').value;
if(video_url!=""){
ytid(video_url);
document.getElementById("youtube").setAttribute("src","http://www.youtube.com/embed/"+ytid(video_url));
}
function ytid(video_url){
var video_id = video_url.split('v=')[1];
var ampersandPosition = video_id.indexOf('&');
if(ampersandPosition != -1) {
video_id = video_id.substring(0, ampersandPosition);
}
return video_id;
}
我希望它能有所帮助