uni-app如何通过过滤器过滤表情符号

轻萱大大_8499

轻萱大大_8499

2026-08-07

212人浏览

原创

uni-app中过滤emoji最稳妥方式是:vue2用vue.filter注册全局过滤器,vue3建议封装工具函数;正则需覆盖unicode补充平面并加u标志;@input中实时过滤更可控,注意ios输入法和array.from处理组合emoji。

uni-app如何通过过滤器过滤表情符号

uni-app 里用 Vue.filter 定义全局过滤器过滤表情

直接在 main.js 或 main.ts 中注册过滤器最稳妥,避免每个页面重复写逻辑。注意 Vue2 和 Vue3 的 API 差异:

  • Vue2:Vue.filter('noEmoji', (val) => {...}),注册后所有模板都能用 {{ text | noEmoji }}
  • Vue3:app.config.globalProperties.$filters.noEmoji = (val) => {...},或通过 app.config.globalProperties 挂载,但模板中无法直接用管道符(|),需改用方法调用

推荐 Vue2 项目用 Vue.filter;Vue3 项目建议封装成工具函数 + computed 或 watch 处理,别强求管道语法。

正则匹配 emoji 的关键点:Unicode 范围必须覆盖完整

常见错误是只匹配 BMP 平面(\u4E00-\u9FA5 这类),漏掉 emoji 主要所在的 Unicode 补充平面(如 ?️???)。实际需同时处理:

  • 基础 emoji:/[\u{1F600}-\u{1F64F}]/u(表情符号)
  • 交通与地图符号:/[\u{1F680}-\u{1F6FF}]/u
  • 杂项符号与象形文字:/[\u{1F700}-\u{1F77F}]/u
  • 补充符号:/[\u{1F900}-\u{1F9FF}]/u
  • 零宽连接符、变体选择符等(如 ?‍?):需额外处理 \u200D 和 \uFE0F

简单粗暴但实用的写法:val.replace(/[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{200D}\u{FE0F}]/gu, '') —— 注意必须加 u 标志,否则 \u{...} 无效。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

@input 事件中实时过滤比过滤器更可控

用户输入时,v-model 绑定的值还没进 data,靠过滤器只能处理显示层,无法阻止非法字符进入数据源。真正要「禁用」,得在输入事件里截断:

  • 绑定 @input="onInput",而不是 @change(后者只在失焦/回车触发)
  • onInput(val) { this.search = val.replace(/[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{200D}\u{FE0F}]/gu, ''); }
  • 如果用了防抖(比如联想搜索),记得先过滤再节流,否则原始字符串可能已含 emoji 并发往服务端

特别注意 iOS 输入法:中文拼音状态下,@input 会先触发未上屏的拼音,再触发上屏后的汉字。若此时正则误删了拼音中间态,会导致输入卡顿。可加判断 if (event?.detail?.value) 确保取到最终值。

emoji 删除逻辑不能只靠 .length

JavaScript 的 string.length 对 emoji 返回的是码元数(如 ?‍? 是 5),不是字符数。直接 str.substr(0, str.length - 1) 会切出乱码。

  • 正确做法是用 Array.from(str) 转成字符数组,再操作:Array.from(str).slice(0, -1).join('')
  • 或者用正则识别 emoji 结构后删除,例如:str.replace(/(?:[\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '').slice(0, -1) 不可靠,仍建议用 Array.from
  • 聊天场景下,用户点击一次「退格」应删一个视觉字符,而非一个 UTF-16 码元 —— 这点最容易被忽略

复杂点在于组合型 emoji(?‍?、?‍❤️‍?),它们由多个 Unicode 字符拼接而成,Array.from 能正确拆分,但正则很难全覆盖。真要高精度处理,得引入 grapheme-splitter 这类库,uni-app 小程序端需权衡包体积。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app过滤器 uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2343

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5043

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6130

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5658

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

803

5

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4076

8

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

2023.07.05

2621

4

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

2023.07.05

7142

9

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

2023.08.11

792

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习