Regex to extract domain and video id from youtube/vimeo url

问题

I am copying a function that will take a youtube/vimeo url and return what site the video came from (vimeo/yt) as well as the video id.

Here's what I have so far: 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;

Output:

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

However, notice how for vimeo vids, if the url ends in the ID, the last number is always cut off. If you add a slash to the end of the vimeo url the id is pulled fully.

回答1:

The .+$ at the end is requiring at least one character after the last digit that is captured as a string of digits. That will chop one digit off what is captured. Is there a reason you have that there?

You can change the last + to a * like this:

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

or even better, get rid of the end part entirely since it doesn't look like it's needed:

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

Here's a bit safer way to write your function that allows for any order of the query parameters in the youtube URL and doesn't put stuff into the regex that doesn't need to be there. The code is longer, but it's much more robust and would be much easier to add more providers:

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

Working version here: http://jsfiddle.net/jfriend00/N2hPj/

回答2:

Here is an updated version that also works with youtu.be and youtube.com/embed urls using @jfriend00's code and some code found here: JavaScript REGEX: How do I get the YouTube video id from a URL?.

EDIT: Updated my answer (and the fiddle) with a function that actually works. :-)

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"); }
}

And a working jsfiddle: http://jsfiddle.net/9n8Nn/3/

Out of the two stackexchange answers, this is the code that worked best for me in the end.

回答3:

To simplify your regex I would use haystack.indexOf(needle) to determine if the url is vimeo or youtube and then apply site specific regex. Much easier, and later you can add video sites without overly complicating the regex.

回答4:

Last number gets cut off because you're using ".+" at the end, which means "one or more of any character". Replace the + with a *, meaning "zero or more".