【JavaScript】文字列から数字(数値)を抽出する方法を解説！

例えば、'abc123def456ghi789'のように文字の間に数字がある文字列において、数字(数値)のみを抽出したい場合があると思います。

この記事では『JavaScriptで文字列から数字(数値)を抽出する方法』について、

  • 文字列から「数字(数値)」を抽出する方法
    • 例: 'abc123def456ghi789'から'123456789'を抽出する
    • 例: 'abc123def456ghi789'から123456789を抽出する
  • 文字列から「数字パターン」を抽出する方法
    • 文字列から「すべての数字の連続パターン」を「数字の配列」で抽出する方法
      • 例: 'abc123def456ghi789'から['123', '456', '789']を抽出する
    • 文字列から「すべての数字の連続パターン」を「数値の配列」で抽出する方法
      • 例: 'abc123def456ghi789'から[123, 456, 789]を抽出する
    • 文字列から「最初の数字の連続パターン」を「数値」で抽出する方法
      • 例: 'abc123def456ghi789'から123を抽出する
  • 文字列から「個々の数字」を抽出する方法
    • 文字列から「個々の数字」を「数字の配列」で抽出する方法
      • 例: 'abc123def456ghi789'から['1', '2', '3', '4', '5', '6', '7', '8', '9']を抽出する
    • 文字列から「個々の数字」を「数値の配列」で抽出する方法
      • 例: 'abc123def456ghi789'から[1, 2, 3, 4, 5, 6, 7, 8, 9]を抽出する

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

文字列から「数字(数値)」を抽出する方法

replaceメソッドを使うと、文字列から数字だけを抽出することができます。以下にサンプルコードを示します。

const str = 'abc123def456ghi789';
const numbersOnly = str.replace(/\D/g, ''); // \D は数字以外の文字を表す
console.log(numbersOnly); // '123456789' // 文字列から数字を抽出している

'abc123def456ghi789'から'123456789'を抽出することができました。

上記のサンプルコードにおいて、\Dは数字以外の文字を意味する正規表現パターン、gは文字列内のすべてのパターンを検索するという意味です。そのため、replace(/\D/g, '')を実行すると、数字以外の文字を""(空文字)に置換し、連続した数字だけを抽出することができます。

正規表現の詳細

  • /：正規表現リテラルの開始と終了を示す区切り文字。
  • \D：数字以外の文字を意味する正規表現パターン。
  • g：グローバルフラグ。このフラグが付くと、文字列内のすべてのパターンを検索します。

スラッシュ/で囲まれている部分が正規表現のパターンを表し、閉じスラッシュの後にオプションでフラグを指定することができます。

また、/\D/gと[^0-9]/g はどちらも同じ意味を持つため、同じ処理を[^0-9]/gでも行うことができます。[^0-9]は0から9までの数字以外の文字を意味する正規表現パターンです。以下にサンプルコードを示します。

const str = 'abc123def456ghi789';
const numbersOnly = str.replace(/[^0-9]/g, ''); // \D は数字以外の文字を表す
console.log(numbersOnly); // '123456789'

なお、抽出した数字はString型です。Number型に変換する場合は、parseInt関数を用います。

const str = 'abc123def456ghi789';
const numbersOnly = str.replace(/[^0-9]/g, ''); // \D は数字以外の文字を表す
const numberValue = parseInt(numbersOnly); // Number型に変換
console.log(numberValue); // 123456789

'abc123def456ghi789'から123456789を抽出することができました。

文字列から「数字パターン」を抽出する方法

文字列から「すべての数字の連続パターン」を「数字の配列」で抽出する方法

match メソッドを使うと、文字列からすべての数字の連続パターンを配列で抽出することができます。以下にサンプルコードを示します。

const str = 'abc123def456ghi789';
const numbers = str.match(/\d+/g); // \d は数字を表し、+ は一つ以上の連続した数字を表す
console.log(numbers); // ['123', '456', '789']

'abc123def456ghi789'から['123', '456', '789'](数字の配列)を抽出することができました。

文字列から「すべての数字の連続パターン」を「数値の配列」で抽出する方法

先ほど示した方法では、抽出された数字は文字列として返されます。数値として扱いたい場合はmapメソッドを使用してNumber型に変換します。

const str = 'abc123def456ghi789';
const numbers = str.match(/\d+/g).map(Number); // mapメソッドを使用してNumber型に変換
console.log(numbers); // [123, 456, 789]

'abc123def456ghi789'から[123, 456, 789](数値の配列)を抽出することができました。

文字列から「最初の数字の連続パターン」を「数値」で抽出する方法

文字列に含まれる最初の数字だけを抽出したい場合もmatch メソッドを使います。以下にサンプルコードを示します。

const str = 'abc123def456ghi789';
const firstNumber = str.match(/\d+/); // 最初の一致を取得
console.log(firstNumber ? Number(firstNumber[0]) : null); // 123

上記のサンプルコードにおいて、数字が存在しない場合にはnullを返しています。

'abc123def456ghi789'から123(最初の数字の連続パターン)を抽出することができました。

文字列から「個々の数字」を抽出する方法

文字列から「個々の数字」を「数字の配列」で抽出する方法

文字列から個々の数字の連続パターンを配列で抽出したい場合は、以下のようにします。

const str = 'abc123def456ghi789';
const digits = str.match(/\d/g); // \dは単一の数字を表し、gフラグは文字列内のすべてのパターンを検索する
console.log(digits); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

'abc123def456ghi789'から['1', '2', '3', '4', '5', '6', '7', '8', '9'](個々の数字の配列)を抽出することができました。

文字列から「個々の数字」を「数値の配列」で抽出する方法

先ほど示した方法では、抽出された数字は文字列として返されます。数値として扱いたい場合はmapメソッドを使用してNumber型に変換します。以下にサンプルコードを示します。

const str = 'abc123def456ghi789';
const digits = str.match(/\d/g); // \dは単一の数字を表し、gフラグは文字列内のすべてのパターンを検索する
const digitNumbers = digits.map(Number); // 各文字列を数値に変換
console.log(digitNumbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

'abc123def456ghi789'から[1, 2, 3, 4, 5, 6, 7, 8, 9](個々の数値の配列)を抽出することができました。

本記事のまとめ

この記事では『JavaScriptで文字列から数字(数値)を抽出する方法』について、以下の内容を説明しました。

  • 文字列から「数字(数値)」を抽出する方法
    • 例: 'abc123def456ghi789'から'123456789'を抽出する
    • 例: 'abc123def456ghi789'から123456789を抽出する
  • 文字列から「数字パターン」を抽出する方法
    • 文字列から「すべての数字の連続パターン」を「数字の配列」で抽出する方法
      • 例: 'abc123def456ghi789'から['123', '456', '789']を抽出する
    • 文字列から「すべての数字の連続パターン」を「数値の配列」で抽出する方法
      • 例: 'abc123def456ghi789'から[123, 456, 789]を抽出する
    • 文字列から「最初の数字の連続パターン」を「数値」で抽出する方法
      • 例: 'abc123def456ghi789'から123を抽出する
  • 文字列から「個々の数字」を抽出する方法
    • 文字列から「個々の数字」を「数字の配列」で抽出する方法
      • 例: 'abc123def456ghi789'から['1', '2', '3', '4', '5', '6', '7', '8', '9']を抽出する
    • 文字列から「個々の数字」を「数値の配列」で抽出する方法
      • 例: 'abc123def456ghi789'から[1, 2, 3, 4, 5, 6, 7, 8, 9]を抽出する

お読み頂きありがとうございました。