Loading
Lesson 25
Courses / JavaScript for Complete Beginners
Splitting a URL string into an Array in JavaScript

Video Transcript

Now, I want to give you a challenge. Say I have the following URL, https slash slash colon slash slash www.oops www.mines.com slash plus. So I have this URL for certain website inside a string. And I have the following elements in the URL. I have the https colon slash slash part. I have the www.mines.com part. And I have the plus slash plus. So say we want to extract this part of the URL. And then we want to extract this part. And then we want to extract this part. So how would we do it knowing that we only have the single entities, the string with the URL? So I want you to do that as a challenge. You might not necessarily have to do only one call of split. You might have to call it multiple times. And keep keep in mind that the split method does not modify the original. So I always remember it creates a new array from the original string. So how did it go? So let's say this guy is in a variable. I'll just call it URL. So URL holds the URL that we're working with. We want to extract this part, this part, and this part. So we can use multiple goals using split. So let's grab this first one. So that's going to be let's call it protocol. And then we're going to take URL, we're going to split into what? What's operator can we use just to get this guy? Let me just backtrack a little bit. I want to remove this variable definition. I just want to work like this. I don't want to define any variable. So to get to HTTPS, this part looks like this guy here could be a delimiter because there's no such thing afterward, right? You could try the colon too, assuming there's no other colon. After that, it's another choice. So I just want to illustrate you don't have to necessarily have a single character as the delimiter. So you can also put colon slash slash and see what you get. So colon slash slash as the delimiter for the split method will give you two elements, a two element array of the HTTPS and the rest of the URL. So now you need to get the HTTPS because it's an array has two elements. So how can we access this? The first element of this array. Remember, we use the brackets with the index to access elements of an array. What's the element of the first element? Remember, we count from zero, so it's going to be sub zero. So you can do the same thing we did before. Then you add a bracket sub zero. Okay, because this guy right here on the left hand side that's highlighted gives you the array. And from this array, you're going to grab the element at index sub zero, which is the first element. So that gives you HTTPS. So in your program, you could store this guy in a variable like I was going to do before. But let's leave it as an exercise for you. I don't really care about storing that in a variable, I just want to illustrate how to find how to grab the HTTPS. Now let's grab the other parts of the string, we figure out how to get the HTTPS. How would we get this other part? Well, we could have used this guy, and that would give us HTTPS, then would give us this guy, but then this guy would have to be split again, right? Because we only want the first part of the this address, right? So let's do this guy. And then let's grab the second element with sub one. So that gives you that. Okay. Now if this whole thing is already confusing to you, you can always put that in a variable to abstract it. So let's put remaining URL. This whole thing, let's assign it to a variable called remaining URL. So now you abstracted everything that you did with that command, those state that statement in a variable. So the variable only holds the string, so you don't have to know how it was, how this string was obtained. So now you don't care anymore about this part. So forget about that. Now we have this guy, this URL, remaining URL, that contains this string. Now we can solve the problem, right? Because we made it simpler, and we don't care about looking at this anymore, because all we have right here is a single string. And we know the separator is the slash. So to get this guy, I split with a slash, right? And to get this guy, the same thing, except I grabbed the second element of the resulting array. So let's do it. So let's do it. dot split. What's the delimiter? Slash. Then what does this operation give you? It gives you, this guy is a string, so you're going to split the string into an array, right? So it gives you that an array of two elements. The first element is the www.minds.com. Second element is the plus. So to get the first guy, the minds.com is sub zero, right? Because it's an array. To get the second guy is sub one. Now we solved it. Now if you feel this guy is already too confusing, like I said before, you can always grab this part and abstract it into another variable. So we can say remaining URL parts, yet another variable with this guy. So this variable has a good name, remaining URL parts, meaning you're going to have a list of things. So you're going to take the remaining URL split with slash, you get an array, right? Remaining URL parts. Now working with this guy, you're ready to know, okay, this guy is an array. You don't care how it was obtained. This part is done. So you only have an array. So how can I grab the first element? You put, say the name of the array, sub the index, which is zero. So that's it. And then how do you get the second element? Name of the array, sub one, index one is the second element because you count from zero. Okay. So there, there you go, we have obtained the three parts we wanted. Going back, the HTTPS, the minds.com part and the plus. So we needed like two calls to split if you notice. If you keep track of what we did, we first have to split using the colon slash slash to get the HTTPS to be separated from the rest of the URL. Then we have to take this second element here of this array and split it again using the slash. And we get this other array. And then we finally are able to access the three parts we want. Okay. Just reviewing again, we learn in this exercise how to use split to take a string and break it down into smaller parts. And you'll give split an argument that's the separator. Separator could be anything, any could be one character, two characters, and so on. All right. So thank you so much for watching and the K tech world. And until the next lesson, see you.
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: