Question

我正在复制一个功能，该功能将使用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;

输出：

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

但是，请注意vimeo vids的方式，如果url以ID结尾，则最后一个数字始终被截断。如果在vimeo url的末尾添加斜杠，则会完全拉出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

这是一个更新版本，也适用于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答案中，这是最终对我有用的代码。

Answer 3

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

Answer 4

最后一个号码因为你在末尾使用“。+”而被切断，这意味着“任何一个或多个角色”。将+替换为*，表示“零或更多”。

Answer 5

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

Answer 6

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

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

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

6 个答案: