产品:“这输入框所有标点符号替换成空格!”

输入框允许用户输入多个词,虽然有提示多个词之间用空格隔开,但是为了避免用户用各种符号来分隔,比如中文逗号,英文逗号,分号等,产品决定让前端猿我……将用户输入的所有符号替换成空格,咦……好吧,别让我思考一下如何实现……
(以下是我逐步解决问题的过程,可以跳过,拉到下面直接看代码)

利用keyup事件监听,用正则表达式检测event.keyCode或者输入框当前value值是否包含符号。这里有两个问题:
1、当用户想输入!@#¥%……&*这些符号时,是按着shift跟数字键实现的,测试了一下,会触发两次keyup事件,所以排除使用event.keyCode
2、若是每次keyup之后,获取当前输入框的value值,问题出现在连拼多个中文的时候,比如:

clipboard.png

输入bir(其实想输入“比如”这两个字)时,输入框的当前value,在不同系统,不同浏览器下,value值有多种取值:bir或者bi'r,有的甚至是空值,bi'r这种情况,让我不得不放弃使用keyup事件,退而求其次,使用输入框的blur事件。

接下来是如何写正则表达式,有两个思路:
1、直接检测字符是否为标点符号。但是,符号多种多样,全角、半角、特殊符号等,而且这各种各样符号的unicode编码范围是不连续的
2、逆向思维~检测中英文数字之外的字符。如下所示,这四个范围是连续的,只要利用正则表达式中的[^范围1起点-范围1终点范围2起点-范围2终点]即可

汉字、英文字母、数字的unicode范围:
汉字:[0x4e00,0x9fa5](或十进制[19968,40869])
数字:[0x30,0x39](或十进制[48, 57])
小写字母:[0x61,0x7a](或十进制[97, 122])
大写字母:[0x41,0x5a](或十进制[65, 90])

最终代码:

<input type="text" id="test"/>

document.getElementById('test').onblur=function() {
    var oText=this.value;
    this.value=oText.replace(/[^\u4e00-\u9fa5\u0030-\u0039\u0061-\u007a\u0041-\u005a]+/g,' ');
}

有个值得注意的地方,正则表达式中用的是16进制表示的范围,需要把数字的unicode范围u30-u39改为u0030-u0039(数字前面补2个0),小写字母以及大写字母的范围同理,不这样做的话,会导致部分符号过滤失败。原因:

ISO规定unicode用两个字节,也就是16位来统一表示所有的字符,无论是半角的英文字母,还是全角的汉字。

以上~广东7度的天气真不是开玩笑啊,越坐越冷┭┮﹏┭┮,赶紧洗洗睡去了

阅读 1.3k更新于 2018-02-05
推荐阅读
lee's
用户专栏

分享~如果觉得写得还可以,请反手给我一个赞,谢谢啦

0 人关注
2 篇文章
专栏主页
目录