JavaScript

JavaScriptで文字列を効果的に切り出す方法【正規表現】

javascriptで文字列を効果的に切り出そう

JavaScriptでの文字列操作は、データ処理やUI開発において欠かせないスキルです。
この記事では、基本的な文字列の切り出し方法から、少し変わったテクニックや便利な小ネタまで幅広くカバーします。具体的なサンプルコードを交えて、初心者から中級者の方向けに解説していきます

基本的な文字列切り出し方法

substringメソッド

substringメソッドは、文字列から指定された範囲の部分文字列を取り出すために使用します。

  • 第1引数 (startIndex): 切り出しを開始する位置。この文字から切り出しが始まります。
  • 第2引数 (endIndex): 切り出しを終了する位置。ここまでの文字が含まれます。
let str = "WEB制作小ネタ集";
let sub = str.substring(3, 9); 
console.log(sub);　// 出力結果："制作小ネタ集"

ちなみに、第２引数は省略可能です。
その場合は、文字列の最後まで切り出します。

let str = "WEB制作小ネタ集";
let sub = str.substring(3); 
console.log(sub);　// 出力結果："制作小ネタ集"

sliceメソッド

sliceメソッドは、substringメソッドに似ていますが、負の値を使って文字列の末尾から切り出すことができるという利点があります。

  • 第1引数 (beginSlice): 切り出しを開始する位置。負の値を指定すると、文字列の末尾からの位置となります。
  • 第2引数 (endSlice): 切り出しを終了する位置。このインデックスの直前までの文字が含まれます。省略すると文字列の末尾までが切り出されます。
let str = "WEB制作小ネタ集";
let slice = str.slice(-6, -1);
console.log(slice);
console.log(sub);　// 出力結果："制作小ネタ"
let str = "WEB制作小ネタ集";
let slice = str.slice(-6);
console.log(sub);　// 出力結果："制作小ネタ集"

正規表現を使った文字列の抽出

正規表現は、特定のパターンに一致する文字列を検索、置換、抽出する強力なツールです。
JavaScriptでは、正規表現が組み込みオブジェクトとしてサポートされておりStringオブジェクトのメソッドを通じて容易に利用できます。このセクションでは、正規表現の基本的な使い方から、より複雑なテキスト処理の例までを紹介します。

正規表現の基礎

  • リテラル文字: 直接的にマッチさせたい文字列を指定します。
  • メタ文字: 特殊な意味を持ち、様々な条件を指定するために使用されます（例：.、^、$、*、+、?、|、()、[]、{}）。
メタ文字説明
.任意の単一文字にマッチします。
^文字列の開始を示します。
$文字列の終了を示します。
*直前の要素の0回以上の繰り返しにマッチします。
+直前の要素の1回以上の繰り返しにマッチします。
? 直前の要素の0回または1回の出現にマッチします。
|選択肢を示し、左右のパターンのいずれか一方にマッチします。
()グループを作成し、抽出や後方参照に使用します。
[]文字クラスを定義し、任意の文字のセットから1文字にマッチします。
{}回数指定子。直前の要素の指定回数だけの繰り返しにマッチします。
\d任意の数字にマッチします。[0-9] と同等。
\w任意の英数字にマッチします。 [a-zA-Z0-9_] と同等。
\s任意の空白文字にマッチします（スペース、タブ、改行など）。
\b単語の境界にマッチします。
  • 文字クラス: 特文字クラスは、文字や数字の区別など、文字の種類を区別します。
メタ文字説明
[a-z]任意の小文字にマッチします。
[A-Z]任意の大文字にマッチします。
[0-9]任意の大文字にマッチします。
[a-zA-Z]任意の英字にマッチします。
  • フラグ: 正規表現の検索やマッチングの挙動をカスタマイズするために使用されます。
メタ文字説明
g (グローバル)文字列全体からすべてのマッチを見つけ出し、最初の一つだけでなく続けて検索します。
i (ケースインセンシティブ)大文字と小文字の区別をなくして検索します。
m (マルチライン)複数行のテキストにおいて、各行の始まりと終わりに ^ と $ がマッチするようにします。

簡単な例

文字列から数字を抽出する正規表現

文字列から数字を切り出すパターンです。

let text = "2023年の目標は1234本のブログ投稿を達成することです。";
let digits = text.match(/\d+/g);
console.log(digits); // 出力結果：2023, 1234

match() メソッドは、文字列に対して特定のパターンで検索を行い、そのパターンに一致する部分を見つけ出すメソッドです。
このメソッドは、パターンに一致するすべての部分を配列として返します。

/\d+/
  • \d は「任意の数字（0-9）」に一致する特殊な文字です。この表現は、単一の数字を意味します。
  • + は、直前の文字が1回以上繰り返される場合にマッチするという意味を持ちます。ここでは \d+ で「1つ以上連続する数字」にマッチします。
g（グローバル検索フラグ）
  • g フラグは「グローバル検索」を意味し、文字列全体を対象にしてパターンに一致するすべての部分を検索します。このフラグがない場合、match() メソッドは最初に見つかった1つのマッチだけを返して検索を終了します。

メールアドレスの検証

メールアドレスを切り出すパターン。
メールアドレスの正規表現は結構使用するので、検索すれば様々な正規表現がヒットすると思います。

let emails = "お問い合わせは1111@bbbb.comまたはcccc@dddd.comまで。";
let emailPattern = /\b[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let foundEmails = emails.match(emailPattern);
console.log(foundEmails); // 1111@bbbb.com, cccc@dddd.com
[a-zA-Z0-9._%+-]

小文字の a から z、大文字の A から Z、数字の 0 から 9、そしてドット .、アンダースコア _、パーセント %、プラス +、ハイフン - に一致します。これらはメールアドレスのユーザー名で許可される一般的な文字です。

まとめ

JavaScriptにおける文字列の切り出しと正規表現の活用は、データ処理やウェブ開発において非常に重要です。正規表現をマスターすることで、テキスト処理の効率が大幅に向上します。この記事が、JavaScriptでの文字列操作と正規表現の理解に役立つことを願っています。オンラインツールを活用して、より効果的な正規表現を作成し、実践的なスキルを身につけましょう。

-JavaScript
-, ,