【JavaScript】文字列を検索する便利なメソッド

こんにちは、Ryohei（@ityryohei）です！

JavaScriptで文字列を検索する便利なメソッドのご紹介です。

JavaScriptのコーディングをしていると「この文字列の中にこの文字が含まれるか検索したい！」という状況になることがあります。そういった方に向けて、特定の文字の中から指定した文字列を検索することができる便利なメソッドをご紹介しています。

では、解説していきます。

indexOf()

indexOf()は特定の文字列内から指定した文字列を前方から検索するメソッドです。検索した結果、指定した文字列が存在した場合は文字列の出現位置（インデックス番号）を、存在しなければ「-1」の値を返します。

試しに簡単なサンプルを記述してみます。下記はparagraph内からsearchの出現位置を調べています。

var paragraph = 'なまむぎなまごめなまたまご';
var search = 'なま';

console.log(paragraph.indexOf(search));

//実行結果
0

実行結果は「0」です。先頭の文字列がヒットしたためですね。

デフォルトでは省略されていますが、indexOf()は第二引数を指定することできます。第二引数に整数を指定すると、検索する文字列の開始位置を指定することができます。

試しに第二引数に「5」を指定してみましょう。

var paragraph = 'なまむぎなまごめなまたまご';
var search = 'なま';

console.log(paragraph.indexOf(search, 5));

//実行結果
8

コンソールには4ではなく8のインデックス番号が表示されます。indexOf()では第二引数に指定された整数の位置にある次のインデックス番号から検索されます。そのため、5番目の位置にある「なま」ではなく9番目の位置にある「なま」のインデックス番号が返ってきます。こちらの特長を覚えておくとindexOf()がより使いやすくなるかもしれないですね。

ちなみにインデックス番号は「0」から始まるため実際の位置から「-1」少ない値となっています。

補足

本記事では日本語のサンプルを使っていますが、英文字の場合は大文字・小文字を区別して結果を返してくれます。

lastIndexOf()

lastIndexOf()は特定の文字列内から指定した文字列を後方から検索するメソッドです。検索した結果、指定した文字列が存在した場合は前方からの数えた文字列の出現位置（インデックス番号）を、存在しなければ「-1」の値を返します。

試しに簡単なサンプルを記述してみます。下記はparagraph内からsearchの出現位置を調べています。

var paragraph = 'なまむぎなまごめなまたまご';
var search = 'なま';

console.log(paragraph.indexOf(search));

//実行結果
8

lastIndexOf()はindexOf()と同様に、第二引数を指定することができます。第二引数には検索を開始するインデックス番号を指定することができます。

試しに第二引数に「7」を指定して検索してみます。

var paragraph = 'なまむぎなまごめなまたまご';
var search = 'なま';

console.log(paragraph.indexOf(search, 7));

//実行結果
4

実行すると、インデックス番号「4」が返ってくるかと思います。第二引数に指定した「7」番目がスタート位置となり、そこから左に向かって検索していることがわかりますね。検索結果も正しい値が返ってきています。

lastIndexOf()は特定の文字列を後方から検索する際に便利なメソッドですね。

補足

本記事では日本語のサンプルを使っていますが、英文字の場合は大文字・小文字を区別して結果を返してくれます。

startsWith()

startsWith()は特定の文字列が指定した文字列で始まるかを検索するメソッドです。特定の文字列の先頭が指定した文字列で始まる場合は「true」を、始まらない場合は「false」を返します。

試しにサンプルを書いてみましょう。下記のサンプルは「paragraph」が持っている文字列が「search」の文字列で始まるかを確認しています。

var paragraph = 'なまむぎなまごめなまたまご';
var search = 'なま';

console.log(paragraph.startsWith(search));

//実行結果
true

実行結果は「true」です。先頭に検索する文字列が存在するためです。

startsWith()は、indexOf()やlastIndexOf()と同様に第二引数に検索を始めるインデックス番号を指定することができます。

var paragraph = 'なまむぎなまごめなまたまご';
var search = 'なま';

console.log(paragraph.startsWith(search, 4));

//実行結果
true

上記を実行すると「なまごめ」の「なま」がヒットするため「true」が返ってきます。

補足

本記事では日本語のサンプルを使っていますが、英文字の場合は大文字・小文字を区別して結果を返してくれます。
startsWidth()はECMAScript 2015からの実装になりますのですべてのブラウザをカバーしているわけではありませんので、使用する場合はご注意ください。

endsWith()

endsWith()は特定の文字列が指定した文字列で終わるかを検索するメソッドです。特定の文字列の末尾が指定した文字列であれば「true」を、指定した文字列でなければ「false」を返します。

試しに簡単なサンプルを記述してみます。

var paragraph = 'なまむぎなまごめなまたまご';
var search = 'なま';

console.log(paragraph.endsWith(search));

//実行結果
false

実行結果は「false」です。文字列の末尾が「なま」ではなく「まご」のためです。

endsWith()にも第二引数を指定することができます。上記でご紹介したメソッドとの違いは、第二引数には検索を開始するインデックス番号を指定していましたが、endsWith()では検索する文字列の長さを指定します。

例えば上記の同じサンプルに第二引数を指定し最初の6文字の末尾が指定した文字列でないかを検証してみます。検索する範囲は「なまむぎなま」までになります。

var paragraph = 'なまむぎなまごめなまたまご';
var search = 'なま';

console.log(paragraph.endsWith(search, 6));

//実行結果
true

実行結果は「true」です。文字列の末尾が指定した文字列に合致したため実行結果は「true」となります。

endsWith()では検索を開始するインデックス番号ではなく、検索する文字列の長さを指定する点に気を付けていただければと思います。

補足

本記事では日本語のサンプルを使っていますが、英文字の場合は大文字・小文字を区別して結果を返してくれます。
endsWidth()はECMAScript 2015からの実装になりますのですべてのブラウザをカバーしているわけではありませんので、使用する場合はご注意ください。

includes()

includes()は特定の文字列内に指定した文字列が含まれるかを検索するメソッドです。特定の文字列の中に指定した文字列が存在すれば「true」を、存在しなければ「false」を返します。

試しに簡単なサンプルを記述してみます。

var paragraph = 'なまむぎなまごめなまたまご';
var search = 'なま';

console.log(paragraph.includes(search));

//実行結果
true

実行結果は「true」です。「paragraph」の中に「search」で指定した文字列が存在するためです。

上記でご紹介したメソッドと同様に、includes()にも第二引数を指定することができます。第二引数には検索を開始するインデックス番号を指定します。

例として10文字目を指定して「またまご」から検索をかけてみます。

var paragraph = 'なまむぎなまごめなまたまご';
var search = 'なま';

console.log(paragraph.includes(search, 9);

//実行結果
false

実行結果は「false」です。文字列の中に指定した文字列が存在しないためです。

補足

本記事では日本語のサンプルを使っていますが、英文字の場合は大文字・小文字を区別して結果を返してくれます。
includes()はECMAScript 2015からの実装になりますのですべてのブラウザをカバーしているわけではありませんので、使用する場合はご注意ください。

まとめ

最後に本記事でご紹介したメソッドの特長をまとめます。

indexOf()	特定の文字列内から指定した文字列を前方から検索する返り値：true「インデックス番号」、false「-1」第二引数：検索を開始するインデックス番号
lastIndexOf()	特定の文字列内から指定した文字列を後方から検索する返り値：true「インデックス番号」、false「-1」第二引数：検索を開始するインデックス番号
startsWith()	特定の文字列が指定した文字列で始まるかを検索する返り値：boolean 第二引数：検索を開始するインデックス番号
endsWith()	特定の文字列が指定した文字列で終わるかを検索する返り値：boolean 第二引数：検索する文字列の長さ
includes()	特定の文字列内に指定した文字列が含まれるかを検索する返り値：boolean 第二引数：検索を開始するインデックス番号