jQueryでスペースがreplaceできない

Question

検索ワードを配列にしたいです。

考えたのはこの方法です。
・半角スペース区切りでsplitすること。
・もし全角スペースがあれば半角スペースにreplaceすること。

しかし後述するコードを書いて、「あ　いう　え お」を入力してみましたところ、

Array(3) [ "あ", "いう　え", "お" ]

のような表示がコンソールに出ます。

いうとえが１つの値として認識されてしまっているのです。

こちらがそのコードです。

<input type="text">
<button type="button">検索</button>

$(function(){
  $('button').click(function(){
  	var search_word = $('input').val().replace('　',' ').split(' ');
  	console.log(search_word);
  });
});

どんな風にしたらきちんとできそうでしょうか？

Answer 1

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace
str.replace(regexp|substr, newSubstr|function)
substr (pattern)
newSubStr に置き換えられる String です。これは逐次的な文字列として扱われ、正規表現としては解釈されません。最初に出てきたものだけが置き換えられます。

上の記載の通り、replaceの第一引数にStringとして全角スペースを渡した場合、str (= 'あ　いう　え お') の中で最初に出現した全角スペースのみが半角スペースに置換されます。

文字列中のすべての全角スペースを置換したい場合、replace第一引数をgフラグ付きの正規表現 (RegExpオブジェクト) にする必要があります。
'あ　いう　え お'.replace(/　/g, ' ').split(' '); // -> (4) ["あ", "いう", "え", "お"]

Comments

[dakarakarad]

そういうことでしたか。ありがとうございます。納得できました。

Answer 2

全角スペースを半角に変えてからsplitしないでも一気にやればいいのでは？

<script>
$(function(){
  $('button').on('click',function(){
    var search_word = $('input').val().split(/[\u3000&\x20;]/g);
    console.log(search_word);
  });
});
</script>
<input type="text" value="あ　いう　え お">
<button type="button">検索</button>

Comments

[dakarakarad]

ありがとうございます。プロっぽくて好きです。

[yambejp]

一応unicodeやキャラクターコードで書いてあるのは
紙に印刷しても手入力で再現できるためです
とくにスペース系の文字は目で確認できないので・・・