JavaScriptで文字列を検索する方法を現役エンジニアが解説【初心者向け】

JavaScriptで文字列を検索する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• 文字列検索に利用できるメソッド
• indexOf()メソッドの使い方
• match()メソッドの使い方
• 実際に書いてみよう
• まとめ

 

文字列検索に利用できるメソッド

JavaScript で文字列検索に利用できるメソッドには、 indexOf() や match() などがあります。

 

[PR] コーディングで副業する方法とは

indexOf()メソッドの使い方

indexOf() メソッドの使い方は以下のように記述しましょう。

文字列.indexOf(検索文字列)

結果は「検索文字列が最初に現れた位置」が返り、位置は0から始まることに注意しましょう。

検索文字列が含まれていない場合は-1が返ります。

 

match()メソッドの使い方

match() メソッドの使い方は以下のとおりです。

文字列.match(/検索パターン/オプション)

「マッチした結果」が返ります。

match() メソッドは正規表現という表記方法で検索する文字列をパターンとして定義します。

オプションには以下のような値を指定しましょう。

• g：グローバルサーチ、マッチした結果を全て返す。
• i：大文字と小文字を区別せずに検索。
• u：ユニコード対応で、日本語を使用する場合は必須のオプション。

 

 

実際に書いてみよう

今回のサンプルプログラムでは indexOf() メソッドと match() メソッドの使い方について確認します。

実行はChromeブラウザーのデベロッパーツールで行いましょう。

はじめに文字列を定義します。

const str = "四則演算には足し算と引き算、掛け算と割り算があります。";

 

次にindexOf() メソッドの使い方を確認しましょう。

const val1 = str.indexOf('商');
console.log(val1);

const val2 = str.indexOf('算');
console.log(val2);

実行結果は以下のとおりです。

 

「商」は str に含まれないため -1 が返り、「算」はstrに含まれることから3 が結果として返ります。

-1
3

では、match() メソッドの使い方を確認しましょう。

const val3 = str.match(/算/u);
console.log(val3[0]);

実行結果は以下のとおりです。

条件に合致した最所の文字が返ります。

算

match() メソッドの本領は正規表現が利用できる点です。

const val4 = str.match(/.[あ-ん]算/gu);
console.log(val4);

「/.[あ-ん]算/」の部分が正規表現です。

「.」は任意の1文字を表し、「[あ-ん]」は任意のひらがな1文字を表します。

 

上記のソースコードを実行してみましょう。

実行結果は以下のようになります。

match() メソッドは複雑な検索を簡単に行うことが可能です。

Array(4)
  0: "足し算"
  1: "引き算"
  2: "掛け算"
  3: "割り算"

 

まとめ

今回の記事では JavaScript で文字列を検索する方法を学習しました。

indexOf() メソッドと match() メソッドの使い方を理解し、使い分けていきましょう。

 

執筆してくれたメンター

太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア。 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。 守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。 仕事のほとんどをリモートオフィスで行う。 通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。