検索語の前後の空白をtrimで除く：空白だけの入力も先に分けよう

検索語をコピーして貼り付けたら、手で入力したときと結果が違った。まず確認したいのは、文字の前後に余分な空白が付いていないかです。検索語の前後の空白をtrimで除く処理を、検索を始める前の小さな準備として作ります。

題材は架空の資料検索です。今回は検索画面や一致する資料の抽出は作らず、検索へ渡す文字列を決める部分だけ扱います。名前や本文に含まれる空白を何でも消す処理にはしません。

元の入力と、検索に使う値を分けて持つ

trimは文字列の両端から空白を取り除き、その結果を返すメソッドです。メソッドは、値に対して呼び出す処理を指します。元の文字列を直接書き換えるわけではありません。MDNのtrimの説明では、改行も両端から除く対象になると確認できます。

失敗しやすいのは、raw.trim()と書いただけで、その後もrawを検索に使う形です。結果を受け取っていないので、元の空白付きの値を使い続けます。修正では、戻り値をqueryという別名へ入れ、以降の判定でその値を参照します。

二つの名前を残すのは、どの入力をどう変えたか比べるためです。利用者が入力した文章すべてを保存する仕組みは、この練習には含めません。手元で用意した文字列だけを使います。

空白を除いた後で、検索を始めるか決める

次のコードはJavaScriptの実行環境で単独で動かせます。rawには文字列を渡す約束です。外部データの型を検証する処理や、入力欄との接続は省いています。

function prepareQuery(raw) {
  const query = raw.trim();
  if (query === "") {
    return { ready: false, query };
  }
  return { ready: true, query };
}

const raw = "  紙の地図  ";
console.log(prepareQuery(raw));
console.log(prepareQuery("   "));
console.log(raw === "  紙の地図  ");

最初はreadyがtrue、queryが「紙の地図」になります。次はreadyがfalse、queryが空文字になります。最後はtrueで、元の入力は変わっていません。readyは「検索に進めるか」を表す、この例で決めた項目名です。

空白を除く前に空文字だけを調べると、半角スペース三つは空文字と異なるため通過します。ここでは順番を「整える、空か調べる」に固定します。空なら検索を始めず入力を案内する想定ですが、案内文の画面表示はまだ実装していません。

途中の空白は、検索の仕様として別に考える

「紙 地図」の途中にある空白はtrimでは消えません。二語として検索したいのか、空白を含む一つの資料名として探したいのかは、別途決めることです。前後を除く処理を追加しただけで、複数語の検索が完成したことにはなりません。

今回は内部の空白をそのまま残します。全角と半角の英数字をそろえる処理も行いません。例えば「Ａ」と「A」を同じ値にすることは、trimが担当する変換ではありません。何をそろえるかが増えたら、それぞれに入力例と期待値を作ります。

入力文字を画面へ反映する段階では、表示方法も別に確認します。配列から資料を選ぶ処理へ進むなら、filterで一覧を絞る記事と組み合わせ、検索前の準備と一覧の抽出を分けてください。

前後の空白と、語の途中の空白を比べる

「地図」「 地図 」「 」「紙 地図」「　地図　」を順に渡します。最後の例は全角スペースです。期待するqueryは順に「地図」「地図」、空文字、「紙 地図」「地図」と書いてから実行してください。

続けて改行だけの文字列を試し、readyがfalseになるか確かめます。結果が違ったら、元の値ではなくqueryで判定しているかを見直します。完成条件は、空白の位置による違いを説明でき、空白だけの入力を検索へ渡さないことです。JavaScriptの無料レッスンでは、この関数へ渡す値を変えるところから試せます。