Question 170427 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can Javascript extract the name of a track from a URL?

let’s say we have such url:

const a = 'https://www.example.com/media/english/exaProns/p008-001600778.mp3?version=1.2.60'

How can we extract the name of the track like:

p008-001600778.mp3

I splited the url twice . one with / and one with ?. but there should be a better solution.

Tags:

4

Answers


  1. 0

    If you want to get it consistently without too much bother, you could use the URL constructor and then let it extract the pathname. After that, simply split on the / and pop out the last one:

    const url = new URL( 'https://www.example.com/media/english/exaProns/p008-001600778.mp3?version=1.2.60' );

console.log( url.pathname.split( '/' ).pop() );

    The URL constructor just gives you an easier breakdown of the actual URL, allowing you to manipulate it in the same way the browser does.

    Login or Signup to reply.
  2. 0

    I would recommend using URL#pathname to remove all the extra parts after the ? safely and then you can use regex to remove everything before the last /

    const url = "https://www.example.com/media/english/exaProns/p008-001600778.mp3?version=1.2.60"

const clearURL = new URL(url).pathname;
// get the core part of the url (removes the origin and the search params)
console.log(clearURL);

const fileName = clearURL.replace(/.*//, "");
// remove everything before the last slash
console.log(fileName);

    The reason I haven’t used a single large regex is because

    1. it’s easier to understand it like this
    2. it’s safer if the url is malformed and contains another ? in the pathname
    Login or Signup to reply.
  3. 0

    If your url’s structure is the same and only track name changes, you can use this regex pattern:

    /([^/]+(?=?))/

    It extracts the part between last / and ?

    something like this:

    const trackName = url.match(/([^/]+(?=?))/)[0];
    Login or Signup to reply.
  4. 0

    In JavaScript, you can use the URL API to parse the URL and then extract the pathname. This will give you the path section of the URL, which follows the domain part up to the first ‘?’ or ‘#’ character. You can then split the pathname by ‘/’ and get the last element to get the file name.

    Here’s an example:

    const a = 'https://www.example.com/media/english/exaProns/p008-001600778.mp3?version=1.2.60';

const url = new URL(a);
const pathName = url.pathname;
const pathParts = pathName.split('/');
const fileName = pathParts[pathParts.length - 1];

console.log(fileName); // outputs: p008-001600778.mp3

    In this code:

    1. We first create a URL object from the string a. This object allows us to easily extract different parts of the URL.

    2. We then get the pathname of the URL, which is the part of the URL from the domain to the first ‘?’ or ‘#’ character.

    3. Next, we split this pathname into its individual parts, using ‘/’ as the separator. This gives us an array of strings.

    4. Finally, we get the last element from this array, which is the file name.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search