JS用正则处理文件名

一、起因

需要做一个上传文件的功能，但是对于上传的文件，比如上传头像，这个用户无需知道文件名的，那么我们的文件名最后都是不要存在中文，因为如果存在中文的话，可能需要进行url编码，如果没有进url编码的话，可能会带来额外的麻烦，比如存储cookie时，浏览器会自动把你的url地址中的中文进行url编码，这样你取出来的地址需要解码才能请求网络数据。

关于url编码可以看看我的这一篇文章：JS对url编码解码，或者自查其他资源了解。

二、解决

// 生成唯一id
function getUniqueID(){//生成11位随机的36进制id+上时间戳的36进制
    return (Math.random().toString(36).substr(2))+Date.now().toString(36)
}
// 过滤文件名称的中文及特殊字符
function filter_fileNameStr(fileName){
   console.log("fileName:",fileName)
   var suffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)//后缀名
   console.log("后缀suffix:",suffix)
   prefix = fileName.substring(0, fileName.lastIndexOf('.'))//截取后缀名之前的字符,以便于后面做字符处理 前缀名
   console.log("前缀prefix:",prefix)
   var reg = /^[\u4e00-\u9fa5\(\)_a-zA-Z0-9]+$/ //匹配中英文字符用于过滤特殊字符
   var reg_filterSpecial = /[^\u4e00-\u9fa5\(\)_a-zA-Z0-9]+/g //匹配非中英文的特殊字符,过滤特殊字符
   var reg_cn = /[\u4e00-\u9fa5\(\)]+/g //匹配中文字符用于过滤中文字符
   if(!reg.test(prefix)) {//匹配非所有中英文字符,
     console.log("图片含有特殊字符,开始过滤特殊字符,过滤前 前缀名称：",prefix)
     prefix = prefix.replace(reg_filterSpecial, '')//有特殊字符,则替换为空
     console.log("图片含有特殊字符,处理图片名称,过滤后 前缀名称：",prefix)
   }
   if(reg_cn.test(prefix)) {//匹配所有中英文字符,如果图片有中文字符,则替换为空
     console.log("图片含有中文,开始过滤中文,过滤前 前缀名称：",prefix)
     prefix = prefix.replace(reg_cn, '')//有中文字符,则替换为空
     console.log("图片含有中文,处理图片名称,过滤后 前缀名称：",prefix)
   }
   fileName = prefix+'_weteach_'+(getUniqueID().slice(1,10)) + suffix;//前缀加上唯一ID加上后缀名,重新命名完成 weteach是我作品的名称
   return fileName;
}

测试代码：

let fileNameArr = ['hmyield.jpg','123.docs','hu*/-+*`.jpg','胡绵源.png','666.doc']
for(let i in fileNameArr){//for...in时 i 的值是数组的下标，并且其中i的值是字符串。
    console.log("第"+(parseInt(i)+1)+'个文件处理开始————————————————————————————')
    let newname = filter_fileNameStr(fileNameArr[i])
    console.log("第"+(parseInt(i)+1)+"个文件处理后名称为：",newname)
    console.log("第"+(parseInt(i)+1)+'个文件处理结束————————————————————————————')
    console.log('')
}

运行结果：(运行结果有个问题，就是应该把打印中的 ‘图片’ 改为’文件‘，才符合主题，懒得改了，主要是思路)

第1个文件处理开始————————————————————————————
fileName: hmyield.jpg
后缀suffix: .jpg
前缀prefix: hmyield
第1个文件处理后名称为： hmyield_weteach_trqss4rsz.jpg
第1个文件处理结束————————————————————————————

第2个文件处理开始————————————————————————————
fileName: 123.docs
后缀suffix: .docs
前缀prefix: 123
第2个文件处理后名称为： 123_weteach_wks0yxoie.docs
第2个文件处理结束————————————————————————————

第3个文件处理开始————————————————————————————
fileName: hu*/-+*`.jpg
后缀suffix: .jpg
前缀prefix: hu*/-+*`
图片含有特殊字符,开始过滤特殊字符,过滤前 前缀名称： hu*/-+*`
图片含有特殊字符,处理图片名称,过滤后 前缀名称： hu
第3个文件处理后名称为： hu_weteach_sj7fc8co5.jpg
第3个文件处理结束————————————————————————————

第4个文件处理开始————————————————————————————
fileName: 胡绵源.png
后缀suffix: .png
前缀prefix: 胡绵源
图片含有中文,开始过滤中文,过滤前 前缀名称： 胡绵源
图片含有中文,处理图片名称,过滤后 前缀名称： 
第4个文件处理后名称为： _weteach_1iij0ll81.png
第4个文件处理结束————————————————————————————

第5个文件处理开始————————————————————————————
fileName: 666.doc
后缀suffix: .doc
前缀prefix: 666
第5个文件处理后名称为： 666_weteach_3htsw8m1c.doc
第5个文件处理结束————————————————————————————