JavaScriptのきほんを学ぼう

■第13話：文字列操作の応用

（最終更新日：2023.04.01）

「あるパターンの文字を置換したい」

前回に引き続き、今回も文字列操作を取り上げる。 今回は正規表現を利用した検索、置換とややむずかしい応用について説明する。 入力データの検証、データのクレンジングやフォーマット作成など、様々な場面で活用できる。 ぜひ、ここは理解しよう。

１. 文字列の切り取りと分割

JavaScriptでは、文字列を切り取るために、substring()メソッドやslice()メソッドを使用できる。 substring()メソッドは、指定された範囲の文字列を抽出する。 開始インデックスと終了インデックスを引数として渡すことができるが、終了インデックスは省略することもできる。 下記では、messageに指定された範囲（0番目から4番目まで）の文字列を抽出し、 変数extractedStringに格納している。抽出された文字列は'Hello'で、コンソールにはHelloが出力される。

slice()メソッドも、指定された範囲の文字列を抽出できる。 substring()メソッドと同様に、開始インデックスと終了インデックスを引数として渡すことができる。終了インデックスは省略可能だ。 slice()メソッドは負のインデックスをサポートしており、文字列の末尾から抽出することができる。 下記では後ろから6文字目～後ろから1文字目を抽出しているので、worldがコンソールに出力される。

JavaScriptでは、文字列を特定の文字で分割するために、split()メソッドを使用できる。 下記では、messageに格納された'Hello, World'という文字列を空白文字（スペース）で分割し、結果の配列を変数wordsArrayに格納する。 分割された文字列の配列が得られるため、コンソールには['Hello,', 'world!']が出力される。

２. 文字列の大文字・小文字変換

JavaScriptでは、文字列を大文字や小文字に変換するために、toUpperCase()メソッドとtoLowerCase()メソッドを使用できる。 下記では、messageに格納された'Hello, World'という文字列を大文字に変換し、変数uppercasedMessageに格納する。 大文字に変換された文字列は'HELLO, WORLD!'で、コンソールにはHELLO, WORLD!が出力される。

toLowerCase()メソッドは、文字列を小文字に変換する。 下記では、messageに格納された'Hello, World'という文字列を小文字に変換し、変数lowercasedMessageに格納する。 小文字に変換された文字列は'hello, world!'で、コンソールにはhello, world!が出力される。 これらのメソッドは、文字列の比較や検索など、大文字・小文字を無視したい場合に特に便利だ。 例えば、ユーザー入力を検証したり、データを自動で整えるのに使える。

３. 文字列のトリミング

JavaScriptでは、文字列の前後の空白（スペース、タブ、改行など）を削除するために、trim()メソッドを使用できる。 trim()メソッドは、文字列の先頭と末尾にある空白文字を削除する。 下記の例では、messageに格納された' Hello, world! 'という文字列の前後の空白を削除し、変数trimmedMessageに格納する。 トリミングされた文字列は'Hello, world!'で、コンソールにはHello, world!が出力される。

また、trimStart()とtrimEnd()メソッドを使用して、文字列の先頭だけの空白を削除したり、末尾だけの空白を削除することもできる。 trimStart()メソッドは、文字列の先頭にある空白文字を削除し、trimEnd()メソッドは、文字列の末尾にある空白文字を削除する。 これらのメソッドを使用することで、文字列の前後の空白を簡単に削除でき、ユーザー入力の検証やデータの整形に役立つ。

４. 正規表現を使った高度な検索と置換

正規表現は、文字列の検索や置換を行うためのパターンである。 正規表現を使用することで、単純な文字列の検索や置換だけでなく、複雑なパターンに基づいた検索や置換を効率的に行うことができる。 JavaScriptでは、正規表現を使って文字列内で特定のパターンを検索するために、RegExpオブジェクトを使用できる。 また、文字列のmatch()メソッドを使って、正規表現に一致する部分文字列を取得できる。 下記の例では、message内でregexに一致する部分文字列を検索し、変数matchesに格納している。 regexは大文字・小文字を無視してtheを検索するため、コンソールには['The', 'the']が出力される。

正規表現を使って、文字列内の特定のパターンに一致する部分を別の文字列に置換するには、文字列のreplace()メソッドを使用する。 このメソッドに正規表現と置換文字列を渡すことで、高度な置換を行うことができる。 下記では、message内でregexに一致する部分文字列（The）をreplacement（a）に置換し、変数replacedMessageに格納する。 regexは大文字・小文字を無視してtheを検索し、それをaに置換するため、コンソールにはa quick brown fox jumps over a lazy dog.が出力される。

５. まとめ

今回、JavaScriptの文字列操作の基本について説明した。 中でも正規表現を使った高度な検索と置換は、パターンに基づいた文字列操作に非常に便利だ。 例えば、入力データの検証、データのクレンジングやフォーマット変更など、さまざまなシナリオで使用できる。 また、正規表現を用いることで、以下のような高度な操作も可能だ。 「電話番号やメールアドレスのような特定の形式を検証する」「特定の単語やフレーズを含む文章を検索する」 「HTMLタグや特殊文字の除去やエスケープを行う」 正規表現を使った文字列操作は、習得することで多くの場面で強力なツールとなる。 ぜひここでマスターしよう。

▼参考図書、サイト

  String.prototype.trim()　　mdn web docs_
  【JavaScript】substring(), slice(), substr()の違い　　Motoki’s Brain
  正規表現にマッチした文字列を新しい文字列に置換する　　JavaDrive