js函数从url获取文件名

Question

我有一个像http://www.example.com/blah/th.html这样的网址

我需要一个javascript函数来给我'th'值.

我的所有网址都有相同的格式(2个字母的文件名,扩展名为.html).

我希望它是一个安全的功能,所以如果有人传入一个空的URL它不会破坏.

我知道如何检查长度,但我应该检查null是否正确？

Answer 1

var filename = url.split('/').pop()

Answer 2

为什么这么难？

var filename = url.split('/').pop().split('#')[0].split('?')[0];

Answer 3

使用匹配功能.

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

Answer 4

除了现有的答案之外，我建议使用URL() constructor（在浏览器和 Node.js 中均有效），因为您可以确保您的 URL 有效：

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}`);

Answer 5

与其他人类似,但是......我使用过汤姆的简单脚本 - 一行,
然后你可以在任何地方使用文件名var:http:
//www.tomhoppe.com/index.php/2008/02/grab-文件名从-窗口的位置/

var filename = location.pathname.substr(location.pathname.lastIndexOf("/")+1);

Answer 6

这应该适用于所有情况

function getFilenameFromUrl(url) {
  const pathname = new URL(url).pathname;
  const index = pathname.lastIndexOf('/');
  return (-1 !== index) ? pathname.substring(index + 1) : pathname;
}

Answer 7

由于使用自定义代码的案例往往会失败，因此我参考了 JavaScriptURL类。唉，它被相对 URL 噎住了！此外，它没有获取文件名的属性。不是史诗。

\n

必须有一个好的库来解决这个常见问题。看 URI.js。您所需要的只是一个简单的语句，如下所示：

\n

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

\n

然后我们可以创建一个简单的函数来执行 null 检查并删除文件扩展名：

\n

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

\n

这是一个包含测试用例的片段供您使用。除驱动器路径外，所有情况均通过。

\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n

结果

\n

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

\n

如果您懒得编写自定义代码并且不介意使用库来为您工作，那么此解决方案适合您。如果您想编写解决方案的代码，那么它不适合您。

\n

Answer 8

这些不适用于像“/my/folder/questions.html#dssddsdsd?toto=33&dududu=podpodpo”这样的长网址

在这里我希望得到“questions.html”。所以一个可能的（慢）解决方案如下

fname=function(url) 
{ return url?url.split('/').pop().split('#').shift().split('?').shift():null }

然后你可以测试在任何情况下你都只得到文件名。

fname("/my/folder/questions.html#dssddsdsd?toto=33&dududu=podpodpo")
-->"questions.html"
fname("/my/folder/questions.html#dssddsdsd")
-->"questions.html"
fname("/my/folder/questions.html?toto=33&dududu=podpodpo")
"-->questions.html"

(and it works for null)

（我很想看到更快或更智能的解决方案）

Answer 9

考虑URL查询和哈希标识符的正则表达式解决方案:

function fileNameFromUrl(url) {
   var matches = url.match(/\/([^\/?#]+)[^\/]*$/);
   if (matches.length > 1) {
     return matches[1];
   }
   return null;
}

JSFiddle 在这里.

Answer 10

该答案仅适用于浏览器环境。不适合节点。

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');
}

这里有两个函数：

• 第一个从 url 获取文件名
• 第二个从完整文件名中获取不带扩展名的文件名

对于解析URL，new一个URL对象应该是最好的选择。另请注意，URL 并不总是包含文件名。

注意：此函数尝试从 URL 解析文件名。但它不保证文件名有效且适合使用：

• 某些操作系统不允许文件名中包含某些字符（例如，:在 Windows 中，\0在大多数操作系统中，...）；
• 某些文件名可能由操作系统保留（例如CON在Windows中）；
• 某些文件名可能会让用户不愿意处理它（例如，Linux 中名为“--help”的文件）

测试一下：

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')