数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学使用 JavaScript 从 URL 获取 YouTube 视频 ID
每个 YouTube 视频都有一个唯一的URL，我们可以通过它在浏览器中访问。每个 YouTube 视频都包含一个唯一的视频 ID，这使得 URL 唯一。有时，开发者需要从 YouTube URL 中提取视频 ID。
我们需要处理 YouTube URL 字符串才能从 URL 中提取视频 ID，我们将在本教程中进行此操作。我们将学习从完整 URL 获取视频 ID 的不同方法。
使用 split() 方法
JavaScript 包含内置的split() 方法，它允许用户通过特定分隔符将字符串拆分成多个部分。
split() 方法以分隔符作为参数，通过它将字符串拆分成多个部分，并返回包含字符串部分的数组。
语法
您可以按照以下语法使用split() 方法从 YouTube 视频 URL 中提取视频 ID。
var videoURL = "https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy"; var splited = videoURL.split("v="); var splitedAgain = splited[1].split("&"); var videoId = splitedAgain[0];
在上面的语法中，我们多次使用了 split() 方法来获取视频 ID。
步骤
用户可以按照以下步骤使用 split() 方法从 URL 中提取视频 ID。
步骤 1 - 获取视频 URL。
步骤 2 - 使用“v=”作为分隔符拆分视频 URL，这将返回长度为二的数组。数组的第二个值包含视频 ID。
步骤 3 - 现在，使用“&”作为分隔符拆分数组的第二个值，这也会将值拆分成两部分。
步骤 4 - splitedAgain 数组的第一个值包含视频 ID。
示例
在下面的示例中，我们获取了 YouTube 视频 URL。之后，我们使用了上述步骤，并使用不同的分隔符多次拆分 URL，以从 URL 中获取视频 ID。
此外，在输出中，用户可以看到存储在 split 和splitedAgain 数组中的值。
<html>
<body>
<h3>Getting the video ID from the YouTube videoURL using the <i> split() </i> Method.</h3>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
// defining the videoURL
var videoURL ="https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy";
// split URL via 'v=' delimiter
var splited = videoURL.split("v=");
//output.innerHTML += "The values of splited is " + splited + "</br>"
// take the value from the first index of splited, and split it via '&'.
var splitedAgain = splited[1].split("&");
//output.innerHTML += "The values of splitedAgain is " + splitedAgain + "</br>"
// get the value from 0th index from splitedAgain array
var videoId = splitedAgain[0];
output.innerHTML += "Video URL: <br>" + videoURL + "<br><br>";
output.innerHTML += "Video id: " + videoId;
</script>
</body>
</html>
使用正则表达式
正则表达式是一种搜索模式，允许我们搜索字符串中的特定模式。在这里，我们将搜索视频 URL 中的视频 ID。每个 YouTube URL 都在“v=”子字符串之后包含视频 ID。因此，我们可以使用正则表达式查找该模式并获取视频 ID。
语法
用户可以按照以下语法使用正则表达式从 Youtube 视频 URL 中提取视频 ID。
var videoURL = "https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy"; let regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/gm; var videoId = regex.exec(videoURL)[3];
在上面的语法中，我们使用 regex 作为参考，使用exec() 方法查找与正则表达式模式匹配的结果。
正则表达式解释
(youtu.*be.*) - 它匹配 HTTPS 之后的 youtube 域名。
/(watch\?v=|embed\/|v|shorts|) - 它匹配域名后的 /watch，或域名后的“v=”、embed 或 shorts，或仅“v”。这里，“|”表示或运算。
(.*?((?=[&#?])|$)) - 它匹配包含 ID 的不同字符串字符。
gm - “g”标志用于匹配所有出现，而“m”标志用于匹配多行。
示例
在下面的示例中，我们创建了上面解释的正则表达式，并通过将其作为参考调用了exec() 方法。此外，我们还将 videoURL 作为exec() 方法的参数传递，以将正则表达式中定义的模式与视频 URL 匹配。
exec() 方法从正确的 YouTube URL 返回四个不同的匹配项，最后一个值仅包含视频 ID。
<html>
<body>
<h3>Getting the video ID from the YouTube videoURL using the <i> regular expression</i></h3>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
// defining the videoURL
var videoURL = "https://www.youtube.com/watch?v=IZ1GYnI9a5E&ab_channel=ShareAcademy";
// defining the regular expression
let regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/gm;
var allMathces = regex.exec(videoURL);
// Matching the values
var videoId = allMathces[3];
output.innerHTML += "Video URL: <br>" + videoURL + " <br> ";
output.innerHTML += "Video id: " + videoId;
</script>
</body>
</html>
用户学习了如何从 YouTube 视频 URL 中提取视频 ID。我们只是处理了字符串，并使用了不同的字符串方法来提取视频 ID。我们在第一种方法中两次使用了split() 方法。此外，用户可以先使用split() 方法，然后使用substr() 方法，而不是两次使用split() 方法。
在第二种方法中，用户可以使用带有正则表达式的match() 方法，而不是exec() 方法。因此，用户可以尝试不同的方法并学习新知识。
1K+ 次浏览
