🚀手机号格式验证不通过？原来是零宽字符搞的鬼

#前言

我们有一个需要用到用户的手机号进行一些操作的功能，在这里行文的时候姑且脱敏为：用户输入手机号，我们发短信，这也是经常遇到的功能。

然而有一次，明明用户输入了一个非常正常的手机号（行文中手机号脱敏为 13500000000，我们在本文中认为这个手机号是合法的 ），但是却死活验证不通过，导致发短信失败。

然后下游的同事反馈过来说，我们给到他们的手机号是这样的：

\u200B'13500000000'

\u200B 是什么东西呢？它其实是零宽字符的一种，属于零宽空格。

#零宽字符简介

零宽字符是一类特殊的字符，它们在文本中不会产生可见的显示效果，但在布局和编码中占据了一个字符位置。

这些字符通常用于实现一些特定的功能或者格式化要求，而不会直接显示给用户。

零宽字符的主要特点是它们不会影响文本的可见外观，但会对文本的处理和处理方式产生影响。

零宽字符的种类有很多，其中一些常见的包括：

1. 零宽空格（\u200B） ：在文本排版中用于表示一个不可见的空格，通常用于断词或调整排版格式。
2. 零宽非连接符（\u200C） ：在一些语言的文本处理中，用于指示两个字符不应该连在一起形成一个新的字符。
3. 零宽连接符（\u200D） ：在一些语言的文本处理中，用于指示两个字符应该连在一起形成一个新的字符。

也就是说，这一类字符会占据一个字符长度，但是这一类字符是不可见的。所以导致了识别手机号的时候出现问题。

这些字符在我们正常使用键盘进行输入的时候，是打不出来的，所以我们最后也没有找出用户的手机号出现这种零宽字符的原因，手机号也是用户自己输入的才对。

网上查了一些资料之后发现，可能是用户从某些地方（比如 Word文档 之类）复制过来导致的这个零宽字符的出现，但具体原因还是无法确定。

我们这里可以写一个小脚本来产生一个带零宽字符的手机号：

复制const zeroWidthChar = "\u200B";
const phone = `135000000${zeroWidthChar}00`;
console.log(phone);

打印出来确实看不出来

然后假设我们有一个注册的表单，需要输入手机号来发送验证码，验证手机号的正则是这样的：

复制/^[1][3,4,5,7,8][0-9]{9}$/

然后把我们上面输出的 phone 拷贝到这里输入框看看：

可以看到是过不了验证的，然而当我们全部清空手动输入这个手机号的时候，又是没有问题的

这其实就是零宽字符在搞鬼。

#如何识别并过滤

这个零宽字符真的看不出来吗？我试了一下，还是有一些手段可以让他露出马脚的。比如说我把刚才那个手机号复制到控制台，会显示这个

这样我们其实一眼就能看出中间包含了一些特殊字符，再比如我把这个手机号发送到微信的消息中，当我双击这条消息时，发现是无法全文选中的：

第一张图是含有零宽字符的手机号，双击时无法全文选中，第二张图是正常的手机号，双击时全文选中是正常的。

过滤这类型的字符也是非常简单的，通过正则去过滤就可以了：

复制const filteredValue = value.replace(/[\u200B-\u200D]/g, '');

#为什么会存在零宽字符这种东西？

踩完零宽字符的坑之后，我觉得这个东西的存在只会给程序带来意想不到的 bug 。

但是存在即合理，我就去查阅了一些资料，大致了解了为什么零宽字符会存在：

1. 零宽字符可以在文本中实现一些特殊的排版效果，例如调整单词间距、强制换行等。在网页排版、文档编辑和富文本编辑器中，可能会使用零宽字符来实现一些格式化要求，如添加不可见的空格或断词符。
2. 零宽字符在信息隐藏和编码中也有一定的应用。例如，零宽字符可以用于将隐藏信息嵌入到文本中，以实现隐写术或水印功能。这种方法常见于数字版权保护、身份验证和数字签名等应用中。
3. 在某些语言的文本处理中，零宽字符可以用于调整字符之间的连接方式。例如，在阿拉伯语等从右向左书写的语言中，零宽连接符和零宽非连接符用于指示两个字符是否应该连接成一个字符。
4. 零宽字符还可以用于表示一些特殊的符号或标记，例如表示空格、换行、分隔符等。这些字符通常不会直接显示给用户，但会影响文本的处理和解析方式。

好吧，看起来还是有很强大的用处的，只不过对我来说可能都没用过它的这些用处，就觉得它对我来说百害而无一益。现在大致了解了之后，也是能够去正视它。