使用ES2018正则Unicode属性类过滤Emoji表情
分类: JavaScript 8157 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
共 3 条评论关于 “使用ES2018正则Unicode属性类过滤Emoji表情”