使用 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() 方法。因此，使用者可以嘗試不同的方法並學習新知識。

更新於：2023年7月19日

1K+ 次瀏覽

啟動您的職業生涯

完成課程後獲得認證

開始學習
廣告