空白文字が2種類あるから混乱するのだよ(全角空白じゃないよ)

 空白文字が2種類あることを知らなかったんですよね(^_^;)

まず、空白文字についての話の前に、知っておくべきことから。



Javascriptで"a"という文字を表現する方法。

alert("a");//a
alert("\x61");//a
alert("\u0061");//a

これを比較してみる。

alert("\x61" == "a");//true
alert("\x61" == "\u0061");//true
alert("\u0061" == "a");//true

正規表現ではどうだろう?

var ret
ret = /\u0061/.test("\x61");//true
ret = /\u0061/.test("a");//true
ret = /a/.test("\x61");//true
ret = /a/.test("\u0061");//true
ret = /\x61/.test("a");//true
ret = /\x61/.test("\u0061");//true

ワタクシ的にはこれを知ったぐらい仰け反った(・Д・;)

"12" + 3 //-> "123"
"12" - 3 //-> 9

本題へ

「マジメに正規表現パターンを書こう!!」
↓
「正規表現で「\s」は何にマッチするのか?」

というのが発端。

" "(半角空白)は"\x20"に等しい。

" " == "\x20" //true
/\s/.test(" ") //true
/\s/.test("\x20") //true

ここでjQueryで使われている正規表現を思い出した。

rtrim = /^(\s|\u00A0)+|(\s|\u00A0)+$/g;

「\u00A0」って何だ?
調べるとやはりこれは空白文字だった。

つまり、文字コード32(0x20)と160(0xA0)の二つが空白文字だった。

文字コードが違うので当然この二つは同じ文字ではない。

"\x20" == "\xA0"　//false

で、正規表現の「\s」がこの二つにマッチすれば良いのだが、IEでは"\xA0"にマッチしてくれない。
ということでjQueryではあのような正規表現となっていることが理解できた。

全角空白文字は?

全角空白もIEではマッチしない。
なので、正しいトリムの正規表現はこうなる。

rtrim = /^(\s|\u00A0|\u3000)+|(\s|\u00A0|\u3000)+$/g;

しかし、私的にはこうした方が良いように思う。

rtrim = /^[\s\u00A0\u3000]+|[\s\u00A0\u3000]+$/g;

トリム関数の動作についての解釈の違いかな?

さらに

もう少し調べてみると、

引用:Regular Expressions - MDC
...ホワイトスペース以外の 1 文字にマッチする。[^ \f\n\r\t\v\u00A0\u2028\u2029] と同等。...

ということで

rtrim = /^[\f\n\r\t\v\u0020\u00a0\u2028\u2029\u3000]+|[\f\n\r\t\v\u0020\u00a0\u2028\u2029\u3000]+$/g;

となり、

さらに

引用:RegExp - MDC
1. 註: equivalent_s

これは以下の表現と同等です。：
[\t\n\v\f\r \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000]

ということで最終的にこうなった。

rtrim = /^[\f\n\r\t\v\u0020\u00a0\u2000-\u200b\u2028-\u3000]+|[\f\n\r\t\v\u0020\u00a0\u2000-\u200b\u2028-\u3000]+$/g;

たかが空白文字を取り除くのに長すぎ(-_-;)