こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptの文字列の抽出の仕方について説明します。プログラムにおいて文字列を格納したデータなどを扱う際に、指定した箇所に書かれている文字を抽出したり、その文字内容によって実行処理を変更したりする場面があります。しかし、文字列の操作には正規表現が絡んだり、他の言語とのやり方が異なり、使いこなすのは難しいですよね。
JavaScriptの文字列の抽出の仕方について、メソッドの使い方や基本構文に加えて、実際のプログラム使用例まで説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！
目次
そもそも正規表現とは？
正規表現とは、文字列内において決まったパターンを調査したいときに、「この型があったら」と指定するために用いられるメソッドです。商品番号や郵便番号、個々に振られるデータなどを一括で取り出したいときに、とても有効的です。
正規表現には、2種類の書き方があり、” / “（スラッシュ）で囲む正規表現リテラルと、RegExpオブジェクトのコンストラクタ関数を使用する方法です。詳しくは、以下の記事で述べられています。
参考 JavaScriptの正規表現とは？一から分かりやすく説明しますウェブカツ ブログここからは、よく使われる正規表現の例について見てみましょう。
ここでは、使用頻度の高い4つについて取り上げます。
| 文字 | 意味 |
| [123] | 1,2,3のどれかが一致 |
| /^A/ | 行の先頭が ” A ” から始まる場合に一致 |
| /A*/ | ” A “や” AA “など直前の文字を0回以上繰り返す場合に一致 |
| {n} | 直前の文字がn回あった場合に一致 |
ここで示したのは正規表現の中でも一例で、他にもたくさん条件を分類できる書き方があります。また、これらを組み合わせることで、より詳細な検索を行うこともできます。例えば、上の例を組み合わせて、“[0-9]{3}”とすると、「0から9の数字が3回出現したら」という条件になり、「3桁の数字があったら」と同じ条件を作ることができます！
JavaScriptで文字列を抽出するためのメソッド
正規表現について、簡単におさらいしたところで、JavaScriptで文字列を抽出するメソッドについて詳しく見ていきましょう！ここでは、用途別に3つのメソッドの紹介をします。基本構文を説明した後に、実際の使用例についても解説するので、ぜひこの際に文字列の抽出についてマスターしちゃいましょう！
substringメソッド
substringメソッドは、決まった範囲から文字を抽出するのに適したメソッドです。「先頭3文字を抽出したい」ときや、「5～8文字目だけを抽出したい」ときにとても有用性が高いです。それでは、基本構文から見てみましょう。
基本構文
|
1 |
調査対象の文字列.substring(開始位置, 終了位置); |
substringメソッドは、このように使います。調査したい文字列が格納されている変数に対してsubstringととり、その直後の小括弧内にて抽出したい文字の開始位置と終了位置の場所を指定します。
注意点として、JavaScriptを始めとしたいくつかのプログラミング言語では、最初の文字を0文字目とすることに注意してください。また、substringメソッドは、終了位置の省略が可能で、終了位置を指定しなかった場合は、開始位置から最後まで抽出します。では、実際のプログラム例を見てみましょう！
実践プログラム例
|
1 2 3 4 5 6 7 8 |
// 文字列を定義 var str = 'DogCatMouse'; // substringメソッドを使用 var result = str.substring(3,6); // 結果を表示 console.log(result); // 'Cat'と表示される |
ここでは、2行目で定義した文字列から、指定した範囲内の文字を抽出しました。5行目でsubstringメソッドを使用しており、ここでは変数strに格納されている文字列の3文字目（0から数えて）から6文字目までを抽出するように指定しました。なお、終了位置の文字の手前までを抽出する点に注意してください。
8行目で結果を表示し、ここでは’Cat’と表示されます。なお、6文字目の’M’は含まれてないことを確認してください！
matchメソッド
続いて、matchメソッドについて取り上げます。matchメソッドは、正規表現などを用いて、決まったパターンをした文字を抽出したいときに適しています。文字列の中から、郵便番号や電話番号などのパターンが決まっている文字列を抽出するときには、matchメソッドを使いましょう！
基本構文
|
1 |
調査対象の文字列.match(抽出したい文字の正規表現); |
matchメソッドは、このように使います。調査したい文字列が格納されている変数に対してmatchととり、その直後の小括弧内にて抽出したい文字のパターンを正規表現によって指定します。では、実際に正規表現を用いて文字を抽出する例を見てみましょう。
実践プログラム例
|
1 2 3 4 5 6 7 8 |
// 文字列を定義 var str = 'Taro080-1234-5678Tokyo'; // matchにて、電話番号を抽出 var result = str.match(/^[0-9]{3}-[0-9]{4}-[0-9]{4}$/); // 抽出結果を表示 console.log(result); // '080-1234-5678'と表示される |
文字列が格納された変数strより、5行目でmatchメソッドを使用して電話番号の形式「〇〇〇-〇〇〇〇-〇〇〇〇」に沿ったデータのみを抽出するプログラムです。5行目のmatch内の正規表現にて、「正規表現」の章で説明した、「n桁の数字」を用いて、電話番号を抽出しています。このように、正規表現を用いることで、簡単に指定した情報のみを取り出すことができます。
splitメソッド
最後にsplitメソッドについて説明します。splitメソッドは、あらかじめある文字によってデータが分けられている文字列などから、文字を抽出したい際に適したメソッドです。実際に例を見てみましょう。
基本構文
|
1 |
調査対象の文字列.split(区切りに用いる文字); |
splitメソッドは、このように使います。調査したい文字列が格納されている変数に対してsplitととり、その直後の小括弧内にて区切りに使用したい文字を指定します。splitメソッドについても、正規表現を組み合わせることで汎用性が広がります。実際のプログラム例を見てみましょう。
実践プログラム例
|
1 2 3 4 5 6 7 8 9 10 11 |
// 文字列を定義 var str = 'Taro:080-1234-5678:Tokyo'; // splitにて、名前・電話番号・所在をそれぞれ抽出 var result = str.split(':'); // 抽出結果を表示 console.log(result); // ["Taro", "080-1234-5678", "Tokyo"]と表示される console.log(result[0]); // "Taro"と表示される console.log(result[1]); // "080-1234-5678"と表示される console.log(result[2]); // "Tokyo"と表示される |
ここでは、コロン「：」によって文字列を分割し、名前や電話番号、所在地を抽出するプログラムを書きました。5行目でsplitメソッドを用い、ここでは文字列 ” : ” を指定して文字を分割し、変数resultに格納しています。そのため、8行目では分割された結果が表示されており、9行目以降は分割した順に格納されているデータの順番を指定して、所望の文字のみ抽出することができています。
まとめ
いかがでしたでしょうか？今回は、JavaScriptの文字列の抽出の仕方について説明しました。
JavaScriptには上記で紹介したメソッド以外にも、少し特徴の違うメソッドなども用意されており、組み合わせることで、処理速度や作製にかかる時間が短縮されます。ぜひ、JavaScriptの文字列の抽出の仕方について理解し、Webサービス作成やシステム構築に活かしてください。
