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
– karthik manchala, Commented Jun 2, 2015 at 19:34
I found that solution here -> stackoverflow.com/questions/6219960/… — sixtwowaifu
– sixtwowaifu, Commented Jun 2, 2015 at 19:40
Yes I'd preferably like to transform the array and not have to alert the user. Whichever solution is easiest. — sixtwowaifu
– sixtwowaifu, Commented Jun 2, 2015 at 19:43
Check out the answers here and customize this for your use? stackoverflow.com/questions/5830387/… — nhahtdh
– nhahtdh, Commented Jun 3, 2015 at 5:08

karthik manchala · Accepted Answer · 2015-06-02 19:53:13Z

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 2, 2015 at 19:53

answered Jun 2, 2015 at 19:40

karthik manchala

13.7k1 gold badge34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sixtwowaifu Over a year ago

Thanks, but how would I put this into my if statement?

sixtwowaifu Over a year ago

Wow! How did you reduce the regex from /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/ only down to /.*?([\w-]+)$/ ? :)

karthik manchala Over a year ago

check your code.. thats because you are dealing only with ids and not the actual url pattern..

Community · Accepted Answer · 2017-05-23 11:51:08Z

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, 2017 at 11:51

CommunityBot

11 silver badge

answered Jun 2, 2015 at 19:43

Kevin

6,0243 gold badges30 silver badges35 bronze badges

3 Comments

sixtwowaifu Over a year ago

Looks awesome, but I'm getting an Unexpected token } error when I put this in my fiddle. Advice?

Kevin Over a year ago

Hmm, I actually copied and pasted this from a Fiddle myself; must be unclear exactly which part this is intended to replace? Try this: jsfiddle.net/1qLr9n2j/2

sixtwowaifu Over a year ago

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?

Collectives™ on Stack Overflow

Javascript format array with regex youtube video ids

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related