In this quick Bubble tutorial, I'm going to show you how to extract a YouTube Video's ID from a YouTube URL. This can be useful if you're embedding YouTube videos and just depending how you store that data in your database.
So I picked a completely random YouTube video here and I've copied the URL into my input field. How do I extract just that piece of information?
Find & replace
So one way you can go about this is to use the Find and replace. I'm going to say Input A to refer to my input field value and then Find and Replace. And this is such a handy trick, which is you can find some text in a string in a piece of an input field and you can replace it with nothing. So I can copy that find and let's try that. Okay. And so there we go. We get d all the way through to capital Q as the YouTube videos ID.
But we have to cover for many different eventualities. We can't always rely on our user's inputting data in the same format that we have. For example, what happens if they used the Share URL, which is YouTube's link shortener?
Combining mulitple Find & replace statements
So let's copy that into here and you'll see that it doesn't work. But what we can do is stack our Find and replaces. So we can say find just the first bit and again, replace with nothing.
Let me copy this whole link again. Okay, there we have our long link, there we have our short link and it still extracts it.
Removing querystrings
There is another eventuality to cover for, and that is if the URL has got some sort of query string at the end. For example, if we jump midway through the field and then say Start from now this is a query string related to time, but there could be other things to do with tracking and kind of source where people arrived at the website from. So if we put our query string in there, we don't get our pure video ID.
So there's one final thing that I'd add, which is to Truncate, and Truncate means to trim our text and YouTube Video IDs are all eleven characters long. There's a really fascinating video by Tom Scott which we can link to saying how YouTube is really unlikely to run out or video IDs, just that the math on it is astonishing. But we can say Truncate to eleven.
So now if I paste in with the query string, it still only sticks to the first eleven characters of what's remained after we've done the Find and replace.
Let's just check this with our full URL. So I'll add a query string here and it still works because it removes everything in front of it, leaving only what's after this part of the URL. And then we can use Truncate to limit what we return to just eleven characters.