Javascript REGEX: need to retrieve the ID as well as start and end time from embed URL

Question

Here is an example of url structure I'll be working with (ignore the age of electric video :) )

http://www.youtube.com/embed/ABCumLrphFA?&start=20&end=50

Basically I want to be able to grab the video id, the chosen start time (20) and end chosen time (50) and save them as variables from any URL that follows the pattern above.

So a simple setup is this:

var url = 'http://www.youtube.com/embed/ABCumLrphFA?&start=20&end=50'

// get youtube id
function youtubeid(url) {
    var ytid = url.match(dont know);
    ytid = ytid[1];
    return ytid;
}
// get youtube start time
function youtubeStart(url) {
    var ytStart = url.match(dont know);
    ytStart=ytStart[1];
    return ytStart;
}
// get youtube end time
function youtubeEnd(url) {
    var ytEnd = url.match(dont know);
    ytEnd=ytEnd[1];
    return ytEnd;
}

If you could help me fill in the blanks that would be most amazing. I've been staring at regex documentation for a while now and just getting more and more confused.

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

To retrieve the id

url.match(/embed\/(.*)\?/)

The best way to retrieve URL params (start and end) is to do something like Get Querystring with Dojo Then you could use the following to retrieve start and end

var qs = getUrlParams();
console.log("start is " + qs.start + " and end is " + qs.end )

edited May 23 '17 at 12:27

Community

1
1

answered Jul 19 '12 at 22:55

Ruan Mendes

90,375
31
153
217

score 0 · Answer 2 · answered Jul 19 '12 at 22:57

0

1

/http:\/\/www\.youtube\.com\/embed\/([^?]+)/

2

/http:\/\/www\.youtube\.com\/embed\/[^?]+.*[?&]start=(\d+)(?:&|$)/

3

/http:\/\/www\.youtube\.com\/embed\/[^?]+.*[?&]end=(\d+)(?:&|$)/

answered Jul 19 '12 at 22:57

Andrew Cheong

29,362
15
90
145

score 0 · Accepted Answer · edited May 23 '17 at 12:20

This other Stack Overflow answer may help you. I used Peter Mortensen's answer below.

Get query string values in JavaScript

To obtain the actual YouTube Id, you can use this regular expression:

http:\/\/www.youtube.com\/embed\/(.{11})

That regex will return the value in parenthesis. You can test it here:

http://www.pagecolumn.com/tool/regtest.htm

Sample code:

var url = 'http://www.youtube.com/embed/ABCumLrphFA?&start=20&end=50'

// get youtube id
function youtubeid(url) {
    var ytid = url.match(/http:\/\/www.youtube.com\/embed\/(.{11})/);
    ytid = ytid[1];
    return ytid;
}
alert(youtubeid(url));

function getParameterByName(name, url) {
    var match = RegExp('[?&]' + name + '=([^&]*)')
                    .exec(url);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

alert(getParameterByName('start', url));
alert(getParameterByName('end', url));

Are you sure the id is always eleven characters long? – Ruan Mendes Jul 19 '12 at 23:02 — Ruan Mendes, Jul 19 '12 at 23:02

score 0 · Answer 4 · answered Jul 19 '12 at 23:06

This'll only work if you know your URLs will look exactly like the one you gave (no extra query parameters; start and end always in that order; no HTTPS; etc.). But you can get them all at once:

js> str = 'http://www.youtube.com/embed/ABCumLrphFA?&start=20&end=50'      
    http://www.youtube.com/embed/ABCumLrphFA?&start=20&end=50
js> rxp = /http:\/\/www.youtube.com\/embed\/(.*)\?&start=(\d+)?&end=(\d+)?/
    /http:\/\/www.youtube.com\/embed\/(.*)\?&start=(\d+)?&end=(\d+)?/
js> result = rxp.exec(str)
    http://www.youtube.com/embed/ABCumLrphFA?&start=20&end=50,ABCumLrphFA,20,50
js> result[0]
    http://www.youtube.com/embed/ABCumLrphFA?&start=20&end=50
js> result[1]
    ABCumLrphFA
js> result[2]
    20
js> result[3]
    50

I believe it's possible to write a regex that can cope with all the quirks I mentioned above, but it's way uglier and makes it harder to understand. Anyway - hope this helps!

See also: JavaScript Regex Escape Sequences and JavaScript Regex Methods

score 0 · Answer 5 · answered Jul 19 '12 at 23:20

0

var url = "http://www.youtube.com/embed/ABCumLrphFA?&start=20&end=50";

// get youtube id
function youtubeid(url) {
    q = url.substring(url.lastIndexOf("/")+1);
    var ytid = q.substring(q.lastIndexOf("?"), -1);
    return ytid;
}

// get youtube start time
function youtubeStart(url) {
    q = url.substring(url.lastIndexOf("/")+1);
var ytStart = q.substring(q.indexOf("&start")+7,q.indexOf("&end"));
    return ytStart;
}

// get youtube end time
function youtubeEnd(url) {
q = url.substring(url.lastIndexOf("/")+1);
var ytEnd = q.substring(q.indexOf("&end")+5);
    return ytEnd;
}

console.log(youtubeid(url));
console.log(youtubeStart(url));
console.log(youtubeEnd(url));

answered Jul 19 '12 at 23:20

KostasX

1

OP asked for a Regexp solution, if you're going to suggest something else, don't suggest something as brittle as this. – Ruan Mendes Jul 19 '12 at 23:45
I think you are losing the point here, and becoming a little rude I might add. If what OP really want to do is "basically grab the video id, start & end time", from "any URL that follows the pattern above" then I don't see why a quick suggestion that bypasses regex complexity is not worth mentioning.An example of a URL that breaks the code above would be quite enlightening for me and also for the rest of us, and a little less bitter than your last comment. The point, being, a community of people sharing knowledge and suggesting solutions in a collaborative rather than an antagonizing spirit. – KostasX Jul 20 '12 at 00:49
Examples of URLS that mean the same thing and wouldn't work with this code are `http://www.youtube.com/embed/ABCumLrphFA?start=20&end=50` and `http://www.youtube.com/embed/ABCumLrphFA?end=50&start=20`. Sorry if I sounded rude; however, my statement still stands that using `indexOf()` is not a reliable way to do this. Something like what I suggested in my answer (which does not use Regex for the query string part) is much more robust. – Ruan Mendes Jul 20 '12 at 17:37

Javascript REGEX: need to retrieve the ID as well as start and end time from embed URL

5 Answers5