正则表达式从 youtube/vimeo url 中提取域和视频 ID

Posted 2023-02-22

【中文标题】正则表达式从 youtube/vimeo url 中提取域和视频 ID

【英文标题】：Regex to extract domain and video id from youtube/vimeo url

【发布时间】：2012-03-22 02:41:51

【问题描述】：

我正在复制一个函数，该函数将获取一个 youtube/vimeo 网址并返回视频来自哪个站点 (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;

输出：

结果：
提供者：优酷
ID: PQLnmdOthmA
--
提供者： vimeo
编号：2208013

但是，请注意对于 vimeo vids，如果 url 以 ID 结尾，最后一个数字总是被切断。如果您在 vimeo url 的末尾添加一个斜杠，则 id 将被完全拉出。

【问题讨论】：

我就把this留在这里。

@andrewjackson 我更喜欢this 一个。

@andrew .. 是的，我以前用过那个工具，对于懂正则表达式的人来说它是 def ..

@Petah 非常感谢！现在我有一个沙盒，至少可以在其中进行猜测和检查……已添加书签！

【参考方案1】：

这是一个更新版本，它也适用于 youtu.be 和 youtube.com/embed 网址，使用 @jfriend00 的代码和在此处找到的一些代码：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/

在两个 stackexchange 答案中，这是最终对我最有效的代码。

【讨论】：

对此表示歉意。不知道出了什么问题，但我已经更新了我的答案和小提琴。

如果有人通过像“youtube.com/watch”这样的 url 你会得到错误 - 无法读取未定义的属性 'split'

【参考方案2】：

末尾的.+$ 要求在捕获为数字字符串的最后一个数字之后至少有一个字符。这将使捕获的内容减少一位数。你有那个理由吗？

您可以像这样将最后一个 + 更改为 *：

/^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/

【讨论】：

较短的正则表达式获胜！我选择了第二个，效果很好！非常感谢！

@RyanEllis - 仅供参考，我在答案中添加了一个更强大的函数版本，它对 youtube 字符串中的查询参数顺序不敏感，并且不允许混合使用非法 URL vimeo 和 youtube 格式。

干得好！我刚刚用你的替换了我的旧功能，它似乎更快（不确定这是多么真实）感谢 AWESOME 功能，它也让其他视频提供商更容易！对于整个项目，我可以把你放在我的后兜里吗？ ;)

【参考方案3】：

删除最后一个 .和结束匹配

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

【参考方案4】：

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

【参考方案5】：

为了简化您的正则表达式，我将使用 haystack.indexOf(needle) 来确定网址是 vimeo 还是 youtube，然后应用特定于站点的正则表达式。容易得多，以后您可以添加视频网站，而不会使正则表达式过于复杂。

【参考方案6】：

最后一个数字被截断，因为您在末尾使用了“.+”，这意味着“一个或多个任意字符”。将 + 替换为 *，表示“零个或多个”。

【讨论】：

感谢您的回答和解释！