【JavaScript】入力された文字列を空白で区切って配列に代入する方法【検索機能】

2022年6月24日 18:40

HITOSUKEのシステム開発Unitでシステム開発を担当しているTです。
今回は、JavaScriptで文字と空白の文字列を空白で区切って配列に代入する方法を解説していきます。
複数検索条件を入力するときに、検索窓（input type="text"）が複数あるとレイアウトの調整が難しかったり、ユーザビリティが格段に下がります。
ブラウザで検索するような空白で文字を区切って入力できることが最適ですね。
今回は様々な想定を考慮して実装していきますので、参考にしていただければ幸いです。

条件の整理

まず初めに条件の整理をしていきましょう。
今回は下記の条件に当てはまるものを条件とします。

検索対象は0個以上の文字列
空白（半角・全角）を区切り文字として選定
条件を一つずつ配列に代入
空白文字の入力は一つとは限らない

以上になります。
なお、それらを用いてDBからデータを抽出する実装する記事は今後公開予定です。
それでは、実際のソースコードと解説をします。

実装

sample.js

function showMessage() {
  let searchBox = document.getElementById("searchBox").value;
  let shapingString = searchBox.replace(/　/g, " ");
  let stringArray = shapingString.split(" ");
  let shapingStringArray = stringArray.filter((string) => {
    return string !== "";
  });
  // -----整形はここまで-----
  document.querySelector('ul').innerHTML = '';
  for (let i = 0; i < shapingStringArray.length; i++) {
    let list = document.createElement("li");
    list.textContent = shapingStringArray[i];
    document.getElementById("array").appendChild(list);
  }
}

sample.html

<input type="text" id="searchBox">
<input type="button" onclick="showMessage()" value="検索">
<ul id="array"></ul>

それでは、ポイントをかいつまんで解説していきます。

let shapingString = searchBox.replace(/　/g, " ");

はじめにreplace()を使用して、条件の二つ目「空白（半角・全角）を区切り文字として選定」を通過させます。
対象の文字列である全角スペースの出現箇所すべてを半角スペースに変換して整形します。

日本人のユーザーを想定したときに、全角スペースが使用されることは容易に想像できますね。
一般ユーザーからしてみれば全角スペースも半角スペースもほとんど同じなので、きちんと変換されるよう実装しましょう。

let stringArray = shapingString.split(" ");

次にsplit()を使用して、一つの文字列を半角スペースで区切って配列の要素に代入していきます。
その際、空白が複数続いて入力されたときに空文字として認識される仕様のため次の処理でしっかりと整形します。

let shapingStringArray = stringArray.filter((string) => {
    return string !== "";
  });

上記の処理では、split()によって空文字が配列の要素に代入されてしまったときに予期せぬ動作をさせぬよう、空文字を排除した配列を再作成しています。
サーバーサイドでDBを呼び出す際に、空文字が検索条件として渡されるのはユーザーも想定外のことです。
上記の処理で条件3と条件4をクリアできます。

実装は以上になります。CODEPENで動作を確認することもできますので、変数を変えてコードに出てきたメソッドの動きも確認してみてください。

さいごに

もし、HITOSUKEのシステム開発Unitの知りたいことや興味・関心がありましたらぜひコメントください！

※HITOSUKEでは一緒に事業を盛り立ててくれる仲間を募集しています！

少しでも気になってくれた方は、こちらをご覧ください。

この記事が気に入ったらサポートをしてみませんか？