Javascript format array with regex youtube video ids

Question

Apologies in advance as I know there are so many answers to this question however I have not been successful with implementing any of the given answers. With that being said, let's get to the issue.

I have a table containing text inputs where user enters youtube video ids
Onsubmit my javascript will create an array containing these youtube video ids
If user enters a youtube url, the array breaks

Quick Solution
If someone can help me get the regex validation to work so the user will be alerted properly and correct their input that would be a good start

Ideal Solution
I'm not fond of alerting users and making them change what they've entered as its bad user experience so if anyone is feeling extra helpful today and could show me how to take what they enter and strip out the url bits and push only the youtube video id to the array that would be super wonderful :)

example: if user entered

["https://www.youtube.com/watch?v=K1CScQOj1dA", "https://youtu.be/wIJ1sFrgMds", "IISzG-sPUuo"]

the code would format their inputs and the final userSongs array would be:

["K1CScQOj1dA", "wIJ1sFrgMds", "IISzG-sPUuo"]

Here is my fiddle http://jsfiddle.net/1qLr9n2j/
As you can see, the alert says no match when two of the inputs are invalid entries

Why `(new RegExp('\\b' + userSongs.join('\\b|\\b') + '\\b'))`? — karthik manchala, Jun 02 '15 at 19:34
I found that solution here -> http://stackoverflow.com/questions/6219960/javascript-match-against-array — cassidymack, Jun 02 '15 at 19:40
Yes I'd preferably like to transform the array and not have to alert the user. Whichever solution is easiest. — cassidymack, Jun 02 '15 at 19:43
Check out the answers here and customize this for your use? http://stackoverflow.com/questions/5830387/how-to-find-all-youtube-video-ids-in-a-string-using-a-regex — nhahtdh, Jun 03 '15 at 05:08

karthik manchala · Accepted Answer · 2015-06-02T19:53:13.847

1

You can use the following to match:

.*?([\w-]+)$

And replace with $1.

See DEMO

JS Code:

var rx = /.*?([\w-]+)$/;
for (var i = 0; i < userSongs.length; i++) {
        userSongs[i] = userSongs[i].replace(rx, '$1');
}
alert(userSongs);

edited Jun 02 '15 at 19:53

answered Jun 02 '15 at 19:40

karthik manchala

13,025
1
27
54

Thanks, but how would I put this into my if statement? – cassidymack Jun 02 '15 at 19:42
Wow! How did you reduce the regex from `/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/` only down to `/.*?([\w-]+)$/` ? :) – cassidymack Jun 02 '15 at 19:56
[check your code](http://jsfiddle.net/uapc7hh4/).. thats because you are dealing only with `ids` and not the actual url pattern.. – karthik manchala Jun 02 '15 at 19:56

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

Here's my crack at the Ideal Solution

var re = new RegExp("youtu(?:\.be|be\.com)/(?:.*v(?:/|=)|(?:.*/)?)([a-zA-Z0-9-_]+)");

$('.song-input').each(function () {
    var val = $(this).val()
    if (val) {
        var matches = val.match(re);
        $(this).val(matches[1]);
    }
});

I took the regex from James Poulson's answer to the question you linked to.

edited May 23 '17 at 11:51

Community

1
1

answered Jun 02 '15 at 19:43

Kevin Crumley

5,451
3
25
32

Looks awesome, but I'm getting an `Unexpected token }` error when I put this in my fiddle. Advice? – cassidymack Jun 02 '15 at 19:46
Hmm, I actually copied and pasted this from a Fiddle myself; must be unclear exactly which part this is intended to replace? Try this: https://jsfiddle.net/1qLr9n2j/2/ – Kevin Crumley Jun 02 '15 at 19:49
Ok thanks. I see it changing the input values. So in your fiddle should I just add `userSongs.push($(this).val());` to line 19 before the } get my formatted array now? – cassidymack Jun 02 '15 at 19:53

Javascript format array with regex youtube video ids

2 Answers2