使用ES2018正则Unicode属性类过滤Emoji表情

轩陌

分类: JavaScript 7211 3

最近项目中有遇到前端需要文本输入框中的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

  • 43人 Love
  • 8人 Haha
  • 9人 Wow
  • 2人 Sad
  • 6人 Angry
Emoji表情正则、js正则扩展

作者简介: 轩陌

打赏

生命的意义在于折腾,一直努力成长中,期待梦想实现的那刻。

共 3 条评论关于 “使用ES2018正则Unicode属性类过滤Emoji表情”

Loading...