从YouTube/Vimeo网址中提取域名和视频ID的正则表达式

Question

从YouTube/Vimeo网址中提取域名和视频ID的正则表达式

14

我正在复制一个函数，该函数将接受一个YouTube/Vimeo网址并返回视频来源网站（Vimeo/YT）以及视频ID。

<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;

输出：

结果：
提供者：youtube
ID：PQLnmdOthmA
--
提供者：vimeo
ID：2208013

然而，请注意对于vimeo视频，如果url以ID结尾，则最后一个数字总是被截去。如果在vimeo url末尾添加斜杠，则可以完全获取id。

- Ryan Ellis

1

我只是在这里放一下这个。 - Shea

@andrewjackson 我更喜欢这个。 - Petah

@andrew .. 是的，我以前用过那个工具，它确实适合理解正则表达式的人使用.. - Ryan Ellis

@Petah 非常感谢！现在我至少有一个沙盒可以玩耍、猜测和检查……已经加入书签了！ - Ryan Ellis

6个回答

3

这是更新后的版本，使用了 @jfriend00 的代码和在这里发现的一些代码，可以处理 youtu.be 和 youtube.com/embed url：JavaScript REGEX: How do I get the YouTube video id from a URL?.

编辑：使用一个实际有效的函数更新了我的答案（以及 fiddle）。:-)

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 答案中，最终对我有用的是这段代码。

- reblevins

1

抱歉。不确定出了什么问题，但我已经更新了我的答案和代码示例。 - reblevins

如果有人传递像"https://www.youtube.com/watch"这样的URL，你会收到错误信息-无法读取未定义的'split'属性。 - anonymous

2

为了简化正则表达式，我建议使用haystack.indexOf(needle)来确定url是vimeo还是youtube，然后应用特定于网站的正则表达式。这样更容易，稍后您可以添加视频网站而不会过度复杂化正则表达式。

- James L.

0

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

- ccKep

0

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

- Tango Bravo

0

移除最后一个.和末尾匹配

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

- DanC

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

.+$ 在结尾要求至少一个字符跟在最后一个以数字形式捕获的字符后面。这会删除捕获的字符中的一个数字。你加入这个东西的原因是什么？

你可以将最后一个 + 改成 *，像这样：

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