產品:「這輸入框全部標點符號替換成空格!」

輸入框容許用戶輸入多個詞,雖然有提示多個詞之間用空格隔開,可是爲了不用戶用各類符號來分隔,好比中文逗號,英文逗號,分號等,產品決定讓前端猿我……將用戶輸入的全部符號替換成空格,咦……好吧,別讓我思考一下如何實現……
(如下是我逐步解決問題的過程,能夠跳過,拉到下面直接看代碼)前端

利用keyup事件監聽,用正則表達式檢測event.keyCode或者輸入框當前value值是否包含符號。這裏有兩個問題:
一、當用戶想輸入!@#¥%……&*這些符號時,是按着shift跟數字鍵實現的,測試了一下,會觸發兩次keyup事件,因此排除使用event.keyCode
二、如果每次keyup以後,獲取當前輸入框的value值,問題出如今連拼多箇中文的時候,好比:正則表達式

clipboard.png

輸入bir(其實想輸入「好比」這兩個字)時,輸入框的當前value,在不一樣系統,不一樣瀏覽器下,value值有多種取值:bir或者bi'r,有的甚至是空值,bi'r這種狀況,讓我不得不放棄使用keyup事件,退而求其次,使用輸入框的blur事件。瀏覽器

接下來是如何寫正則表達式,有兩個思路:
一、直接檢測字符是否爲標點符號。可是,符號多種多樣,全角、半角、特殊符號等,並且這各類各樣符號的unicode編碼範圍是不連續的
二、逆向思惟~檢測中英文數字以外的字符。以下所示,這四個範圍是連續的,只要利用正則表達式中的[^範圍1起點-範圍1終點範圍2起點-範圍2終點]便可測試

漢字、英文字母、數字的unicode範圍:
漢字:[0x4e00,0x9fa5](或十進制[19968,40869])
數字:[0x30,0x39](或十進制[48, 57])
小寫字母:[0x61,0x7a](或十進制[97, 122])
大寫字母:[0x41,0x5a](或十進制[65, 90])

最終代碼:this

<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度的天氣真不是開玩笑啊,越坐越冷┭┮﹏┭┮,趕忙洗洗睡去了spa

相關文章
相關標籤/搜索