空白文字が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;
たかが空白文字を取り除くのに長すぎ(-_-;)

0 Comments:

Sony Style(ソニースタイル)
デル株式会社

Recent Posts