Parsing a Vimeo ID using JavaScript?

Question

How do I parse an ID from a Vimeo URL in JavaScript?

The URL will be entered by a user, so I will need to check that they have entered it in the correct format.

I need the ID so that I can use their simple API to retrieve video data.

Answer 1

As URLs for Vimeo videos are made up by http://vimeo.com/ followed by the numeric id, you could do the following

var url = "http://www.vimeo.com/7058755";
var regExp = /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/;

var match = url.match(regExp);

if (match){
    alert("id: " + match[2]);
}
else{
    alert("not a vimeo url");
}

Answer 2

regExp = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/
parseUrl = regExp.exec url
return parseUrl[5]

This works for all valid Vimeo URLs which follows these patterns:

http://vimeo.com/*

http://vimeo.com/channels/*/*

http://vimeo.com/groups/*/videos/*

Answer 3

If you want to check for Vimeo URL first:

function getVimeoId( url ) {

  // Look for a string with 'vimeo', then whatever, then a
  // forward slash and a group of digits.
  var match = /vimeo.*\/(\d+)/i.exec( url );

  // If the match isn't null (i.e. it matched)
  if ( match ) {
    // The grouped/matched digits from the regex
    return match[1];
  }
}

E.g.

getVimeoId('http://vimeo.com/11918221');

returns

11918221

Answer 4

I think Matilda's is the best answer, but it's a non-working code draft, so merging it with Sean Kinsey's answer we get this working code version:

var url = "http://www.vimeo.com/7058755"; //Or any other Vimeo url format
var regExp = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/;

var match = url.match(regExp);

if (match){
    alert("id: " + match[5]);
}else{
    alert("not a vimeo url");
}

Answer 5

Sure.

You should first check the validity/sanity of the URL with a regex and make sure it matches the pattern you expect. (More about regex'es here)

Next you need that ID number, right? Assuming that it's located within the URL, you can extract that also using a regex (backreference)

It's all just basically string and regex handling.

Answer 6

function getVimeoId(url) {
    var m = url.match(/^.+vimeo.com\/(.*\/)?([^#\?]*)/);
    return m ? m[2] || m[1] : null;
}

console.log(getVimeoId("http://vimeo.com/54178821"));
console.log(getVimeoId("http://vimeo.com/channels/nudiecutie/57383513"));

Answer 7

var Vimeo =
{
    get_video_id: function(url)
    {
        var regExp = /http(s)?:\/\/(www\.)?vimeo.com\/(\d+)(\/)?(#.*)?/

        var match = url.match(regExp)

        if (match)
            return match[3]
    },

    get_video_url: function(id)
    {
        return 'https://vimeo.com/' + id
    }
}

Answer 8

My Javascript solution:

function vimeo_parser(url){
    // var regExp = /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/;
    var regExp = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/;
    var match = url.match(regExp);
    return (match&&match[5])? match[5] : false;
  }

My typescript solution for angular 8:

  vimeo_parser(url){
    // var regExp = /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/;
    var regExp = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/;
    var match = url.match(regExp);
    return (match&&match[5])? match[5] : false;
  }

Answer 9

If you are OK with only parsing a Vimeo URL like https://vimeo.com/407943692 you don't need regex. This is simpler imao:

let vimeoLink = "https://vimeo.com/407943692";
let url = new URL(vimeoLink);
//Remove leading /
let videoId = url.pathname.substring(1);

However users often find links to other formats like these:

http://vimeo.com/423630
https://vimeo.com/1399176
http://vimeo.com/423630087
https://vimeo.com/423630087
https://player.vimeo.com/video/423630087
https://player.vimeo.com/video/423630087?title=0&byline=0&portrait=0
https://vimeo.com/channels/staffpicks/423630087
https://vimeo.com/showcase/7008490/video/407943692

This is my solution that handles every case I have found:

let regEx = /(https?:\/\/)?(www\.)?(player\.)?vimeo\.com\/?(showcase\/)*([0-9))([a-z]*\/)*([0-9]{6,11})[?]?.*/;
let match = mediaVideoLink.match(regEx);
if (match && match.length == 7) {
    let videoId = match[6];
}
else {
    //Handle error
}

Source:

https://stackoverflow.com/a/65845916/3850405