jQuery字符串替换问题：按需移除emoji文件名中的-fe0f后缀

场景与问题 #

我正在开发类似「你在想什么」的发帖功能，使用twemoji插件处理emoji。出于安全考虑，存储到数据库前需将emoji转换为对应的替代代码/图片文件名，展示时再转回图片，采用格式[emoji=filename.png]。

现有代码如下：

var string = "[emoji=1f938.png] [emoji=1f938-200d-2642-fe0f.png] [emoji=26f9-fe0f.png]";

string.replace(/-fe0f.png/g, '.png')
      .replace(/\[emoji=(.*?)\]/g,'<img src="https://example.net/images/$1">');

这段代码会移除所有文件名中的-fe0f.png，导致部分图片损坏。需要实现以下规则：

• 仅当文件名长度≤14或格式为(char)-fe0f.png时，移除-fe0f.png
• 多段字符组合（如(char)-(char)-(char)-fe0f.png）保留-fe0f
• 补充需求：遇到30-fe0f-20e3.png这类中间带-fe0f的文件名，需移除中间的-fe0f，转换为30-20e3.png

期望转换效果 #

原字符串：

[emoji=1f938.png] [emoji=1f938-200d-2642-fe0f.png] [emoji=26f9-fe0f.png] [emoji=30-fe0f-20e3.png]

转换后：

[emoji=1f938.png] [emoji=1f938-200d-2642-fe0f.png] [emoji=26f9.png] [emoji=30-20e3.png]

解决方案 #

通过精准的正则表达式分步骤匹配处理，代码如下：

var string = "[emoji=1f938.png] [emoji=1f938-200d-2642-fe0f.png] [emoji=26f9-fe0f.png] [emoji=30-fe0f-20e3.png]";

const processed = string
  // 处理中间的-fe0f-，直接替换为-
  .replace(/-fe0f-/g, '-')
  // 匹配单个码点+fe0f的格式（如26f9-fe0f.png），替换为单个码点.png
  .replace(/([^-]+)-fe0f\.png/g, '$1.png')
  // 匹配文件名（.png前部分）长度≤10的情况（总长度含.png为14），移除末尾-fe0f
  .replace(/\[emoji=([^\]]{1,10})-fe0f\.png\]/g, '[emoji=$1.png]')
  // 最终转换为img标签
  .replace(/\[emoji=(.*?)\]/g, '<img src="https://example.net/images/$1">');

console.log(processed);

正则逻辑说明 #

1. /-fe0f-/g：直接匹配中间的-fe0f-片段，替换为-，解决中间带-fe0f的文件名处理需求
2. /([^-]+)-fe0f\.png/g：匹配[无横杠字符]-fe0f.png格式，确保是单个Unicode码点加fe0f后缀的情况，替换后保留原码点
3. /\[emoji=([^\]]{1,10})-fe0f\.png\]/g：限制匹配的文件名（.png前）长度≤10，满足文件名总长度≤14的移除规则
4. 最后一步将[emoji=xxx.png]格式转换为img标签

测试输出结果 #

<img src="https://example.net/images/1f938.png"> <img src="https://example.net/images/1f938-200d-2642-fe0f.png"> <img src="https://example.net/images/26f9.png"> <img src="https://example.net/images/30-20e3.png">

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