JavaScript: Extracting YouTube Video URL from Playlist Pattern

This post isn't about outputting all the URLs within a YouTube playlist. This is a simple filtering to get one YT video URL which is attached on YouTube playlist URL.

To get all the video URLs within a playlist, we have to use YouTube API V3 and get the authentication key. Then start to do something.
It can be done on server side (Go, Python, PHP, Java, Ruby) or client side (JavaScript).

This is an example of RegExp (Regular Expression) implementation in JavaScript for capturing strings pattern.

---

RegExp concept
Let's try to "recognize" the strings pattern first.

The pattern of YouTube playlist (with one video URL attached) can be:

• Without the video index:

  https://www.youtube.com/watch?v=xxx...&list=yyy...

• With the index:

  https://www.youtube.com/watch?v=xxx...&list=yyy...&index=z

  or

  https://www.youtube.com/watch?v=xxx...&index=z&list=yyy...

Because the index and list parameter can be placed at random order, so the RegExp would be:

/https?\:\/\/www\.youtube\.com\/watch\?v=[A-Za-z0-9_\-]+((&list=[A-Za-z0-9_\-]+(&index=\d+)?)|((&index=\d+)?&list=[A-Za-z0-9_\-]+))/

Details about the pattern:

The video ID characters length usually is 11. As I observed, it usually consists of alphabets (upper and lower case), number (0-9), _ (underscore), and - (dash). Other than those aren't allowed. Therefore, we use this pattern: [A-Za-z0-9_\-]+ to capture the video ID.
We don't have to define the exact length of it.

The playlist ID characters length is varied. It also consists of the "maybe" the same allowed characters as the video ID.
Hence, to make it simple, we can implement the same pattern as above, [A-Za-z0-9_\-]+.

The index parameter of the video can be there or not.
So we use this pattern: (&index=\d+)?, with the question mark (0 or 1 repetition) to capture it.
The value (after the equal sign: &index=) is a number. Using \d+ — 1 or more repetition of decimal (number).

This pattern: \?v=[A-Za-z0-9_\-]+((&list=[A-Za-z0-9_\-]+(&index=\d+)?)|((&index=\d+)?&list=[A-Za-z0-9_\-]+)) means that the list and the index can be at wherever, but the video (the \?v=[A-Za-z0-9_\-]+) is always the first parameter.
Usually by default it has that pattern (the video parameter is the first one). But if you wanna, like, rotate each to "more random positions", then replace everything with your own combinatoric thingies. Like using um, things. You can do it, go you!

Additional:

The backslash (\) is for escaping the slash (/), dot (.), colon (:), and question mark (?) characters. And the dash (-) character within the square brackets ([...]).

YouTube will always redirect the http to https, so the s? (question mark for the s) is not necessary (just in case...).

That RegExp pattern above is for "recognizing" (or filtering) the input, which is the URL of YouTube playlist, with one of the video URL attached to it.

---

Then "capturing" the video URL

The outputting video URL part is very simple. We just need to split the (valid) input pattern with & (ampersand), and get the first array element (index: 0). Assuming the video parameter is in front of other parameters.

To make it more "solid", we can also capture the video parameter using v=[A-Za-z0-9_\-]+/, store it as a variable. And then combine it with https://www.youtube.com/watch? as the actual watch video URL without other parameter.
Wait a sec, this method is way simpler than that long RegExp... Hm. Oh well.

---

The last is creating the interface

It consists of input—output and one button. And we add event listeners to trigger the output value and additional method for opening a window (new tab).
Take a look at the JavaScript, HTML, and CSS parts of the demo below.

---

This is the result

Go to YouTube and find a playlist (with one video URL attached on it). Then copy — paste the URL into the input box.

Or use this pattern:

https://www.youtube.com/watch?v=KaqC5FnvAEc&list=PLIUtfmWhLSiQQb-4asKog3LFZscPGIay2&index=4