表单input输入框复制粘贴进unicode零宽字符，前端踩

　　Unicode统一码
　　也叫万国码、单一码，是计算机科学领域里的一项业界标准，包括字符集、编码方案等。统一码是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。
　　Unicode零宽字符
　　Unicode字符中有一类特殊的字符叫做零宽字符ZWJ（zerowidthjoiner），也叫非打印字符、不可见字符。正则的断言即叫零宽断言，意思即本身并不占用宽度，如比较出名的零宽空格ZWSP：U200B。
　　零宽字符本质也是字符，对于计算机来说，它依然会占用空间，在Unicode字符集中拥有独立的编码，你在Word键入这一字符它仍会被计入字数统计，同样在代码中打印这类字符的长度可以看到也是会占用长度的。
　　零宽字符的宽度为0，对于肉眼而言不可见，在我们常用的一些软件中并不会显示，比如浏览器、Excel。。。，这些字符通常被用于在阿拉伯文与印度语系等文字中，用于控制字符间是否产生连字的效果，在其他大多数语言中，你并不能直接打出这类字符。
　　常见的几种零宽字符有：零宽空格：U200B零宽连接符：U200D，常见的复杂Emoji表情即用到了该字符，用于表示多字符关系从而合成复杂新字符零宽非连接符：U200C零宽非断空格符：UFEFF左至右符：U200E右至左符：U200F蒙古文元音分隔符：U180E怎么能看见零宽字符？
　　直接复制到开发工具如vscode里，是可以直接看到这类字符的unicode码的。
　　在windows记事本中右键，选择显示Unicode控制字符，也可以看到这类特殊符号。
　　navicat中查看mysql中的数据，也可以像记事本一样右键选择显示Unicode控制字符，光标聚焦的时候也可以看到有特殊符号显示出来。
　　还有复制粘贴进网页、记事本、输入框中，移动光标的时候，也可以发现，这类字符也是需要靠光标移动的。零宽字符的应用场景字符加密解密数据防爬隐形水印缩短网址敏感词分隔过审空白评论、空白用户名输入内容翻转如：花了7万5千，其中的7万5会被翻转成5万7零宽字符踩坑
　　之所以发现这个问题，也是从客户的一个excel模板中粘贴电话号码，最终发现莫名有特殊字符，开始还以为是输入组件的bug。
　　数据库是支持这种字符的，所以如果前后端未进行数据过滤，是会被直接存储到数据库中的，正常也是没什么问题。但是如果有搜索功能，用户在应用中直接手动输入检索的时候，因为手动输入是不包含特殊字符的，所以有可能导致匹配不出来，给人的感觉就是：明明看着一毛一样，一个字母一个字母对着敲的，咋就搜不出来呢！
　　在前端表单中，如果用户输入时是直接从其他地方如excel里复制的，就有可能包含这类看不见的零宽字符，据说从iphone手机的通讯录里复制的电话号码粘贴进excel中就有可能包含零宽字符。
　　当用户提交时，前端在控制台打印或者network里看提交的接口参数里也是看不到这类字符的，还有如果input输入框有限制最大输入长度maxlength，零宽字符也是会占用输入框的长度的。前端解决方案
　　前端解决可以直接在输入或提交表单的时候通过unicode码去过滤这类特殊字符，但是每个输入框都要这样去做工作量太大了，而且都是重复性工作，最终想到了用vue的全局指令自己封装一个vtrim统一去过滤数据，正好项目中用的elmentui的输入框组件trim修饰符也有bug，直接一块解决了，后期使用和维护都比较方便。
　　directives目录下的index。js，利用webpack提供的require。context，自动注册目录下的指令文件，直接将文件名作为指令名：require。context是webpack提供的api用来创建上下文作用域三个参数分别为：目录、是否搜索子文件夹、匹配文件名的正则constfileInforequire。context（。，false，。（？！index。js）。。js）constfileNameListfileInfo。keys（）〔〕exportdefault｛插件为对象时，Vue。use（）会默认调用installinstall：function（Vue）｛fileNameList。forEach（fileName｛constdirectivefileInfo（fileName）提取路径中的文件名作为指令名称constdirectiveNamefileName。replace（（。）（〔azAZ09〕）。js，2）注册指令Vue。directive（directiveName，directive。defaultdirective）｝）｝｝
　　directives目录下的trim。js，去除输入框首尾空格和过滤零宽字符：去除输入框首尾空格和过滤零宽字符elementui的输入框elinput加了trim会导致字符中间不能输入空格（文档上有说：不支持vmodel修饰符）需同时过滤掉输入内容里的零宽字符，一般是用户直接从excel中直接复制粘贴进来的内容constTRIM｛inserted：el｛兼容第三方输入组件，如elinputconstinputTagel。tagName！INPUT？el。querySelector（input）：elconsthandlerfunction（event）｛constoldValevent。target。value过滤掉零宽字符和首尾空格constnewValoldVal。replace（〔〕g，）。trim（）if（oldVal！newVal）｛event。target。valuenewValdispatchEvent（inputTag，input）｝｝el。inputTaginputTagel。blurHandlerhandlerinputTag。addEventListener（blur，handler）｝，unbind：el｛const｛inputTag｝elinputTag。removeEventListener（blur，el。blurHandler）｝｝functiondispatchEvent（el，type）｛constevtdocument。createEvent（HTMLEvents）evt。initEvent（type，true，true）el。dispatchEvent（evt）｝exportdefaultTRIM
　　在vue入口文件main。js中注册全局指令：
　　Vue。use本身是一个函数，如果需要注册的插件是一个对象，就需提供insatll方法，Vue会去执行它，同时传递一个Vue构造函数作为第一个参数，以及use中的其他参数，不依赖Vue去运行的我们可以直接用Vue。prototype去挂载到原型上就行了；需要和Vue构造函数进行交互的时候，才使用Vue。use，如全局组件（像iview、elementui）、全局过滤器、全局指令这些。importVuefromvueimportAppfrom。Appimportrouterfrom。router全局指令importdirectivesfromdirectivesVue。use（directives）newVue（｛el：app，router，template：，components：｛App｝，｝）
　　在vue页面中的输入框中使用：templateinputvtrimelinputvtrimtemplate
　　参考文档Unicode官网HowtouseUnicodecontrolsforbiditextUnicodeCharacterCategories后端过滤隐藏字符（零宽度字符）