How do I get the YouTube video ID from a URL?

前端 未结 30 2356
北恋
北恋 2020-11-22 03:06

I want to get the v=id from YouTube’s URL with JavaScript (no jQuery, pure JavaScript).

Example YouTube URL formats

http://www.youtube.c

30条回答
  •  温柔的废话
    2020-11-22 03:23

    Late to the game here, but I've mashed up two excellent responses from mantish and j-w. First, the modified regex:

    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):

     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.youtube urls mentioned in comments:

    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.youtube urls added to the tests). Let me know if you see problems.

提交回复
热议问题