JavaScript URL安全文件名字符串

84

寻找一个正则表达式/替换函数,将用户输入的字符串(例如“John Smith's Cool Page"),转换为文件名/ URL 安全字符串,例如 "john_smith_s_cool_page.html"。


1
定义“文件名/ URL 安全字符串”。浏览器将对地址中的字符串进行 URL 编码,现代计算机对文件名字符的限制非常少。 - RobG
1
我会使用类似于 " aAbc1290!@#$%^&*()-=_+;:[]{}'\"|,./<>? ".replace(/[\\\/:\*\?"<>\|]/g, "").trim() + ".html" 的东西。 - loxaxs
5个回答

187

这是一个将除字母和数字以外的所有内容替换掉,并把它们全部转为小写的函数,就像你的示例一样。

var s = "John Smith's Cool Page";
var filename = s.replace(/[^a-z0-9]/gi, '_').toLowerCase();

解释:

这个正则表达式是/[^a-z0-9]/gi。实际上,末尾的gi只是用于在使用表达式时设置一组选项。

  • i表示“忽略大小写差异”
  • g表示“全局”,这实际上意味着应替换每个匹配项,而不仅仅是第一个。

因此,我们真正关注的只是[^a-z0-9]。让我们逐步阅读它:

  • []定义了一个“字符类”,它是一个单个字符的列表。如果您编写[one],那么将匹配'o'或'n'或'e'。
  • 但是,列表开头有一个^。这意味着它只应匹配不在列表中的字符。
  • 最后,字符列表是a-z0-9。将其解读为“从'a'到'z'和从'0'到'9'”。这是一种写abcdefghijklmnopqrstuvwxyz0123456789的简短方式。

因此,这个正则表达式基本上是说:“找到每个不在'a'到'z'或'0'到'9'之间的字母”。


1
这已经非常接近了,我如何添加一些其他安全字符,例如“_”和“-”? - ndmweb
1
我可以这样做吗?var filename = s.replace(/[^a-z0-9_-]/gi, '_').toLowerCase() - ndmweb
19
哦,非常接近了!你只是缺少一点信息 —— -[] 内部的保留字符。你需要对其进行转义。因此,你需要使用 \ - 而不是 - 来表示短划线('-')。换句话说,正则表达式应该是 / [^a-z0-9_ \ -] / gi - Shalom Craimer
14
我会添加 .replace(/_{2,}/g, '_') 来消除结果中连续出现的下划线字符,它们很丑。 - fguillen
3
哦,@ShalomCraimer!离成功如此之近!;-)在方括号“[]”内,“-”是一个特殊字符,但只要它是方括号中的最后一个字符,就无需转义它。这也是“eslint”的偏好(“no-useless-escape”)。所以:/[^a-z0-9_-]/gi - Arel
显示剩余6条评论

23

我知道原作者要求一个简单的正则表达式,但是在清理文件名时还涉及到文件名长度、保留文件名以及保留字符。

请查看 node-sanitize-filename 中的代码,以获得更强大的解决方案。


1
当他们在结尾处执行“截断”操作时,这不会切掉扩展文件名吗?例如:.jpg - denislexic
2
它们截断以使字符数少于255个,这是某些文件系统的限制。如果文件名已经太长,它只会截断扩展名。 - phette23

7

如果你想更灵活和强大地处理Unicode字符等内容,可以结合一些正则表达式使用slugify来移除不安全的URL字符

const urlSafeFilename = slugify(filename, { remove: /"<>#%\{\}\|\\\^~\[\]`;\?:@=&/g });

这会在您的URL中产生漂亮的烤肉串形式的文件名,并允许在a-z0-9范围之外使用更多字符。


3
这是我所做的事情。它可以将完整句子转换为相当干净的URL。 首先,它修剪字符串,然后将空格转换为破折号(-),最后去掉任何不是字母/数字/破折号的字符。

function slugify(title) {
  return title
    .trim()
    .replace(/ +/g, '-')
    .toLowerCase()
    .replace(/[^a-z0-9-]/g, '')
}

slug.value = slugify(text.value);
text.oninput = () => { slug.value = slugify(text.value); };
<input id="text" value="Foo: the old @Foobîdoo!!  " style="font-size:1.2em">

<input id="slug" readonly style="font-size:1.2em">


0

那个字符串只是一个例子,但最终要找到一些可以替换所有非安全字符的东西。基本上就是任何不安全的文件名字符.. [a-z][A-Z][0-9]["_","-"] - ndmweb

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接