淺談 js 字串 trim 方法之正則篇

標籤：c   style   class   blog   code   java   

關於 trim 其實沒啥好說的，無非就是去除首位空格，對於現代瀏覽器來說只是簡單的正則 /^\s+|\s+$/ 就可以搞定了。
而且支援中文空格   等等。
什麼 \s 支援 中文空格？
是的。

開啟 RegExp#character-classes 往下拉一點，找到 \s 這個解釋。

原文：
Matches a single white space character, including space, tab, form feed, line feed and other Unicode spaces. Equivalent to [ \f\n\r\t\v\u00a0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u2028\u2029\u202f\u205f\u3000].

Google譯文:
匹配單個空白字元，包括空格，定位字元，換頁，換行等Unicode的空格。
相當於 [ \f\n\r\t\v\u00a0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u2028\u2029\u202f\u205f\u3000]

其中 \u00a0 是   \u3000 是 中文空格，其他是什麼，我也不知道，有興趣的可以自己去翻 unicode 表。

看到這，已經顛覆了我們傳統正則的規範了，以前，我們只知道 \s 等價於 [ \f\n\r\t\v]，但卻不知道現在的js裡卻等價於所有空白字元。
話雖如此，但是低版本卻一直是 [ \f\n\r\t\v]，甚至連 trim 都木有，所以我們要相容低版本的話，不能簡單的用 /^\s+|\s+$/ 處理了，要加上中文空格 和  
所以要 /^[\s\u3000\u00A0]+|[\s\u3000\u00A0]+$/ 才行，這樣常用的就有了，至於那些 \u2000 之類的，我也不知道是什麼，可以按需添加進去。
常用的無非就中文空格和實體空格了。

我們看下 jQuery 是怎麼處理這個的。

文本

// 1.4.1rtrim = /^(\s|\u00A0)+|(\s|\u00A0)+$/g,// 1.5.1, 1.6.1, 1.7.1trimLeft = /^[\s\xA0]+/;trimRight = /[\s\xA0]+$/;// 1.8.1, 1.9.1, 1.10.1, 1.11.1rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,

// 1.4.1rtrim = /^(\s|\u00A0)+|(\s|\u00A0)+$/g,// 1.5.1, 1.6.1, 1.7.1trimLeft = /^[\s\xA0]+/;trimRight = /[\s\xA0]+$/;// 1.8.1, 1.9.1, 1.10.1, 1.11.1rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,

好吧，1.4-1.7 都一樣，值去除普通空格和實體空格。
1.8-1.11 加了一個 \uFEFF ，這個是什麼東西呢？
jQuery 的注釋寫到 Make sure we trim BOM and NBSP (here‘s looking at you, Safari 5.0 and IE)
譯為： 確保去除 BOM 和   (請看你的 Safari 5.0 and IE)
什麼 BOM ？為什麼會出現 BOM ？
這東西一般人是打不出來的，為什麼要去除這個呢?
PS：這裡的BOM是 位元組順序標記(byte-order mark)，不清楚的，請翻閱這裡 位元組順序標記 。

我也不知道，最近翻不了牆，所以懶得找了。
但是他不去除中文空格這有點說不過去了，難道他們不會中文，就無視中文空格嗎？
所以我們應該最佳化下這個正則 /^[\s\u3000\uFEFF\xA0]+|[\s\u3000\uFEFF\xA0]+$/g 這樣才對嘛。

來看下原生 trim 和我們正則去除結果如何吧:

文本運行

var rtrim = /^[\s\u3000\uFEFF\xA0]+|[\s\u3000\uFEFF\xA0]+$/g;console.log( "普通空格測試:" );console.log( "‘" + " 普通空格 ".replace(rtrim, "") + "‘" );console.log( "‘" + " 普通空格 ".trim() + "‘" );console.log( "實體空格測試:" );console.log( "‘" + " \u00a0 實體空格 \u00a0 ".replace(rtrim, "") + "‘" );console.log( "‘" + " \u00a0 實體空格 \u00a0 ".trim() + "‘" );console.log( "中文空格測試:" );console.log( "‘" + " 　 中文空格 　 \u3000".replace(rtrim, "") + "‘" );console.log( "‘" + " 　 中文空格 　 \u3000".trim() + "‘" );

var rtrim = /^[\s\u3000\uFEFF\xA0]+|[\s\u3000\uFEFF\xA0]+$/g;console.log( "普通空格測試:" );console.log( "‘" + " 普通空格 ".replace(rtrim, "") + "‘" );console.log( "‘" + " 普通空格 ".trim() + "‘" );console.log( "實體空格測試:" );console.log( "‘" + " \u00a0 實體空格 \u00a0 ".replace(rtrim, "") + "‘" );console.log( "‘" + " \u00a0 實體空格 \u00a0 ".trim() + "‘" );console.log( "中文空格測試:" );console.log( "‘" + " 　 中文空格 　 \u3000".replace(rtrim, "") + "‘" );console.log( "‘" + " 　 中文空格 　 \u3000".trim() + "‘" );

結果很明顯，都去除乾淨了，說明 trim 也是支援中文空格的。
好了今天就分享這麼個小知識點，明天見。