【JavaScript】入力文字列を分割して配列内の文字列を検索する2つの方法

JavaScriptでは、複数の文字列を格納した配列から、ユーザーが入力したキーワードに一致する要素を効率的に抽出できます。本記事では、入力された文字列をもとに配列を検索する2つのアプローチを、実際のコード例とともに解説します。

前提となる課題

ここでは、文字列の配列（例：配送データ）と検索用の入力文字列が与えられます。目標は、ユーザーが入力したすべてのキーワードを含む配列要素だけを絞り込むことです。

解決策1：split()で入力を分割し、every()で全キーワード一致を確認

まず、入力文字列を split(" ") で個々のキーワードに分解し、filter() と every() を組み合わせて、すべてのキーワードが含まれる要素のみを取り出す方法です。

const deliveries = ["14/02/2020, 11:47,G12, Kalkaji", "13/02/2020, 11:48,A59, Amar Colony"];
const input = "g12, kal";
const pn = input.split(" ");
const requiredDeliveries = deliveries.filter(delivery =>
pn.every(p =>
delivery.toLowerCase()
.includes(p.toLowerCase())));
console.log(requiredDeliveries);

出力結果

["14/02/2020, 11:47,G12, Kalkaji"]

このコードでは、大文字・小文字の違いによる検索漏れを防ぐため、比較前に toLowerCase() で両者を小文字に統一しています。その結果、「g12」と「kal」という2つのキーワードをどちらも含む「G12, Kalkaji」の配送データだけが一致として判定されます。

解決策2：入力を分割せず、そのまま部分一致させるシンプルな方法

よりシンプルな方法として、入力文字列を分割する工程を省き、文字列全体をそのまま includes() で照合することも可能です。

const deliveries = ["14/02/2020, 11:47,G12, Kalkaji", "13/02/2020, 11:48,A59, Amar Colony"];
const input = "g12, kal";
const requiredDeliveries = deliveries
.filter(delivery =>
delivery.toLowerCase()
.includes(input.toLowerCase()));
console.log(requiredDeliveries);

出力結果

["14/02/2020, 11:47,G12, Kalkaji"]

注意点：マッチングは順序に依存する

この第2の方法を使う際は、マッチングが順序に敏感である点に注意が必要です。たとえば、入力が「AB」であれば「ab」や「Ab」には一致しますが、「BA」や「ba」には一致しません。キーワードの出現順序が不定になる可能性がある場合は、解決策1のように入力を分割して個別に照合する方が確実です。

まとめ：使い分けのポイント

目的や入力形式に応じて、この2つのアプローチを使い分けることで、柔軟で信頼性の高い配列検索処理を実装できます。