textarea 中的计数在前端和后端之间的差别

计算 textarea 中用户输入字符的个数,给出用户提示,并在前端和后端同时校验长度是非常常见的需求。但是在前端和后端,对于带有换行的文本的长度计算却有一点出入。

简单的说来,在前端和后端如果都直接计算字符的长度,那么,一个换行,在前端,长度计算是1,而在后端计算出来是2。

我写了个简单的 DEMO ,你可以点开看看,注意查看源代码。截图如下:

我们可以看到第三个字符对应的 unicode 编码,然后我们到 http://www.unicode.org/charts/PDF/U0000.pdf 这里来查看编码对应的字符,可以看到 61 对应的是字符”a”, a 对应 “NL(new line)”,62 对应的是字符“b” ,也就是说在 a 和 b 之间只有一个“NL”,所以,我们计算的长度为 5。

接着,我们提交表单试试,打开调试工具,选择录制请求,可以看到如下的结果:

可以看到,提交表单的时候,换行符就变成了 %0D%0A , 我们可以查到这两个字符对应的是 “CR(carriage return)” 和 “NL(new line)” ,所有后端在计算这个长度的时候,就变成 6 了。

那知道这个问题的存在了,解决办法就有好几种了,你可以在前端计算 length 的时候,把 \n 替换成 \r\n 再计算,和后端保持一致,也可以在后端做替换和前端保持一致。也可以在前后端都忽略掉换行符。具体的方法取决于你的业务场景。

感谢 xj.ye 的评论,在不同浏览器下表现也是不一致的,主要是 IE 和其他浏览器的区别。