极客笔记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，这将返回一个长度为2的数组。数组的第二个值包含视频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];
在上面的语法中，我们使用 exec() 方法，通过使用正则表达式作为参考来找到匹配正则表达式模式的结果。
正则表达式解释
(youtu.*be.*)− 它匹配HTTPS后的youtube域名。/(watch\?v=|embed\/|v|shorts|)− 它匹配域名后的/watch，或域名后的v=，或嵌入或短裤或仅v。这里，|表示OR操作。(.*?((?=[&#?])|$))− 它匹配包含id的不同字符串字符。gm−g标志用于匹配所有出现的情况，m标志用于匹配多行。
示例
在下面的例子中，我们创建了上面解释的正则表达式，并通过将其作为引用来调用exec()方法。此外，我们将videoURL作为exec()方法的参数传递，以匹配正则表达式中定义的模式与视频URL。
exec()方法根据正确的YouTube URL返回4个不同的匹配项，最后一个值只包含视频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()方法。因此，用户可以尝试不同的方法，如学习新东西。