1

I have this string https://pokeapi.co/api/v2/pokemon/6/

I would like to extract the value after pokemon/ in this case 6. This represent Pokémon ids which could span between 1 -> N

I know this is pretty trivial and was wondering a nice solution for future proofing. Here is my solution.

const foo= "https://pokeapi.co/api/v2/pokemon/6/"
const result = foo.split('/') //[ 'https:', '', 'pokeapi.co', 'api', 'v2', 'pokemon', '6', '' ]
const ids = result[6]
4
  • 1
    Your question isn't clear; are you stuck on this somewhere? This seems pretty cut-and-dried. If you always want the item after "pokemon" you could use result.indexOf("pokemon")+1; Commented May 5, 2022 at 19:06
  • Clear way and nice solution for future proofing is really broad. What do you mean with clear and future proof e.g. does this mean that you want to verify that the domain is actually pokeapi.co and the path before the ID is api/v2/pokemon/? Commented May 5, 2022 at 19:13
  • @t.niese sorry for the confusion. I was just looking for a nice solution. You can ignore future proofing mention Commented May 5, 2022 at 19:14
  • "nice" is also broad. For me a "nice" solution would not just extract the id but also ensure that the rest of the URL is correct so that changes in the URL can be noticed. Commented May 5, 2022 at 19:16

5 Answers 5

2

You can grab the value after the last / character like so:

const pokemonID = foo.substring(foo.lastIndexOf("/") + 1)

Using String.lastIndexOf to get the final index of the slash character, and then using String.substring with only a single argument to parse the part of the string after that last / character. We add 1 to the lastIndexOf to omit the final slash.

For this to work you need to drop your final trailing slash (which won't do anything anyways) from your request URL.

This could be abstracted into a utility function to get the last value of any url, which is the biggest improvement over using a split and find by index approach.

However, beware, it will take whatever the value is after the last slash. Using the string https://pokeapi.co/api/v2/pokemon/6/pokedex would return pokedex.

If you are using Angular, React, Vue etc with built in router, there will be specific APIs for the framework that can get the exact parameter you need regardless of URL shape.

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

Comments

1

You should use the built-in URL API to do the splitting correctly for you:

const url = new URL("https://pokeapi.co/api/v2/pokemon/6/");

Then you can get the pathname and split that:

const path = url.pathname.split("/");

After you split it you can get the value 6 by accessing the 5th element here:

const url = new URL("https://pokeapi.co/api/v2/pokemon/6/");

const path = url.pathname.split("/");

console.log(path[4]);

4 Comments

How is this different than simply splitting the string as originally suggested?
@user1599011 If the URL was something like https:////... then would it still work? No. URLs can come in a variety of ways. That's why I suggest using the built-in API to get the pathname for us.
The string could be different in many ways and the solution wouldn't work, but I don't think the fact that the string happens to be a URL is particularly relevant.
@user1599011 https://pokeapi.co/api/v2/pokemon/%36/ and https://pokeapi.co/api/v2/pokemon/6/ represent the same URL. With new URL you will get 6 in both cases. If you treat it as string you won't. So you either parse the URL using a proper API or you need to use decodeURIComponent if you initially treated it as a string (That's just one example).
1

you could also do something like:

url.split('pokemon/')[1].split('/')[0]

Comments

1

Here is what I would do

const result = new URL(url).pathname.split('/');
const id = result[4];

Comments

0

I am not sure if this is better than yours

const foo= "https://pokeapi.co/api/v2/pokemon/6/"
const result = foo.indexOf("pokemon/");
const id_index = result + 8
const id = foo[id_index]; 

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.