input输入框粘贴unicode零宽字符，前端踩坑和解决方案

在前端表单中，如果用户输入时是直接从其他地方如 excel 里复制的，就有可能包含这类看不见的零宽字符；据说从 iphone 手机的通讯录里复制的电话号码粘贴进excel中就有可能包含零宽字符。

当用户提交时，前端在控制台打印或者network里看提交的接口参数里也是看不到这类字符的

如果 input 输入框有限制最大输入长度 max-length，零宽字符也是会占用输入框的长度的。

另外输入框校验也会被影响。

如下图所示

前端解决办法

过滤零宽字符串

js 复制代码

str.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/g, "");

正则表达式 /[\u200b-\u200f\uFEFF\u202a-\u202e]/g 的解释如下：

[\u200b-\u200f\uFEFF\u202a-\u202e] 表示 Unicode 范围，表示可能存在的多余空白字符的 Unicode 范围。
\u200b-\u200f 表示 Unicode 范围，表示可能存在的零宽空格（Zero-width space）的 Unicode 范围。
\uFEFF 表示 Unicode 字符，表示 U+FEFF 字符，表示字节顺序标记（byte order mark）的 Unicode 字符。
\u202a-\u202e 表示 Unicode 范围，表示可能存在的格式化片段标记（format variant）的 Unicode 范围。
/g 表示全局搜索，表示正则表达式会搜索字符串中所有符合条件的子串。

对于校验类影响-可在校验前过滤零宽字符串

以今天碰到的 react16 + antd V2. 为例

这里可以使用 getFieldDecorator 里的 getValueFromEvent 或者 normalize 参数

------>> antd官网

js 复制代码

<FormItem label="公司税号：">
    {getFieldDecorator('dutyParagraph', {
      initialValue: '',
      normalize: (value) => {
        value = value.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/gi, '')
        return value;
      },
      rules: [
        {
          required: headEditFlag == '1',
          message: '请输入公司税号',
        },
        {
          pattern: new RegExp(/^[A-Za-z0-9]+$/, 'i'),
          message: '公司税号只能是数字和字母！'
        },
        {
          min: headEditFlag == '1' ? 6 : 0,
          message: "最少必须输入6个字符",
        },
        {
          max: 20,
          message: "最多可输入20个字符",
        },
      ],
    })(<Input placeholder='请输入公司税号' />)}
</FormItem>

js 复制代码

<FormItem label="公司税号：">
    {getFieldDecorator('dutyParagraph', {
      initialValue: '',
      getValueFromEvent: (e) => {
        let value = e.target.value || '';
        value = value.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/gi, '')
        return value;
      },
      rules: [
        {
          required: headEditFlag == '1',
          message: '请输入公司税号',
        },
        {
          pattern: new RegExp(/^[A-Za-z0-9]+$/, 'i'),
          message: '公司税号只能是数字和字母！'
        },
        {
          min: headEditFlag == '1' ? 6 : 0,
          message: "最少必须输入6个字符",
        },
        {
          max: 20,
          message: "最多可输入20个字符",
        },
      ],
    })(<Input placeholder='请输入公司税号' />)}
 </FormItem>

常见的几种零宽字符有：

零宽空格：U+200B
零宽连接符：U+200D，常见的复杂Emoji表情即用到了该字符，用于表示多字符关系从而合成复杂新字符
零宽非连接符：U+200C
零宽非断空格符：U+FEFF
左至右符：U+200E
右至左符：U+200F
蒙古文元音分隔符：U+180E

怎么能看见零宽字符？

直接复制到开发工具如 vscode 里，是可以直接看到这类字符的 unicode 码的。如下所示

在 windows 记事本中-右键，选择 "显示 Unicode 控制字符"，也可以‭看到这类特殊符号。

navicat 中查看mysql中的数据，也可以像记事本一样右键选择"显示 Unicode 控制字符"，光标聚焦的时候也可以看到有特殊符号显示出来。

还有复制粘贴进网页、记事本、输入框中，移动光标的时候，也可以发现，这类字符也是需要靠光标移动的。参考文档