JavaScriptの学習を始めてコードを書いていると、
文字列や配列に特定の文字があるか検索したい
という場面が出てくるはずです。
そこで今回はJavaScriptで文字列の中から指定のものを検索する方法について、
文字の検索方法4つ
をご紹介します。
JavaScriptで文字の検索方法がわからない方は、ぜひ参考にしてみてくださいね。
特定文字の検索方法
文字列の検索に使われる代表的なものは
indexOf・lastIndexOf・match・search
の4つです。
それでは違いと役割について見てきましょう。
indexOf
文字列の中から、特定の文字が何番目にあるのかを調べて返してくれます。
もし該当がなければ「-1」を返します。
書き方ですが、検索したい文字と検索を始める位置を引数で指定します。（検索を始める位置は省略可能）
|
1 2 3 4 5 |
文字列.indexOf( 検索したい文字, 検索開始位置 ); // もしくは 文字列.indexOf( 検索したい文字 ); |
実際に特定の文字を検索する例文がこちらです。
|
1 2 |
let sample ="abcdeabcdeabcde"; console.log(sample.indexOf("cd")); //検索したい文字「cd」が何番目かを返す。 |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
2
では次に、開始位置を加えるとどうなるかを見ていきましょう。
|
1 2 |
let sample ="abcdeabcdeabcde"; console.log(sample.indexOf("cd",3)); //検索したい文字「cd」が何番目かを返す。検索開始場所は3（つまり4文字目から） |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
7
同じ文字「cd」を検索していますが、違う結果が帰ってきましたね。
これは、検索開始場所が3なので、最初の「cd」が対象外になったためです。
また、以下2点にご注意ください。
・結果はあくまでも「文字列内の何番目の文字か」であって「開始位置から何番目の文字か」ではない。
・開始位置の数字指定ですが、JavaScriptでは数字カウントは「0」から始まる。
（つまり、最初の文字は「0」、２番目の文字は「1」とカウントされる）
lastIndexOf
「indexOf」と同じく、文字列の中から、特定の文字が何番目にあるのかを調べて返してくれます。
何が違うかというと、「後ろから検索する」のが「lastIndexOf」なのです。
|
1 2 3 4 5 |
文字列.lastIndexOf( 検索したい文字, 検索開始位置 ); // もしくは 文字列.lastIndexOf( 検索したい文字 ); |
実際の例がこちらです。
|
1 2 3 4 5 6 |
let sample ="abcdeabcdeabcde"; console.log(sample.lastIndexOf("cd")); //検索したい文字「cd」が何番目かを返す。 let sample ="abcdeabcdeabcde"; console.log(sample.lastIndexOf("cd",3)); //検索したい文字「cd」が何番目かを返す。検索開始場所は3（つまり4文字目から） |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
12
2
ここでは、以下2点にご注意ください。
・結果はあくまでも「最初から何番目の文字か」であって「後ろから何番目の文字か」ではない。
・開始位置の数字指定ですが、これも後ろからカウントではなく、最初からのカウントです。
search
このserchと次にご紹介する「match」は、「正規表現」というものが使えます。
|
1 2 3 4 5 |
文字列.search(検索したい「文字」); //もしくは 文字列.search(検索したい「正規表現」); |
searchは文字列でも検索できますので、その際はindexOfと同じです。文字列内の何番目かを返してくれるところも同じですね。
（ただし開始位置の指定はできません。指定しても無視されます）
まずは文字列を使った例を見ていきましょう。
|
1 2 3 4 5 |
let sample ="abcdeabcdeabcde"; console.log(sample.search("cd")); //検索したい文字「cd」が何番目かを返す。 let sample ="abcdeabcdeabcde"; console.log(sample.search("cd",7)); //検索したい文字「cd」が何番目かを返す。第二引数で指定した7は無視されます。 |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
2
2
では次に「正規表現」を使った検索方法です。
「正規表現」とは、「文字並びのパターンに該当するかどうか」を調べる時に使います。
正規表現は非常に奥が深く、詳しく書くと長くなるのでsearchを使った簡単な例でみていきましょう。
|
1 2 |
let sample ="abcdefgABCDEFG"; console.log(sample.search(/[A-Z]/)); |
searchの引数で指定されている「/[A-Z]/」が正規表現です。
この正規表現が意味するものは「大文字のAからZまでに該当するもの」です。
※ちなみに「小文字のaからzまでに該当するもの」の正規表現の書き方は「/[a-z]/」です。
上記のコードを実行すると、コンソールには下記の内容が出力されます。
7
大文字のA-Zを検索した結果、7番目で見つかったよ、と結果を返してくれましたね。
正規表現はまた別途ご紹介予定ですが、マスターするのは非常に困難です。
基本だけ理解してあとは都度調べながら使うのが賢明でしょう。
match
こちらも正規表現で検索ができますが、searchとは違い、文字列での検索はできません。
さらに「何番目か」を返すのではなく、検索で該当した文字を配列で返します。
|
1 |
文字列.match(検索したい「正規表現」); |
実際に使った例をみていきましょう。
|
1 2 |
let sample ="abcdefgABCDEFG"; console.log(sample.match(/[A-Z]/)); |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
何番目かではなく、「どの文字か」が配列で返ってきましたね。
また、「BCDEF」も大文字だから、それも返ってくるのでは？と思われたかもしれませんね。
正規表現の書き方によるのですが引数に「/[A-Z]/」とした場合は「該当した最初の文字だけ」を返すようになっています。
最初に該当したものだけではなく、該当する「BCDEF」も返してほしい場合の書き方は「/[A-Z]/g」と書きます。
これも実際に試してみましょう。
|
1 2 |
let sample ="abcdefgABCDEFG"; console.log(sample.match(/[A-Z]/g)); |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
思い通りの結果となりましたね。
もうひとつ正規表現の指定方法をご紹介しますが、「/[A-Z]/i」とすると、大文字小文字の区別がなくなります。
|
1 2 |
let sample ="abcdefgABCDEFG"; console.log(sample.match(/[A-Z]/i)); |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
さらにお伝えした「/[A-Z]/g」と「/[A-Z]/i」を組み合わせて、「/[A-Z]/gi」という書き方もできます。
さて、どんな結果が返ってくるかおわかりでしょうか？
では実際に試してみましょう。
|
1 2 |
let sample ="abcdefgABCDEFG"; console.log(sample.match(/[A-Z]/gi)); |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
大文字小文字に関わらず、a-zの文字を全て配列で返してくれましたね。
まとめ
以上、今回は
文字の検索方法4つ
についてご紹介しました。
正規表現を使用するものは少し難しいかもしれませんが、少しずつ使って慣れていきましょう。
