Xuanmo Blog

最近项目中有遇到前端需要文本输入框中的Emoji表情给匹配出来，不让用户输入，百度搜索出来很多答案都是匹配不全的，后边在阮一峰老师的正则扩展中找到了一个比较方便的方法，之前也没有注意过正则的扩展，记录一下，使用下边这段正则即可匹配Emoji表情：

/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu

示例

可以直接将下边这段代码在Chrome控制台运行查看结果：

/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu.test('🤓')

在项目中使用

有些低版本浏览器不支持此语法，例如IE浏览器，由于我的项目是用vue做的，babel需要安装一个依赖才能正确转换语法，不然babel编译也会报错，使用下边命令安装依赖即可

yarn add @babel/plugin-proposal-unicode-property-regex -D
或者
npm i -D @babel/plugin-proposal-unicode-property-regex

在babel配置文件中添加插件：

plugins: [
  // 转换ES2018 正则Unicode类
  ["@babel/plugin-proposal-unicode-property-regex",
    {
      "useUnicodeFlag": true
    }
  ]
]

更多资料

正则扩展资料：https://github.com/ruanyf/es6tutorial/blob/gh-pages/docs/regex.md

更多匹配规则：https://github.com/mathiasbynens/regexpu-core/blob/master/property-escapes.md

在线转换语法：https://mothereff.in/regexpu