正則表達式來提取的YouTube/VIMEO網址

Question

域和視頻ID，我複製功能，將採取一個YouTube/VIMEO URL並返回視頻從什麼網站來（VIMEO/YT），以及視頻ID。

這是我到目前爲止有：http://jsfiddle.net/csjwf/181/

<strong>Result:</strong> 
<div id="result"></div> 

function parseVideoURL(url) { 

    url.match(/^http:\/\/(?:.*?)\.?(youtube|vimeo)\.com\/(watch\?[^#]*v=(\w+)|(\d+)).+$/); 
    return { 
     provider : RegExp.$1, 
     id : RegExp.$1 == 'vimeo' ? RegExp.$2 : RegExp.$3 
    } 
} 

var result = document.getElementById("result"); 
var video = parseVideoURL("http://www.youtube.com/watch?v=PQLnmdOthmA&feature=feedrec_grec_index"); 
result.innerHTML = "Provider: " + video.provider + "<br>ID: " + video.id; 

var video = parseVideoURL("http://vimeo.com/22080133"); 

result.innerHTML += "<br>--<br>Provider: " + video.provider + "<br>ID: " + video.id; 

輸出：

Result: 
Provider: youtube 
ID: PQLnmdOthmA 
-- 
Provider: vimeo 
ID: 2208013

但是，請注意如何爲VIMEO西元，如果URL中的ID結束時，最後的號碼總是被切斷。如果您在vimeo網址的末尾添加了斜槓，則會完全拉取該ID。

Answer 1

.+$最後要求最後一位數字後面至少有一個字符作爲一串數字被捕獲。這將會俘獲一個數字。你有這樣的理由嗎？

您可以將最後+更改爲*這樣的：

/^http:\/\/(?:.*?)\.?(youtube|vimeo)\.com\/(watch\?[^#]*v=(\w+)|(\d+)).*$/ 

，甚至更好，擺脫了端部的完全，因爲它看起來並不像它的需要：

/^http:\/\/(?:.*?)\.?(youtube|vimeo)\.com\/(watch\?[^#]*v=(\w+)|(\d+))/ 

這裏有一個更安全的方法來編寫你的函數，它允許在youtube URL中查詢參數的任何順序，並且不會將東西放入不需要存在的正則表達式中。代碼較長，但它更強大，會更容易增加更多的供應商：

function parseVideoURL(url) { 

    function getParm(url, base) { 
     var re = new RegExp("(\\?|&)" + base + "\\=([^&]*)(&|$)"); 
     var matches = url.match(re); 
     if (matches) { 
      return(matches[2]); 
     } else { 
      return(""); 
     } 
    } 

    var retVal = {}; 
    var matches; 

    if (url.indexOf("youtube.com/watch") != -1) { 
     retVal.provider = "youtube"; 
     retVal.id = getParm(url, "v"); 
    } else if (matches = url.match(/vimeo.com\/(\d+)/)) { 
     retVal.provider = "vimeo"; 
     retVal.id = matches[1]; 
    } 
    return(retVal); 
} 

工作版本在這裏：「+」 http://jsfiddle.net/jfriend00/N2hPj/

Answer 2

最後號碼被切斷，因爲你使用最後，這意味着「一個或多個任何角色」。將*替換爲*，表示「零個或多個」。

Answer 3

爲了簡化您的正則表達式我會用haystack.indexOf（針），以確定該網址是VIMEO或YouTube，然後應用現場特定正則表達式。更容易，後來你可以添加視頻網站，而不會過分複雜的正則表達式。

Answer 4

url.match(/^http:\/\/(?:.*?)\.?(youtube|vimeo)\.com\/(watch\?[^#]*v=(\w+).+|(\d+))$/);

Answer 5

刪除最後一個。並最終匹配

url.match(/^http:\/\/(?:.*?)\.?(youtube|vimeo)\.com\/(watch\?[^#]*v=(\w+)|(\d+))/);

Answer 6

這裏有一個更新的版本，也可用於youtu.be和youtube.com/embed使用@ jfriend00的代碼，並在這裏發現了一些代碼的URL：JavaScript REGEX: How do I get the YouTube video id from a URL?。

編輯：更新我的答案（與小提琴）與實際工作的功能。 :-)

function parseVideoURL(url) { 

    function getParm(url, base) { 
      var re = new RegExp("(\\?|&)" + base + "\\=([^&]*)(&|$)"); 
      var matches = url.match(re); 
      if (matches) { 
       return(matches[2]); 
      } else { 
       return(""); 
      } 
     } 

     var retVal = {}; 
     var matches; 
     var success = false; 

     if (url.match('http(s)?://(www.)?youtube|youtu\.be')) { 
      if (url.match('embed')) { retVal.id = url.split(/embed\//)[1].split('"')[0]; } 
      else { retVal.id = url.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0]; } 
      retVal.provider = "youtube"; 
      var videoUrl = 'https://www.youtube.com/embed/' + retVal.id + '?rel=0'; 
      success = true; 
     } else if (matches = url.match(/vimeo.com\/(\d+)/)) { 
      retVal.provider = "vimeo"; 
      retVal.id = matches[1]; 
      var videoUrl = 'http://player.vimeo.com/video/' + retVal.id; 
      success = true; 
     } 

     if (success) { 
     return retVal; 
     } 
     else { alert("No valid media id detected"); } 
} 

和工作的jsfiddle：http://jsfiddle.net/9n8Nn/3/

出了兩回答＃的，這是最終的工作最適合我的代碼。