Regex To Extract Domain And Video Id From Youtube/vimeo Url

October 23, 2024 Post a Comment

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.n

Solution 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:

functionparseVideoURL(url) {

    functiongetParm(url, base) {
        var re = newRegExp("(\\?|&)" + 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");
    } elseif (matches = url.match(/vimeo.com\/(\d+)/)) {
        retVal.provider = "vimeo";
        retVal.id = matches[1];
    }
    return(retVal);
}

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

Solution 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. :-)

functionparseVideoURL(url) {

    functiongetParm(url, base) {
            var re = newRegExp("(\\?|&)" + 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;
        } elseif (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.

Solution 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.

Solution 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".

Solution 5:

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

JavaScript Gen