CODEWITHSUNDEEP
javascriptvimeo
Tom
Tom

Reputation: 721

Parsing a Vimeo ID using JavaScript?

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.

Upvotes: 21

Views: 25688

Answers (9)

Ogglas
Ogglas

Reputation: 69998

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

Upvotes: 3

Ian Samz
Ian Samz

Reputation: 2119

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

Upvotes: 0

Matilda
Matilda

Reputation: 1718

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

Upvotes: 26

Dan Heberden
Dan Heberden

Reputation: 11068

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

Upvotes: 8

Sean Kinsey
Sean Kinsey

Reputation: 38046

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

Upvotes: 23

andresgottlieb
andresgottlieb

Reputation: 950

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

Upvotes: 4

catamphetamine
catamphetamine

Reputation: 4742

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

Upvotes: 2

jbdemonte
jbdemonte

Reputation: 705

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

Upvotes: 2

rlb.usa
rlb.usa

Reputation: 15043

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.

Upvotes: 2

Related Questions