extract vimeo video id from the url

extract vimeo video id from the url - javascript

Though this question is available on SO, I am facing a little problem.I failed to extract the vimeo id using vimeo regex used here: Vimeo Regex
My codes I,m using now:
function vimeoProcess(url){
var vimeoReg = /https?:\/\/(?:www\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|)(\d+)(?:$|\/|\?)/;
var match = url.match(vimeoReg);
if (match){
console.log(match[3]);
}else{
return "<span class='error'>error</span>";
}
}
It does not consoles any thing.
Can any one help?

This "magical regex" is not so magical. It does not work with the URL you're using, for instance.
Here's another parser I just set up :
var urls =
[
"https://vimeo.com/11111111",
"http://vimeo.com/11111111",
"https://www.vimeo.com/11111111",
"http://www.vimeo.com/11111111",
"https://vimeo.com/channels/11111111",
"http://vimeo.com/channels/11111111",
"https://vimeo.com/channels/mychannel/11111111",
"http://vimeo.com/channels/yourchannel/11111111",
"https://vimeo.com/groups/name/videos/11111111",
"http://vimeo.com/groups/name/videos/11111111",
"https://vimeo.com/album/2222222/video/11111111",
"http://vimeo.com/album/2222222/video/11111111",
"https://vimeo.com/11111111?param=test",
"http://vimeo.com/11111111?param=test",
"http://vimeo.com/whatever/somethingelse/11111111?param=test",
"http://www.player.vimeo.com/stuff/otherstuff/11111111"
];
$.each(urls, function(index, url) {
var firstPart = url.split('?')[0].split("/");
var vid = firstPart[firstPart.length - 1];
$("table").append('<tr><td>'+url+'</td><td><span>'+vid+'</span></td></tr>');
});
td { font-family: monospace; }
span { background: lightgreen; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>Input</th><th>Result</th></tr>
</table>
How it works :
url.split('?') breaks "http://vimeo.com/whatever/somethingelse/11111111?param=test" into ["http://vimeo.com/whatever/somethingelse/11111111","param=test"]
... or just ["http://vimeo.com/whatever/somethingelse/11111111"] if there is no ? in the URL.
Now [0] takes the first element of the array, which is "http://vimeo.com/whatever/somethingelse/11111111".
Then we split that using .split('/'), which gives ["http:","","vimeo.com","whatever","somethingelse","11111111"]
Now we just have to take the last element, which is our video ID :
vid = firstPart[firstPart.length - 1] // Gives "11111111"

Using your current code, just change your regex to this one:
/https?:\/\/player\.vimeo\.com\/video\/(\d+)/gm
And use the first (the unique) matched element $1.

If you only deal with vimeo urls, you can also observe and consider that the only integers in their urls give you the video id.
var noquery = url.replace(/\?.*/,'') // remove anything after a ?
var id = noquery.replace(/[^0-9]/g, '') // get all the digits
this would give you a simpler code until it breaks
it all depends if you want to extract the id from a url that you know is a video id or if you want to extract vimeo video urls among a bag of urls

Based on Jeremy Thille's answer in the list.
The last step, could we use pop() to get the last element from that array, which could be like this:
let videoId = url.split('?')[0].split('/').pop()

Related

Jquery code breaks when using replace() function

I have a simple code that is separating book title from serial using the ":" as separator. This is really a straight forward solution and should work. On my website it's working but stopping when using german umlauts in the book title. So I created a JSFiddle to find out what's going on but the code breaks whenever I'm using the replace() function.
html:
<div id="title">Die Träne des Fressers: Weiße Königin</div>
Title:<div id="output_title">output title</div>
Serial:<div id="output_serial">output serial</div>
js:
title_input = $("#title").text();
title = title_input.match(/[a-z\s,äöüß-]*.*:/i);
serial = title_input.match(/:\s?[a-z\s,äöüß-]*/i);
title.replace(/\:/g,'');
//serial = serial.replace(/[:|\.]+/g, "").trim();
$("#output_title").text(title);
$("#output_serial").text(serial);
I do not understand what's going on. Could someone explain it to me?

The problem is that .match() is returning an array not a string as you're expecting. You'll need to check for this and select the matching string (if applicable) before calling .replace().
Currently by adding a bit of logging:
title_input = $("#title").text();
title = title_input.match(/[a-z\s,äöüß-]*.*:/i);
serial = title_input.match(/:\s?[a-z\s,äöüß-]*/i);
console.log(title.length); // <-- Logging
We can see that title is the following:
["Die Träne des Fressers:", index: 0, input: "Die Träne des Fressers: Weiße Königin"]
For your code to work, you need to get the first element of the title array (if available) before calling .replace():
title_input = $("#title").text();
title = title_input.match(/[a-z\s,äöüß-]*.*:/i);
serial = title_input.match(/:\s?[a-z\s,äöüß-]*/i);
if(title && title.length) {
title = title[0];
title.replace(/\:/g,'');
}
$("#output_title").text(title);
$("#output_serial").text(serial);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="title">Die Träne des Fressers: Weiße Königin</div>
Title:<div id="output_title">output title</div>
Serial:<div id="output_serial">output serial</div>
Extra Note: To ensure you don't get an undefined type error, it's a good idea to ensure that title exists and is not an empty array as noted by the if(title && title.length) line.

Like #Pointy mentioned in comments the match() return an array and The first element of the array (element 0) will contain the matched substring so you have to select first element by addinng [0] :
title = title_input.match(/[a-z\s,äöüß-]*.*:/i)[0];
serial = title_input.match(/:\s?[a-z\s,äöüß-]*/i)[0];
Also the replace() method will return the new string generated after replacement, so you have to assign it to your variable :
title = title.replace(/\:/g,'');
hope this helps.
Updated fiddle.

Variable title exists only when script can find one of this symbols and title isn't string - it's array. You can't use replace on null or on array.
This should works:
var title = $("#title").text();
title = title.replace(/[a-z\s,äöüß-]*.*:/i,'');
And if you want to split this string you should use .split(':') function.

How to get a specific portion of the url using javascript?

var url = window.location.href.toString();
the above line gives me the url of my current page correctly and my url is:
http://localhost/xyzCart/products.php?cat_id=35
However, using javascript how can i get only a portion of the url i.e. from the above url i just want
products.php?cat_id=35
How to accomplish this plz help.I have looked at similar questions in this forum but none were any help for me..

You can sliply use this:
var url = window.location.href.toString();
var newString = url.substr(url.lastIndexOf(".") + 1));
This will result in: php?cat_id=35
Good luck /Zorken17

You can use the location of the final /:
var page = url.substr(url.substr(0, (url + "?").indexOf("?")).lastIndexOf("/") + 1);
(This allows for / in a query string)

You can get your desired result by using javascript split() method.check this link for further detail

https://jsfiddle.net/x06ywtvo/
var urls = [
"http://localhost/xyzCart/products.php?cat_id=35",
"http://localhost/xyzCart/products.php",
"http://www.google.com/xyzCart/products.php?cat_id=37"
];
var target = $('#target');
for(var i=0;i<urls.length;i++){
var index = urls[i].indexOf("xyzCart");
var sub = urls[i].substring(index, urls[i].length);
target.append("<div>" + sub + "</div>");
}

Try the folowing javacript code to get the part you need. It splits up your url by the "/"s and takes the fourth part. This is superior to substr solutions in terms of descriptive clarity.
url.split("/")[4]
Or if url can contain more "/" path parts, then simply take the last split part.
var parts = url.split("/");
console.log( parts[parts.length-1] );

You will get all necessary values in window.location object.
Kindly check on following CodePen Link for proper output.
I have added parameter test=1
Link: http://codepen.io/rajesh_dixit/pen/EVebJe?test=1
Code
(function() {
var url = window.location.pathname.split('/');
var index = 1;
document.write("URL: ");
document.write(window.location.href);
document.write("<br/> Full Path: ");
document.write(window.location.pathname);
document.write("<br/> Last Value:")
// For cases where '/' comes at the end
if(!url[url.length - index])
index++;
document.write(url[url.length-index])
document.write("<br/> Query Parameter: ");
document.write(window.location.search.substring(1));
})()

JavaScript - splitting window.location.href returns undefined

I have the following code JavaScript:
var url = window.location.href;
var link = url.split('?link=');
link[1] = "http://goo.gl/" + link[1];
link[2] = "http://goo.gl/" + link[2];
function ad(){
window.location.href = link[1];
}
function ac(){
window.open(link[2], '_blank');
}
And there is a link:
ACCESS
The problem is that in some computers, the split is not working.
For exemple: If the link is mySite.com/link.html?link=wfijOp?link=atGdj.
It should give me goo.gl/wfijOp and goo.gl/atGdj instead of goo.gl/undefined and goo.gl/undefined.
What is the problem with those computers?

Thanks, #arcyqwerty! I did what you suggested.
Usually ? is used for separating the query string from the path (see
comment above). Try using another separator like link=abcd,efgh,ijkl.
You can use this to get the query string variable. – #arcyqwerty
Go to the answer

Url parsing in javascript and DOM

I am writing a support chat application where I want text to be parsed for urls. I have found answers for similar questions but nothing for the following.
what i have
function ReplaceUrlToAnchors(text) {
var exp = /(\b(https?:\/\/|ftp:\/\/|file:\/\/|www.)
[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1' target='_blank'>$1</a>");
}
that pattern is a modified version of one i found on the internet. It includes www. in the first token, because not all urls start with protocol:// However, when www.google.com is replaced with
<a href='www.google.com' target='_blank'>www.google.com</a>
which pulls up MySite.com/webchat/wwww.google.com and I get a 404
that is my first problem, my second is...
in my script for generating messages to the log, I am forced to do it a hacky way:
var last = 0;
function UpdateChatWindow(msgArray) {
var chat = $get("MessageLog");
for (var i = 0; i < msgArray.length; i++) {
var element = document.createElement("div");
var linkified = ReplaceUrlToAnchors(msgArray[i]);
element.setAttribute("id", last.toString());
element.innerHTML = linkified;
chat.appendChild(element);
last = last + 1;
}
}
To get the "linkified" string to render HTML out correctly I have to use the non-standard .innerHTML attribute of element. I would prefer a way were i could parse the string as tokens - text tokens and anchor tokens - and call either createTextNode or createElement("a") and stitch them together with DOM.
so question 1 is how should I go about www.site.com parsing, or even site.com?
and question 2 is how would could I do this using only DOM?

Another thing you could do is this:
function ReplaceUrlToAnchors(text) {
var exp = /(\b(https?:\/\/|ftp:\/\/|file:\/\/|www.)
[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp, function(_, url) {
return '<a href="' +
(/^www\./.test(url) ? "http://" + url : url) +
'target="_blank">' +
url +
'</a>';
});
}
That is kind-of like your solution, but it does the check for "www" URLs in that callback passed in to ".replace()".
Note that you won't be picking up "stackoverflow.com" or "newegg.com" or anything like that, which I understand may be unavoidable (and even desirable, given the false positives you'd pick up).

Here is what I came up with, perhaps someone has something better?
function replaceUrlToAnchors(text) {
var naked = /(\b(www.)[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|](.com|.net|.org|.co.uk|.ca|.))/ig;
text = text.replace(naked, "http://$1");
var exp = /(\b(https?:\/\/|ftp:\/\/|file:\/\/)([-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|]))/ig;
return text.replace(exp,"<a href='$1' target='_blank'>$3</a>");
}
the first regex will replace www.google.com with http://www.google.com and is good enough for what I am doing. However, I will hold off marking this as the answer because I would also like to make (www.) optional but when I do (www.)? it replaces every word with http://word/

How do I get the YouTube video ID from a URL?

I want to get the v=id from YouTube’s URL with JavaScript (no jQuery, pure JavaScript).
Example YouTube URL formats
http://www.youtube.com/watch?v=u8nQa1cJyX8&a=GxdCwVVULXctT2lYDEPllDR0LRTutYfW
http://www.youtube.com/watch?v=u8nQa1cJyX8
Or any other YouTube format that contains a video ID in the URL.
Result from these formats
u8nQa1cJyX8

I made an enhancement to Regex provided by "jeffreypriebe" because he needed a kind of YouTube URL is the URL of the videos when they are looking through a channel.
Well no but this is the function that I have armed.
<script type="text/javascript">
function youtube_parser(url){
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
var match = url.match(regExp);
return (match&&match[7].length==11)? match[7] : false;
}
</script>
These are the types of URLs supported
http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index
http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/QdK8U-VIH_o
http://www.youtube.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0
http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s
http://www.youtube.com/embed/0zM3nApSvMg?rel=0
http://www.youtube.com/watch?v=0zM3nApSvMg
http://youtu.be/0zM3nApSvMg
Can be found in [http://web.archive.org/web/20160926134334/]
http://lasnv.net/foro/839/Javascript_parsear_URL_de_YouTube

I simplified Lasnv's answer a bit.
It also fixes the bug that WebDeb describes.
Here it is:
var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
return match[2];
} else {
//error
}
Here is a regexer link to play with:
http://regexr.com/3dnqv

You don't need to use a regular expression for this.
var video_id = window.location.search.split('v=')[1];
var ampersandPosition = video_id.indexOf('&');
if(ampersandPosition != -1) {
video_id = video_id.substring(0, ampersandPosition);
}

None of these worked on the kitchen sink as of 1/1/2015, notably URLs without protocal http/s and with youtube-nocookie domain. So here's a modified version that works on all these various Youtube versions:
// Just the regex. Output is in [1].
/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/
// For testing.
var urls = [
'https://youtube.com/shorts/dQw4w9WgXcQ?feature=share',
'//www.youtube-nocookie.com/embed/up_lNV-yoK4?rel=0',
'http://www.youtube.com/user/Scobleizer#p/u/1/1p3vcRhsYGo',
'http://www.youtube.com/watch?v=cKZDdG9FTKY&feature=channel',
'http://www.youtube.com/watch?v=yZ-K7nCVnBI&playnext_from=TL&videos=osPknwzXEas&feature=sub',
'http://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I',
'http://www.youtube.com/user/SilkRoadTheatre#p/a/u/2/6dwqZw0j_jY',
'http://youtu.be/6dwqZw0j_jY',
'http://www.youtube.com/watch?v=6dwqZw0j_jY&feature=youtu.be',
'http://youtu.be/afa-5HQHiAs',
'http://www.youtube.com/user/Scobleizer#p/u/1/1p3vcRhsYGo?rel=0',
'http://www.youtube.com/watch?v=cKZDdG9FTKY&feature=channel',
'http://www.youtube.com/watch?v=yZ-K7nCVnBI&playnext_from=TL&videos=osPknwzXEas&feature=sub',
'http://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I',
'http://www.youtube.com/embed/nas1rJpm7wY?rel=0',
'http://www.youtube.com/watch?v=peFZbP64dsU',
'http://youtube.com/v/dQw4w9WgXcQ?feature=youtube_gdata_player',
'http://youtube.com/vi/dQw4w9WgXcQ?feature=youtube_gdata_player',
'http://youtube.com/?v=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://www.youtube.com/watch?v=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtube.com/?vi=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtube.com/watch?v=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtube.com/watch?vi=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtu.be/dQw4w9WgXcQ?feature=youtube_gdata_player'
];
var i, r, rx = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
for (i = 0; i < urls.length; ++i) {
r = urls[i].match(rx);
console.log(r[1]);
}

The best solution (from 2019-2021) I found is that:
function YouTubeGetID(url){
url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
}
I found it here.
/*
* Tested URLs:
var url = 'http://youtube.googleapis.com/v/4e_kz79tjb8?version=3';
url = 'https://www.youtube.com/watch?feature=g-vrec&v=Y1xs_xPb46M';
url = 'http://www.youtube.com/watch?feature=player_embedded&v=Ab25nviakcw#';
url = 'http://youtu.be/Ab25nviakcw';
url = 'http://www.youtube.com/watch?v=Ab25nviakcw';
url = '<iframe width="420" height="315" src="http://www.youtube.com/embed/Ab25nviakcw" frameborder="0" allowfullscreen></iframe>';
url = '<object width="420" height="315"><param name="movie" value="http://www.youtube-nocookie.com/v/Ab25nviakcw?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/Ab25nviakcw?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>';
url = 'http://i1.ytimg.com/vi/Ab25nviakcw/default.jpg';
url = 'https://www.youtube.com/watch?v=BGL22PTIOAM&feature=g-all-xit';
url = 'BGL22PTIOAM';
*/

/^.*(youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*/
Tested on:
http://www.youtube.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0
http://www.youtube.com/embed/0zM3nApSvMg?rel=0
http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index
http://www.youtube.com/watch?v=0zM3nApSvMg
http://youtu.be/0zM3nApSvMg
http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s
http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/KdwsulMb8EQ
http://youtu.be/dQw4w9WgXcQ
http://www.youtube.com/embed/dQw4w9WgXcQ
http://www.youtube.com/v/dQw4w9WgXcQ
http://www.youtube.com/e/dQw4w9WgXcQ
http://www.youtube.com/watch?v=dQw4w9WgXcQ
http://www.youtube.com/?v=dQw4w9WgXcQ
http://www.youtube.com/watch?feature=player_embedded&v=dQw4w9WgXcQ
http://www.youtube.com/?feature=player_embedded&v=dQw4w9WgXcQ
http://www.youtube.com/user/IngridMichaelsonVEVO#p/u/11/KdwsulMb8EQ
http://www.youtube-nocookie.com/v/6L3ZvIMwZFM?version=3&hl=en_US&rel=0
Inspired by this other answer.

Given that YouTube has a variety of URL styles, I think Regex is a better solution. Here is my Regex:
^.*(youtu.be\/|v\/|embed\/|watch\?|youtube.com\/user\/[^#]*#([^\/]*?\/)*)\??v?=?([^#\&\?]*).*
Group 3 has your YouTube ID
Sample YouTube URLs (currently, including "legacy embed URL style") - the above Regex works on all of them:
http://www.youtube.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0
http://www.youtube.com/embed/0zM3nApSvMg?rel=0
http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index
http://www.youtube.com/watch?v=0zM3nApSvMg
http://youtu.be/0zM3nApSvMg
http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s
http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/QdK8U-VIH_o
Hat tip to Lasnv

tl;dr.
Matches all URL examples on this question and then some.
let re = /(https?:\/\/)?(((m|www)\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)([_0-9a-z-]+)/i;
let id = "https://www.youtube.com/watch?v=l-gQLqv9f4o".match(re)[7];
ID will always be in match group 8.
Live examples of all the URLs I grabbed from the answers to this question:
https://regexr.com/3u0d4
Full explanation:
As many answers/comments have brought up, there are many formats for youtube video URLs. Even multiple TLDs where they can appear to be "hosted".
You can look at the full list of variations I checked against by following the regexr link above.
Lets break down the RegExp.
^ Lock the string to the start of the string.
(https?:\/\/)? Optional protocols http:// or https:// The ? makes the preceding item optional so the s and then the entire group (anything enclosed in a set of parenthesis) are optional.
Ok, this next part is the meat of it. Basically we have two options, the various versions of [optional-subdomain].youtube.com/...[id] and the link shortened youtu.be/[id] version.
( // Start a group which will match everything after the protocol and up to just before the video id.
((m|www)\.)? // Optional subdomain, this supports looking for 'm' or 'www'.
(youtube(-nocookie)?|youtube.googleapis) // There are three domains where youtube videos can be accessed. This matches them.
\.com // The .com at the end of the domain.
.* // Match anything
(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/) // These are all the things that can come right before the video id. The | character means OR so the first one in the "list" matches.
| // There is one more domain where you can get to youtube, it's the link shortening url which is just followed by the video id. This OR separates all the stuff in this group and the link shortening url.
youtu\.be\/ // The link shortening domain
) // End of group
Finally we have the group to select the video ID. At least one character that is a number, letter, underscore, or dash.
([_0-9a-z-]+)
You can find out much more detail about each part of the regex by heading over the regexr link and seeing how each part of the expression matches with the text in the url.

I created a function that tests a users input for Youtube, Soundcloud or Vimeo embed ID's, to be able to create a more continous design with embedded media. This function detects and returns an object withtwo properties: "type" and "id". Type can be either "youtube", "vimeo" or "soundcloud" and the "id" property is the unique media id.
On the site I use a textarea dump, where the user can paste in any type of link or embed code, including the iFrame-embedding of both vimeo and youtube.
function testUrlForMedia(pastedData) {
var success = false;
var media = {};
if (pastedData.match('http://(www.)?youtube|youtu\.be')) {
if (pastedData.match('embed')) { youtube_id = pastedData.split(/embed\//)[1].split('"')[0]; }
else { youtube_id = pastedData.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0]; }
media.type = "youtube";
media.id = youtube_id;
success = true;
}
else if (pastedData.match('http://(player.)?vimeo\.com')) {
vimeo_id = pastedData.split(/video\/|http:\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
media.type = "vimeo";
media.id = vimeo_id;
success = true;
}
else if (pastedData.match('http://player\.soundcloud\.com')) {
soundcloud_url = unescape(pastedData.split(/value="/)[1].split(/["]/)[0]);
soundcloud_id = soundcloud_url.split(/tracks\//)[1].split(/[&"]/)[0];
media.type = "soundcloud";
media.id = soundcloud_id;
success = true;
}
if (success) { return media; }
else { alert("No valid media id detected"); }
return false;
}

Late to the game here, but I've mashed up two excellent responses from mantish and j-w. First, the modified regex:
const youtube_regex = /^.*(youtu\.be\/|vi?\/|u\/\w\/|embed\/|\?vi?=|\&vi?=)([^#\&\?]*).*/
Here's the test code (I've added mantish's original test cases to j-w's nastier ones):
var urls = [
'http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index',
'http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/QdK8U-VIH_o',
'http://www.youtube.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0',
'http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s',
'http://www.youtube.com/embed/0zM3nApSvMg?rel=0',
'http://www.youtube.com/watch?v=0zM3nApSvMg',
'http://youtu.be/0zM3nApSvMg',
'//www.youtube-nocookie.com/embed/up_lNV-yoK4?rel=0',
'http://www.youtube.com/user/Scobleizer#p/u/1/1p3vcRhsYGo',
'http://www.youtube.com/watch?v=cKZDdG9FTKY&feature=channel',
'http://www.youtube.com/watch?v=yZ-K7nCVnBI&playnext_from=TL&videos=osPknwzXEas&feature=sub',
'http://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I',
'http://www.youtube.com/user/SilkRoadTheatre#p/a/u/2/6dwqZw0j_jY',
'http://youtu.be/6dwqZw0j_jY',
'http://www.youtube.com/watch?v=6dwqZw0j_jY&feature=youtu.be',
'http://youtu.be/afa-5HQHiAs',
'http://www.youtube.com/user/Scobleizer#p/u/1/1p3vcRhsYGo?rel=0',
'http://www.youtube.com/watch?v=cKZDdG9FTKY&feature=channel',
'http://www.youtube.com/watch?v=yZ-K7nCVnBI&playnext_from=TL&videos=osPknwzXEas&feature=sub',
'http://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I',
'http://www.youtube.com/embed/nas1rJpm7wY?rel=0',
'http://www.youtube.com/watch?v=peFZbP64dsU',
'http://youtube.com/v/dQw4w9WgXcQ?feature=youtube_gdata_player',
'http://youtube.com/vi/dQw4w9WgXcQ?feature=youtube_gdata_player',
'http://youtube.com/?v=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://www.youtube.com/watch?v=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtube.com/?vi=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtube.com/watch?v=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtube.com/watch?vi=dQw4w9WgXcQ&feature=youtube_gdata_player',
'http://youtu.be/dQw4w9WgXcQ?feature=youtube_gdata_player'
];
var failures = 0;
urls.forEach(url => {
const parsed = url.match(youtube_regex);
if (parsed && parsed[2]) {
console.log(parsed[2]);
} else {
failures++;
console.error(url, parsed);
}
});
if (failures) {
console.error(failures, 'failed');
}
Experimental version to handle the m.youtube urls mentioned in comments:
const youtube_regex = /^.*((m\.)?youtu\.be\/|vi?\/|u\/\w\/|embed\/|\?vi?=|\&vi?=)([^#\&\?]*).*/
It requires parsed[2] to be changed to parsed[3] in two places in the tests (which it then passes with m.youtube urls added to the tests). Let me know if you see problems.

This regex matches embed, share and link URLs.
const youTubeIdFromLink = (url) => url.match(/(?:https?:\/\/)?(?:www\.|m\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\/?\?v=|\/embed\/|\/)([^\s&\?\/\#]+)/)[1];
console.log(youTubeIdFromLink('https://youtu.be/You-Tube_ID?rel=0&hl=en')); //You-Tube_ID
console.log(youTubeIdFromLink('https://www.youtube.com/embed/You-Tube_ID?rel=0&hl=en')); //You-Tube_ID
console.log(youTubeIdFromLink('https://m.youtube.com/watch?v=You-Tube_ID&rel=0&hl=en')); //You-Tube_ID

Since YouTube video ids is set to be 11 characters, we can simply just substring after we split the url with v=.
Then we are not dependent on the ampersand at the end.
var sampleUrl = "http://www.youtube.com/watch?v=JcjoGn6FLwI&asdasd";
var video_id = sampleUrl.split("v=")[1].substring(0, 11)
Nice and simple :)

I have got a Regex which supports commonly used url's which also includes YouTube Shorts
Regex Pattern:
(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))
Javascript Return Method:
function getId(url) {
let regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/gm;
return regex.exec(url)[3];
}
Types of URL's supported:
http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index
http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/QdK8U-VIH_o
http://www.youtube.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0
http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s
http://www.youtube.com/embed/0zM3nApSvMg?rel=0
http://www.youtube.com/watch?v=0zM3nApSvMg
http://youtu.be/0zM3nApSvMg
https://youtube.com/shorts/0dPkkQeRwTI?feature=share
https://youtube.com/shorts/0dPkkQeRwTI
With Test:
https://regex101.com/r/5JhmpW/1

I have summed up all the suggestions and here is the universal and short answer to this question:
if(url.match('http://(www.)?youtube|youtu\.be')){
youtube_id=url.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0];
}

Java Code: (Works for all the URLs:
http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index
http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/QdK8U-VIH_o
http://youtube.googleapis.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0
http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s
http://www.youtube.com/embed/0zM3nApSvMg?rel=0"
http://www.youtube.com/watch?v=0zM3nApSvMg
http://youtu.be/0zM3nApSvMg
http://www.youtube.com/watch?v=0zM3nApSvMg/
http://www.youtube.com/watch?feature=player_detailpage&v=8UVNT4wvIGY
)
String url = "http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index";
String regExp = "/.*(?:youtu.be\\/|v\\/|u/\\w/|embed\\/|watch\\?.*&?v=)";
Pattern compiledPattern = Pattern.compile(regExp);
Matcher matcher = compiledPattern.matcher(url);
if(matcher.find()){
int start = matcher.end();
System.out.println("ID : " + url.substring(start, start+11));
}
For DailyMotion:
String url = "http://www.dailymotion.com/video/x4xvnz_the-funny-crash-compilation_fun";
String regExp = "/video/([^_]+)/?";
Pattern compiledPattern = Pattern.compile(regExp);
Matcher matcher = compiledPattern.matcher(url);
if(matcher.find()){
String match = matcher.group();
System.out.println("ID : " + match.substring(match.lastIndexOf("/")+1));
}

Slightly stricter version:
^https?://(?:www\.)?youtu(?:\.be|be\.com)/(?:\S+/)?(?:[^\s/]*(?:\?|&)vi?=)?([^#?&]+)
Tested on:
http://www.youtube.com/user/dreamtheater#p/u/1/oTJRivZTMLs
https://youtu.be/oTJRivZTMLs?list=PLToa5JuFMsXTNkrLJbRlB--76IAOjRM9b
http://www.youtube.com/watch?v=oTJRivZTMLs&feature=youtu.be
https://youtu.be/oTJRivZTMLs
http://youtu.be/oTJRivZTMLs&feature=channel
http://www.youtube.com/ytscreeningroom?v=oTJRivZTMLs
http://www.youtube.com/embed/oTJRivZTMLs?rel=0
http://youtube.com/v/oTJRivZTMLs&feature=channel
http://youtube.com/v/oTJRivZTMLs&feature=channel
http://youtube.com/vi/oTJRivZTMLs&feature=channel
http://youtube.com/?v=oTJRivZTMLs&feature=channel
http://youtube.com/?feature=channel&v=oTJRivZTMLs
http://youtube.com/?vi=oTJRivZTMLs&feature=channel
http://youtube.com/watch?v=oTJRivZTMLs&feature=channel
http://youtube.com/watch?vi=oTJRivZTMLs&feature=channel

You can use the following code to get the YouTube video ID from a URL:
url = "https://www.youtube.com/watch?v=qeMFqkcPYcg"
VID_REGEX = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
alert(url.match(VID_REGEX)[1]);

This can get video id from any type of youtube links
var url= 'http://youtu.be/0zM3nApSvMg';
var urlsplit= url.split(/^.*(youtu.be\/|v\/|embed\/|watch\?|youtube.com\/user\/[^#]*#([^\/]*?\/)*)\??v?=?([^#\&\?]*).*/);
console.log(urlsplit[3]);

A slightly changed version from the one mantish posted:
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]{11,11}).*/;
var match = url.match(regExp);
if (match) if (match.length >= 2) return match[2];
// error
This assumes the code is always 11 characters.
I'm using this in ActionScript, not sure if {11,11} is supported in Javascript. Also added support for &v=.... (just in case)

This definitely requires regex:
Copy into Ruby IRB:
var url = "http://www.youtube.com/watch?v=NLqASIXrVbY"
var VID_REGEX = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
url.match(VID_REGEX)[1]
See for all test cases: https://gist.github.com/blairanderson/b264a15a8faaac9c6318

One more:
var id = url.match(/(^|=|\/)([0-9A-Za-z_-]{11})(\/|&|$|\?|#)/)[2]
It works with any URL showed in this thread.
It won't work when YouTube addS some other parameter with 11 base64 characters. Till then it is the easy way.

I made a small function to extract the video id out of a Youtube url which can be seen below.
var videoId = function(url) {
var match = url.match(/v=([0-9a-z_-]{1,20})/i);
return (match ? match['1'] : false);
};
console.log(videoId('https://www.youtube.com/watch?v=dQw4w9WgXcQ'));
console.log(videoId('https://www.youtube.com/watch?t=17s&v=dQw4w9WgXcQ'));
console.log(videoId('https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=17s'));
This function will extract the video id even if there are multiple parameters in the url.

If someone needs the perfect function in Kotlin to save their time. Just hoping this helps
fun extractYTId(ytUrl: String?): String? {
var vId: String? = null
val pattern = Pattern.compile(
"^https?://.*(?:youtu.be/|v/|u/\\w/|embed/|watch?v=)([^#&?]*).*$",
Pattern.CASE_INSENSITIVE
)
val matcher = pattern.matcher(ytUrl)
if (matcher.matches()) {
vId = matcher.group(1)
}
return vId
}

Here's a ruby version of this:
def youtube_id(url)
# Handles various YouTube URLs (youtube.com, youtube-nocookie.com, youtu.be), as well as embed links and urls with various parameters
regex = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|vi|e(?:mbed)?)\/|\S*?[?&]v=|\S*?[?&]vi=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
match = regex.match(url)
if match && !match[1].nil?
match[1]
else
nil
end
end
To test the method:
example_urls = [
'www.youtube-nocookie.com/embed/dQw4-9W_XcQ?rel=0',
'http://www.youtube.com/user/Scobleizer#p/u/1/dQw4-9W_XcQ',
'http://www.youtube.com/watch?v=dQw4-9W_XcQ&feature=channel',
'http://www.youtube.com/watch?v=dQw4-9W_XcQ&playnext_from=TL&videos=osPknwzXEas&feature=sub',
'http://www.youtube.com/ytscreeningroom?v=dQw4-9W_XcQ',
'http://www.youtube.com/user/SilkRoadTheatre#p/a/u/2/dQw4-9W_XcQ',
'http://youtu.be/dQw4-9W_XcQ',
'http://www.youtube.com/watch?v=dQw4-9W_XcQ&feature=youtu.be',
'http://youtu.be/dQw4-9W_XcQ',
'http://www.youtube.com/user/Scobleizer#p/u/1/dQw4-9W_XcQ?rel=0',
'http://www.youtube.com/watch?v=dQw4-9W_XcQ&playnext_from=TL&videos=dQw4-9W_XcQ&feature=sub',
'http://www.youtube.com/ytscreeningroom?v=dQw4-9W_XcQ',
'http://www.youtube.com/embed/dQw4-9W_XcQ?rel=0',
'http://www.youtube.com/watch?v=dQw4-9W_XcQ',
'http://youtube.com/v/dQw4-9W_XcQ?feature=youtube_gdata_player',
'http://youtube.com/vi/dQw4-9W_XcQ?feature=youtube_gdata_player',
'http://youtube.com/?v=dQw4-9W_XcQ&feature=youtube_gdata_player',
'http://www.youtube.com/watch?v=dQw4-9W_XcQ&feature=youtube_gdata_player',
'http://youtube.com/?vi=dQw4-9W_XcQ&feature=youtube_gdata_player',
'http://youtube.com/watch?v=dQw4-9W_XcQ&feature=youtube_gdata_player',
'http://youtube.com/watch?vi=dQw4-9W_XcQ&feature=youtube_gdata_player',
'http://youtu.be/dQw4-9W_XcQ?feature=youtube_gdata_player'
]
# Test each one
example_urls.each do |url|
raise 'Test failed!' unless youtube_id(url) == 'dQw4-9W_XcQ'
end
To see this code and run the tests in an online repl you can also go here:
https://repl.it/#TomChapin/youtubeid

I liked Surya's answer.. Just a case where it won't work...
String regExp = "/.*(?:youtu.be\\/|v\\/|u/\\w/|embed\\/|watch\\?.*&?v=)";
doesn't work for
youtu.be/i4fjHzCXg6c and www.youtu.be/i4fjHzCXg6c
updated version:
String regExp = "/?.*(?:youtu.be\\/|v\\/|u/\\w/|embed\\/|watch\\?.*&?v=)";
works for all.

Try this one -
function getYouTubeIdFromURL($url)
{
$pattern = '/(?:youtube.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu.be/)([^"&?/ ]{11})/i';
preg_match($pattern, $url, $matches);
return isset($matches[1]) ? $matches[1] : false;
}

Chris Nolet cleaner example of Lasnv answer is very good, but I recently found out that if you trying to find your youtube link in text and put some random text after the youtube url, regexp matches way more than needed. Improved Chris Nolet answer:
/^.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]{11,11}).*/

function parser(url){
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\/)|(\?v=|\&v=))([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[8].length==11){
alert('OK');
}else{
alert('BAD');
}
}
For testing:
https://www.youtube.com/embed/vDoO_bNw7fc - attention first symbol «v» in «vDoO_bNw7fc»
http://www.youtube.com/user/dreamtheater#p/u/1/oTJRivZTMLs
https://youtu.be/oTJRivZTMLs?list=PLToa5JuFMsXTNkrLJbRlB--76IAOjRM9b
http://www.youtube.com/watch?v=oTJRivZTMLs&feature=youtu.be
https://youtu.be/oTJRivZTMLs
http://youtu.be/oTJRivZTMLs&feature=channel
http://www.youtube.com/ytscreeningroom?v=oTJRivZTMLs
http://www.youtube.com/embed/oTJRivZTMLs?rel=0
http://youtube.com/v/oTJRivZTMLs&feature=channel
http://youtube.com/v/oTJRivZTMLs&feature=channel
http://youtube.com/vi/oTJRivZTMLs&feature=channel
http://youtube.com/?v=oTJRivZTMLs&feature=channel
http://youtube.com/?feature=channel&v=oTJRivZTMLs
http://youtube.com/?vi=oTJRivZTMLs&feature=channel
http://youtube.com/watch?v=oTJRivZTMLs&feature=channel
http://youtube.com/watch?vi=oTJRivZTMLs&feature=channel

i wrote a function for that below:
function getYoutubeUrlId (url) {
const urlObject = new URL(url);
let urlOrigin = urlObject.origin;
let urlPath = urlObject.pathname;
if (urlOrigin.search('youtu.be') > -1) {
return urlPath.substr(1);
}
if (urlPath.search('embed') > -1) {
// Örneğin "/embed/wCCSEol8oSc" ise "wCCSEol8oSc" return eder.
return urlPath.substr(7);
}
return urlObject.searchParams.get('v');
},
https://gist.github.com/semihkeskindev/8a4339c27203c5fabaf2824308c7868f

Python3 version:
import re
def get_youtube_id(url):
match = re.match('^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))?\?v?=?(?P<id>\w*).*', url);
return match.group('id')
If you are looking to include it in a shell/bash/zsh/fish script, here's how to do it:
echo -n "$YOUTUBE_URL" | python -c "import re; import sys; m = re.match('^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))?\?v?=?(?P<id>\w*).*', sys.stdin.read()); sys.stdout.write(m.group('id'))"
Example:
echo -n "https://www.youtube.com/watch/?v=APYVWYHS654" | python -c "import re; import sys; m = re.match('^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))?\?v?=?(?P<id>\w*).*', sys.stdin.read()); sys.stdout.write(m.group('id'))"
APYVWYHS654

We Keep Coding

JavaScript is the programming language of the Web.

extract vimeo video id from the url - javascript

Using your current code, just change your regex to this one: /https?:\/\/player\.vimeo\.com\/video\/(\d+)/gm And use the first (the unique) matched element $1.

Based on Jeremy Thille's answer in the list. The last step, could we use pop() to get the last element from that array, which could be like this: let videoId = url.split('?')[0].split('/').pop()

Related

Jquery code breaks when using replace() function

How to get a specific portion of the url using javascript?

JavaScript - splitting window.location.href returns undefined

Url parsing in javascript and DOM

How do I get the YouTube video ID from a URL?

Categories

Resources