JS替换文件名中的符号数字后残留多余空格如何解决

问题原因 #

你把数字、-、_、(、)、.等字符直接替换为空字符串，这些字符原本所在位置的前后空格就会被保留，形成连续的多余空格。比如原字符串片段Image 2021-07-12 at，删掉中间的日期部分后，两侧的空格就会连在一起变成两个空格。

解决方案 #

分三步处理即可得到符合要求的结果：

1. 先将所有不需要的字符统一替换为空格
2. 把连续的多个空格合并为单个空格
3. 去除字符串首尾的空格

优化后的代码如下：

function replaceString(string) {
  // 匹配所有数字、横杠、下划线、括号、点，替换为空格
  const tempStr = string.replace(/[\d\-_\(\).]/g, ' ');
  // 合并连续空格+去除首尾空格
  return tempStr.replace(/\s+/g, ' ').trim();
}

// 原有业务逻辑保持不变
var _filname = oFile.name;
var fileName = _filname.substr(0, _filname.lastIndexOf('.'));
$('#title').val(replaceString(fileName));

验证效果 #

输入文件名WhatsApp Image 2021-07-12 at 19.14.09 (4).jpeg，处理后输出结果为WhatsApp Image at，完全符合预期。

内容的提问来源于stack exchange，提问作者Anonymous Girl