js function to get filename from url

Viewed 93178

I have a url like http://www.example.com/blah/th.html

I need a javascript function to give me the 'th' value from that.

All my urls have the same format (2 letter filenames, with .html extension).

I want it to be a safe function, so if someone passes in an empty url it doesn't break.

I know how to check for length, but I should be checking for null to right?

23 Answers

Use the match function.

function GetFilename(url)
{
   if (url)
   {
      var m = url.toString().match(/.*\/(.+?)\./);
      if (m && m.length > 1)
      {
         return m[1];
      }
   }
   return "";
}

This should work for all cases

function getFilenameFromUrl(url) {
  const pathname = new URL(url).pathname;
  const index = pathname.lastIndexOf('/');
  return pathname.substring(index + 1) // if index === -1 then index+1 will be 0
}

In addition to the existing answers, I would recommend using URL() constructor (works both in browsers and Node.js) because you can be sure your URL is valid:

const url = 'https://test.com/path/photo123.png?param1=1&param2=2#hash';

let filename = '';
try {
  filename = new URL(url).pathname.split('/').pop();
} catch (e) {
  console.error(e);
}
console.log(`filename: ${filename}`);

Because cases tend to fail with custom code, I looked up to the JavaScript URL class. Alas, it chokes on relative URLs! Also, it doesn't have a property to get the file name. Not epic.

There has to be a good library out there which solves this common problem. Behold URI.js. All you need is a simple statement like the following:

let file = new URI(url).filename()

Then we can create a simple function that does null checks and removes the file extension:

function fileName(url) {
   if (url === null || typeof url === 'undefined')
      return ''
   let file = new URI(url).filename() // File name with file extension
   return file.substring(0, file.lastIndexOf('.')) // Remove the extension
}

Here's a snippet with test cases to play around with. All cases pass except drive paths.

test('Dots in file name without URL', 'dotted.file.name.png', 'dotted.file.name')
test('Dots in file name with URL', 'http://example.com/file.name.txt', 'file.name')
test('Lengthy URL with parameters', '/my/folder/filename.html#dssddsdsd?toto=33&dududu=podpodpo', 'filename')
test('URL with hash', '/my/folder/filename.html#dssddsdsd', 'filename')
test('URL with query strings', '/my/folder/filename.html?toto=33&dududu=podpodp', 'filename')
test('Hash after query string', 'http://www.myblog.com/filename.php?year=2019#06', 'filename')
 test('Query parameter with file path character', 'http://www.example.com/filename.zip?passkey=1/2', 'filename')
test('Query parameter with file path character and hash', 'http://www.example.com/filename.html?lang=en&user=Aan9u/o8ai#top', 'filename')
test('Asian characters', 'http://example.com/文件名.html', '文件名')
test('URL without file name', 'http://www.example.com', '')
test('Null', null, '')
test('Undefined', undefined, '')
test('Empty string', '', '')
test('Drive path name', 'C:/fakepath/filename.csv', 'filename')

function fileName(url) {
   if (url === null || typeof url === 'undefined')
      return ''
   let file = new URI(url).filename() // File name with file extension
   return file.substring(0, file.lastIndexOf('.')) // Remove the extension
}

function test(description, input, expected) {
   let result = fileName(input)
   let pass = 'FAIL'
   if (result === expected)
      pass = 'PASS'
   console.log(pass + ': ' + description + ': ' + input)
   console.log('  =>  "' + fileName(input) + '"')
}
<script src="https://cdn.jsdelivr.net/gh/medialize/URI.js@master/src/URI.js"></script>

Results

PASS: Dots in file name without URL: dotted.file.name.png
  =>  "dotted.file.name"
PASS: Dots in file name with URL: http://example.com/file.name.txt
  =>  "file.name"
PASS: Lengthy URL with parameters: /my/folder/filename.html#dssddsdsd?toto=33&dududu=podpodpo
  =>  "filename"
PASS: URL with hash: /my/folder/filename.html#dssddsdsd
  =>  "filename"
PASS: URL with query strings: /my/folder/filename.html?toto=33&dududu=podpodp
  =>  "filename"
PASS: Hash after query string: http://www.myblog.com/filename.php?year=2019#06
  =>  "filename"
PASS: Query parameter with file path character: http://www.example.com/filename.zip?passkey=1/2
  =>  "filename"
PASS: Query parameter with file path character and hash: http://www.example.com/filename.html?lang=en&user=Aan9u/o8ai#top
  =>  "filename"
PASS: Asian characters: http://example.com/文件名.html
  =>  "文件名"
PASS: URL without file name: http://www.example.com
  =>  ""
PASS: Null: null
  =>  ""
PASS: Undefined: undefined
  =>  ""
PASS: Empty string: 
  =>  ""
FAIL: Drive path name: C:/fakepath/filename.csv
  =>  ""

This solution is for you if you're too lazy to write custom code and don't mind using a library to do work for you. It isn't for you if you want to code golf the solution.

This answer only works in browser environment. Not suitable for node.

function getFilename(url) {
  const filename = decodeURIComponent(new URL(url).pathname.split('/').pop());
  if (!filename) return 'index.html'; // some default filename
  return filename;
}

function filenameWithoutExtension(filename) {
  return filename.replace(/^(.+?)(?:\.[^.]*)?$/, '$1');
}

Here are two functions:

  • first one get filename from url
  • second one get filename without extension from a full filename

For parsing URL, new an URL object should be the best choice. Also notice that URL do not always contain a filename.

Notice: This function try to resolve filename from an URL. But it do NOT guarantee that the filename is valid and suitable for use:

  • Some OS disallow certain character in filename (e.g. : in windows, \0 in most OS, ...);
  • Some filename may reserved by OS (e.g. CON in windows);
  • Some filename may make user unhappy to handle it (e.g. a file named "--help" in Linux)

Test it out:

function getFilename(url) {
  const filename = decodeURIComponent(new URL(url).pathname.split('/').pop());
  if (!filename) return 'index.html'; // some default filename
  return filename;
}

function test(url) {
  console.log('Filename: %o\nUrl: %o', getFilename(url), url);
}

test('http://www.example.com');
test('http://www.example.com/');
test('http://www.example.com/name.txt');
test('http://www.example.com/path/name.txt');
test('http://www.example.com/path/name.txt/realname.txt');
test('http://www.example.com/page.html#!/home');
test('http://www.example.com/page.html?lang=en&user=Aan9u/o8ai#top');
test('http://www.example.com/%E6%96%87%E4%BB%B6%E5%90%8D.txt')

Using jQuery with the URL plugin:

var file = jQuery.url.attr("file");
var fileNoExt = file.replace(/\.(html|htm)$/, "");
// file == "th.html", fileNoExt = "th"

For node and browsers, based on @pauls answer but solving issues with hash and more defensive:

export function getFileNameFromUrl(url) {
  const hashIndex = url.indexOf('#')
  url = hashIndex !== -1 ? url.substring(0, hashIndex) : url
  return (url.split('/').pop() || '').replace(/[\?].*$/g, '')
} 

Few cases:

describe('getFileNameFromUrl', () => {

  it('absolute, hash and no extension', () => {
    expect(getFileNameFromUrl(
      'https://foo.bar/qs/bar/js-function-to-get-filename-from-url#comment95124061_53560218'))
    .toBe('js-function-to-get-filename-from-url')
  })

  it('relative, extension and parameters', () => {
    expect(getFileNameFromUrl('../foo.png?ar=8')).toBe('foo.png')
  })

  it('file name with multiple dots, hash with slash', () => {
    expect(getFileNameFromUrl('questions/511761/js-function.min.js?bar=9.9&y=1#/src/jjj?=9.9')).toBe('js-function.min.js')
  })
})

This should handle anything you throw at it (absolute URLs, relative URLs, complex AWS URLs, etc). It includes an optional default or uses a psuedorandom string if neither a filename nor a default were present.

function parseUrlFilename(url, defaultFilename = null) {
    let filename = new URL(url, "https://example.com").href.split("#").shift().split("?").shift().split("/").pop(); //No need to change "https://example.com"; it's only present to allow for processing relative URLs.
    if(!filename) {
        if(defaultFilename) {
            filename = defaultFilename;
        //No default filename provided; use a pseudorandom string.
        } else {
            filename = Math.random().toString(36).substr(2, 10);
        }
    }
    
    return filename;
}

Props to @hayatbiralem for nailing the order of the split()s.

url? url.substring(url.lastIndexOf('/')+1, url.lastIndexOf('.')):''
  • Safety is as asked for. when url is null or undefined the result is ''.
  • Removes all of the path with ':', dots and any symbol including the last '/'.
  • This gives the true answer 'th' as asked and not 'th.index'. That is very important of course to have it work at all.
  • It allows filename to have several periods!

  • Not asked, but you can also have a query string without '/' and '.'

It is a corrected answer from Abhishek Sharma so I gave him an upvote. So genious and minimal one-liner - I saw it there :)

ES6 syntax based on TypeScript

Actually, the marked answer is true but if the second if doesn't satisfy the function returns undefined, I prefer to write it like below:

const getFileNameFromUrl = (url: string): string => {
  if (url) {
    const tmp = url.split('/');
    const tmpLength = tmp.length;

    return tmpLength ? tmp[tmpLength - 1] : '';
  }

  return '';
};

For my problem, I need to have the file extension.

Simple Function (Using RegEx Pattern)

function pathInfo(s) {
    s=s.match(/(.*?\/)?(([^/]*?)(\.[^/.]+?)?)(?:[?#].*)?$/);
    return {path:s[1],file:s[2],name:s[3],ext:s[4]};
}

var sample='/folder/another/file.min.js?query=1';
var result=pathInfo(sample);
console.log(result);
/*
{
  "path": "/folder/another/",
  "file": "file.min.js",
  "name": "file.min",
  "ext": ".js"
}
*/
console.log(result.name);

Using RegEx

Let´s say you have this url:

http://127.0.0.1:3000/pages/blog/posts/1660345251.html

Using the following line of code:

var filename = location.pathname.replace(/[\D]/g, "");

Will return:

1660345251
  • Notice that this number is Unix Time, which returns your local time no matter where you are in the World (this should give you really unique post names for this blog example).
  • .replace(/[\D]/g, ""), replaces any non-digit character with an empty string. /[\D]/g says non-digit, and "" says empty string. More about it: here for numbers and here for letters.
  • More about RegEx, here. There are lots of RegEx tools out there that can help you out to get better results in the returning value for filename.

Extra code: Unix Time to Local Time

var humanDate = new Date(0);
var timestamp = entries[index].timestamp;
humanDate.setUTCSeconds(timestamp);

humanDate is for my local time:

Fri Aug 12 2022 20:00:51 GMT-0300 (Argentina Standard Time)

Credits for this code, here.

Related