【JavaScript】文字の検索方法について解説!

JavaScriptの学習を始めてコードを書いていると、

文字列や配列に特定の文字があるか検索したい

という場面が出てくるはずです。

そこで今回はJavaScriptで文字列の中から指定のものを検索する方法について、

文字の検索方法4つ

をご紹介します。

JavaScriptで文字の検索方法がわからない方は、ぜひ参考にしてみてくださいね。

特定文字の検索方法

文字列の検索に使われる代表的なものは

indexOf・lastIndexOf・match・search

の4つです。

それでは違いと役割について見てきましょう。

indexOf

文字列の中から、特定の文字が何番目にあるのかを調べて返してくれます。

もし該当がなければ「-1」を返します。

書き方ですが、検索したい文字と検索を始める位置を引数で指定します。(検索を始める位置は省略可能)

実際に特定の文字を検索する例文がこちらです。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

2

では次に、開始位置を加えるとどうなるかを見ていきましょう。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

7

同じ文字「cd」を検索していますが、違う結果が帰ってきましたね。

これは、検索開始場所が3なので、最初の「cd」が対象外になったためです。

また、以下2点にご注意ください。

・結果はあくまでも「文字列内の何番目の文字か」であって「開始位置から何番目の文字か」ではない。

・開始位置の数字指定ですが、JavaScriptでは数字カウントは「0」から始まる。

(つまり、最初の文字は「0」、2番目の文字は「1」とカウントされる)

lastIndexOf

「indexOf」と同じく、文字列の中から、特定の文字が何番目にあるのかを調べて返してくれます。

何が違うかというと、「後ろから検索する」のが「lastIndexOf」なのです。

実際の例がこちらです。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

12
2

ここでは、以下2点にご注意ください。

・結果はあくまでも「最初から何番目の文字か」であって「後ろから何番目の文字か」ではない。

・開始位置の数字指定ですが、これも後ろからカウントではなく、最初からのカウントです。

search

このserchと次にご紹介する「match」は、「正規表現」というものが使えます。

searchは文字列でも検索できますので、その際はindexOfと同じです。文字列内の何番目かを返してくれるところも同じですね。

(ただし開始位置の指定はできません。指定しても無視されます)

まずは文字列を使った例を見ていきましょう。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

2

2

では次に「正規表現」を使った検索方法です。

「正規表現」とは、「文字並びのパターンに該当するかどうか」を調べる時に使います。

正規表現は非常に奥が深く、詳しく書くと長くなるのでsearchを使った簡単な例でみていきましょう。

searchの引数で指定されている「/[A-Z]/」が正規表現です。

この正規表現が意味するものは「大文字のAからZまでに該当するもの」です。

※ちなみに「小文字のaからzまでに該当するもの」の正規表現の書き方は「/[a-z]/」です。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

7

大文字のA-Zを検索した結果、7番目で見つかったよ、と結果を返してくれましたね。

正規表現はまた別途ご紹介予定ですが、マスターするのは非常に困難です。

基本だけ理解してあとは都度調べながら使うのが賢明でしょう。

match

こちらも正規表現で検索ができますが、searchとは違い、文字列での検索はできません。

さらに「何番目か」を返すのではなく、検索で該当した文字を配列で返します

実際に使った例をみていきましょう。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

[“A”]

何番目かではなく、「どの文字か」が配列で返ってきましたね。

また、「BCDEF」も大文字だから、それも返ってくるのでは?と思われたかもしれませんね。

正規表現の書き方によるのですが引数に「/[A-Z]/」とした場合は「該当した最初の文字だけ」を返すようになっています。

最初に該当したものだけではなく、該当する「BCDEF」も返してほしい場合の書き方は「/[A-Z]/g」と書きます。

これも実際に試してみましょう。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

[“A”, “B”, “C”, “D”, “E”, “F”, “G”]

思い通りの結果となりましたね。

もうひとつ正規表現の指定方法をご紹介しますが、「/[A-Z]/i」とすると、大文字小文字の区別がなくなります。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

[“a”]

さらにお伝えした「/[A-Z]/g」と「/[A-Z]/i」を組み合わせて、「/[A-Z]/gi」という書き方もできます。

さて、どんな結果が返ってくるかおわかりでしょうか?

では実際に試してみましょう。

上記のコードを実行すると、コンソールには下記の内容が出力されます。

[“a”, “b”, “c”, “d”, “e”, “f”, “g”, “A”, “B”, “C”, “D”, “E”, “F”, “G”]

大文字小文字に関わらず、a-zの文字を全て配列で返してくれましたね。

まとめ

以上、今回は

文字の検索方法4つ

についてご紹介しました。

正規表現を使用するものは少し難しいかもしれませんが、少しずつ使って慣れていきましょう。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?