【JavaScript入門】文字列の検索まとめ(indexOf/search/match/test)

こんにちは、ライターのマサトです！

今回は、JavaScriptで文字列や配列（連想配列）を「indexOf()」などを使って検索する方法について学習しましょう。

本記事を読むと、ある文字列の中に検索したいキーワードが含まれているか？をチェックしたり、配列内に格納されているキーワードを見つけることも簡単にできます。

この記事では、

などの基本的な内容から、応用的な使い方に関しても解説していきます。

この記事で、JavaScriptによる検索方法をしっかり学習して自分のスキルアップを目指しましょう！

「indexOf」を使った文字列の検索方法

それでは、まず最初に文字列（String）の検索方法から学習を進めていきましょう！

JavaScriptで文字列を検索する最も定番な方法としては、「indexOf()」を使ったプログラミング手法があります。一般的な使い方としては次のとおりです！

var str = 任意の文字列

str.indexOf( 検索したい文字, 検索開始位置 );
// ※検索開始位置は省略可能

「indexOf」の第1引数には、検索したい文字を指定します。これは、変数「str」に代入されている文字列の中から、自分が検索したいキーワードを指定するという意味になります。

そして、文字列の先頭（0番目）から順番に1文字ずつ検索をしていき、最初に一致した位置（index番号）を数値で返してくれます。（大文字・小文字は区別します）

また、第2引数の「検索開始位置」は省略可能ですが、何文字目から検索するかを数値で指定することも可能です。

「indexOf」の文字列(String)検索方法

文章だけの説明だと難しく感じるかもしれないので、実際にプログラミングしてみましょう！

まずは、簡単な文字列の検索を行うプログラムを作ります。次のコード例を見てください！

// 任意の文字列
var str = 'banana, apple, orange, apple';

// 「apple」を検索してみる
var result = str.indexOf( 'apple' );

console.log( result );

実行結果

8

この例では、indexOfの第1引数に「apple」と指定したので、文字列の中に「apple」が存在していたら最初に一致した位置を返してくれます。

実行結果を見ると分かりますが、先頭から1文字ずつ検索して8番目からの文字列が「apple」と一致するため、「8」という数値を返していますね。

今回の文字列には、「apple」という文字がもう1つありますが、最初に一致した位置を返したらプログラムは終了するので注意してください。

ちなみに、「検索開始位置」を「9（9番目から）」と指定するとどうなるでしょうか？

var str = 'banana, apple, orange, apple';

// 9番目の文字から検索を開始する
var result = str.indexOf( 'apple', 9 );

console.log( result );

実行結果

23

検索開始位置の「9番目」から検索すると「p」の位置からになるので、2つ目の「apple」が一致しているのが分かりますね。

もし、検索したい文字が見つからなかった場合は「-1」が返るようになっているので、これを利用すれば条件分岐も簡単に作れます！

var str = 'banana, apple, orange, apple';
var result = str.indexOf( 'melon' );

if(result !== -1) {

    console.log( '見つかりました' );

}
else {

    console.log( '見つかりません！' );

}

実行結果

見つかりません！

この例では、indexOfの引数に「melon」と指定していますが、文字列内には存在しないので「-1」が返ります。

そのため、IF文の条件式で「result !== -1」とすることで、見つからなかった場合に「false」の処理を実行できるようになるわけです。

「lastIndexOf」で後ろから検索する方法

次に、文字列の「後方検索」について学習しましょう！

「後方検索」とは、任意の文字列を後ろから検索していくことなのですが、ちょうど「indexOf()」と反対の検索方法になります。

まずは、一般的な使い方を見てみましょう！

var str = 任意の文字列

str.lastIndexOf( 検索したい文字, 検索開始位置 );
// ※検索開始位置は省略可能

構文を見ると分かりますが、「indexOf()」とほとんど同じですね。

違うところは、「indexOf()」が文字列の先頭から1文字ずつ順番に検索していたのに対して、この「lastIndexOf()」は文字列の後ろから先頭に向かって検索していくという点です！

実際の使用例も見てみましょう！

// 任意の文字列
var str = 'banana, apple, orange, apple';

// 「apple」を末尾から検索する
var result = str.lastIndexOf( 'apple' );

console.log( result );

実行結果

23

この例では、lastIndexOfの第1引数に「apple」が指定されており、文字列内の後ろから一致するまで検索をしていきます。

先ほどの「indexOf()」の場合だと、文字列の先頭から検索するので8番目から始まる「apple」が一致しましたが、「lastIndexOf()」は後ろから検索するので23番目が一致するわけです。

ちなみに、後ろから検索しても返ってくる「値」は「indexOf()」と同じく先頭から順番に数えた文字位置になるので注意してください！

また、「検索開始位置」も同じように利用できます。

var str = 'banana, apple, orange, apple';

// 22番目の文字から後方検索する
var result = str.lastIndexOf( 'apple', 22 );

console.log( result );

実行結果

8

この例だと、22番目の文字から先頭に向かって後方検索を行う点に注目しましょう。そのため、文字列内で0〜22文字目までの間にある「apple」が一致しているわけです。

もし、見つからなかった場合は、「indexOf()」と同じく「-1」が返るようになっています。

このように、「indexOf()」と「lastIndexOf()」は非常によく似ており、使い分けとしては「先頭から検索」するか、「末尾から検索」するかという考え方になるでしょう。

「indexOf」の配列(Array)検索方法

今度は、配列（Array）についての検索方法を学習してみましょう！

これまでは文字列内のキーワードを検索してきましたが、実は配列に格納されているキーワードの検索も「indexOf()」を使うことが可能です。

次のコード例を見てください！

var array = ['banana', 'apple', 'orange', 'apple'];

var result = array.indexOf( 'apple' );

console.log( result );

実行結果

1

この例では、indexOfの第1引数に「apple」を指定しており、配列「array」の中に格納されている文字列と一致するかどうかを検索しています。

返り値としては「1」となっており、これは配列要素のインデックス番号を示しています。

また、文字列の場合と同様に、最初に一致したインデックスのみ返す点と、見つからな買った場合は「-1」が返り値になるという点を覚えておきましょう！

他にも、「lastIndexOf()」や「some()」「every()」などのコールバック関数を使った検索手法もあり、次の記事で詳しく解説していますのでぜひ参考にしてみてください！

正規表現で検索する方法

正規表現とは

正規表現は、特殊な文字を組み合わせて「パターン」を作ることで、そのパターンに適合した特定の文字を検出することができるようになります。

いきなりですが、次の例を見てください。

//正規表現のパターン例
/^d{3}-?d{4}$/

恐らく、意味不明な文字の羅列にしか見えないと思いますが、実は、このパターンは「郵便番号」を表しています。

郵便番号（123-4567）の組み合わせパターンというのは…

「3桁の数値」「-（ハイフン、ない場合もある）」「4桁の数値」

このような形式が一般的なわけですが、先程の正規表現はまさにこのパターンを表した文字列ということになります。

例えば、HTMLフォームなどでユーザーに郵便番号を入力してもらう時に、正しく入力されているかをチェックするプログラムは、先程の正規表現を使うと非常に簡単なコードで実現します。

var postcode = '123-4567';
var result = postcode.match(/^d{3}-?d{4}$/);

//パターンに適合しなければreusltはnullになる

変数「postcode」に郵便番号が格納されているので、これに「match()」を使って正規表現を当てはめるだけで、正しい郵便番号なのかどうかをチェックすることが可能になります。

ちなみに、正規表現を使わずにプログラムしようとすれば、非常に複雑なコードになり、バグも発生しやすくなります。主な正規表現の記号と意味については以下の表の通りです。

記号	記号の説明	例	例の説明
.	任意の1文字。改行文字は除く。	.+	任意の文字列
*	直前の1文字の0回以上の繰り返しと一致	hoge*	hogeもしくはhogee...と一致
^	行の先頭	^[0-9]	行頭が数字
$	行の末尾	^.{10}$	10文字の行
[ ]	カッコ内の任意の1文字と一致。「-」で範囲指定可。	[a-z]	小文字のアルファベット1文字と一致
[^ ]	カッコ内の任意の1文字と不一致。「-」で範囲指定可。	[^A-Z]	大文字のアルファベット以外
+	直前の文字の1個以上の繰り返しと一致	hoge+	hogee...と一致
?	直前の文字が0個または1個の場合に一致	hoge?	hogeもしくはhogと一致
{ }	カッコ内の数値の繰り返しと一致	{n}	直前の文字のn個の繰り返しと一致
	同上	{,n}	直前の文字のn個以下の繰り返しと一致
	同上	{m,}	直前の文字のm個以上の繰り返しと一致
	同上	{m,n}	直前の文字のm個以上、n個以下の繰り返しと一致
|	直前、直後どちらかのパターンに一致	hoge|piyo	hogeまたはpiyo
( )	カッコ内をグループ化。マッチした内容は参照可。	ー	ー

正規表現の使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

「search」を使った検索方法

ここからは、「正規表現」を使った検索手法について学習を進めていきましょう！

本章では、これまで通り文字列の検索をキーワードで指定したり、正規表現を使った検索も可能な「search」を使ったプログラミングについて見ていきます。

まずは、一般的な構文から見ていきましょう！

var str = 任意の文字列

str.search(検索したい「文字」か「正規表現」);

「search()」には、検索をしたい「文字」を今まで通り当てはめても良いし、正規表現を使って詳細に指定することも可能なのが最大の特徴です。

返り値としては、これまで同様に先頭から順番に検索をして一致した位置を「数値」で返してくれます。

早速ですが、簡単な例として任意の文字を検索してみましょう！

// 任意の文字列
var str = 'user-12, user-Mike, user-Jane, user-325';

// 検索したい文字
var result = str.search( 'Jane' );

console.log( result );

実行結果

25

この例では、searchの引数として「Jane」を指定し、文字列内で一致する箇所を先頭から順番に検索しています。

このような使い方は、これまでと同じですね！

では、次に正規表現を使った例を見てみましょう！

var str = 'user-12, user-Mike, user-Jane, user-325';

// 正規表現で「数字」の入ったユーザー名だけを
var result = str.search( /user-d{3}/ );

console.log( result );

実行結果

31

この例では、「3桁の数値が入ったユーザー名」という条件で正規表現「/user-d{3}/」を作り、検索を行っているのが分かります。

実行結果を見ると分かりますが、文字列内で条件に合致するのは「user-325」だけなので、「31（31番目の文字から）」が返り値として取得できているわけです。

ちなみに、「search()」メソッドの場合も、検索したい文字が見つからなければ「-1」を返すようになっているので、覚えておきましょう！

「match」を使った検索方法

今度は、「match」を使った正規表現による検索手法を学習しましょう！

これまでの検索メソッドと違い、「match()」は正規表現のみに対応しているのが特徴となっており、返り値も「配列データ」で取得できます。

一般的な構文は次のとおりです！

var str = 任意の文字列

str.match( 正規表現 );

考え方はこれまでと同じで、文字列の中から検索したい文字を指定するわけですが、その指定方法が「正規表現」のみになっているのがポイントです。

こちらも簡単なサンプル例として、数字の入った「ユーザー名」を検索してみましょう！

var str = 'user-12, user-Mike, user-Jane, user-325';

// 正規表現を指定して検索
var result = str.match( /user-d+/ );

console.log( result );

実行結果

["user-12"]

この例では、「user-に続く文字が2桁の数値」という意味で「/user-dd/」という正規表現を設定して検索しているのが分かります。

文字列内で最初に条件と合致するのは「user-12」であり、実行結果からも正しく検索が行われているのが分かりますね。ちなみに、条件に合致する文字列が無ければ「null」が返るので覚えておきましょう！

「match」で複数の文字列を検索する方法

次に、「match()」を使う場合には正規表現のフラグを活用できるという点を学習しておきましょう。

このフラグを使うことで、同じ文字列内の条件に合致する対象文字が複数ある場合はすべて取得できるようになります！

次のコード例を見てください！

var str = 'user-12, user-Mike, user-Jane, user-325';

// 正規表現に「g」フラグを付与する
var result = str.match( /user-d+/g );

console.log( result );

実行結果

["user-12", "user-325"]

この例では、matchの引数として「user-のあとに数値が入っている文字列」という意味で「/user-d+/g」と指定しています。

最後に「g」フラグを付与することで、最初だけでなくすべての条件に合致する文字列を取得するという意味になります。そのため、実行結果を見ると分かりますが、「user-12」と「user-325」が配列として取得できているわけですね。

また、検索したい文字が見つからなければ「null」を返してくれるので、条件分岐も簡単に作れるのが特徴です。

var str = 'user-12, user-Mike, user-Jane, user-325';

var result = str.match( /user-d{4}/ );

// 「null」かどうかをチェックする
if(result) {

  console.log( '見つかりました' );

}
else {

  console.log( '見つかりません！' );

}

実行結果

見つかりません！

この例では、「4桁の数値が入った文字列」という意味で「user-d{4}」と指定し、先頭から順番に検索しているのが分かります。

しかしながら、文字列内に4桁の数値が入った文字列は存在しないので返り値が「null」となり、IF文では「false」の処理が実行されているというわけですね。

このように、正規表現で検索をすると非常に細かい条件で検索が行えるので非常に便利ですね。matchの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

「test」を使った検索方法

ここでは、「test」を使った検索方法を解説します。

testは正規表現のパターンから呼び出し、引数にチェックする文字列を指定します。

次のプログラムで確認してみましょう。

var str = 'user-12, user-Mike, user-Jane, user-325';
var regex = /user-d+/;

var result = regex.test(str);

console.log(result);

実行結果：

true

このようにして、testを使って正規表現で文字列のチェックができました。

testメソッドの使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

文字列の操作総まとめ

文字列を操作する様々な方法はこちらの記事で詳しく解説しているので、ぜひ確認してください。

まとめ

今回は、JavaScriptで文字列（String）や配列（Array）などを効率よく「検索」できるメソッド群（indexOfなど）について学習しました！

最後に学習した内容を、もう一度ポイントを踏まえて振り返ってみましょう。

上記ポイントを踏まえながら、今回学んだ検索方法をぜひ自分でも実践するようにしてみてください！