JavaScriptで正規表現を扱って見よう！置換や検索を効率よく実装する方法

今回はJavaScriptで正規表現を扱う方法について学んで行きましょう。

プログラミンを勉強していく中で一度は耳にしたことがあると思います。

ただ正規表現は、いろんな文字が不規則に並んでいるように見えてなんだかとっつきにくいイメージがありませんか？

正規表現はどの文字がどの役割を表すのかが明確なので、覚えてしまえば簡単です！

ではさっそく正規表現の書き方について見ていきましょう。

正規表現とは？
1. 活用事例
正規表現の書き方
1. メタ文字の表現一覧
2. 特定の文字が含まれる行を選択
JavaScriptで正規表現を扱う方法
1. matchメソッドを使った文字列の一致を確認
まとめ
1. おすすめの参考書
SAMURAI TERAKOYA

正規表現とは？

英語表記
文字列のパターンを表現する表記方法
文字列の検索やパターンを表現する

下記は、MDN web docsにある正規表現の説明です。

正規表現とは、文字列内で文字の組み合わせを照合するために用いられるパターンです。 JavaScript では、正規表現はオブジェクトでもあります。これらのパターンは RegExp の exec() および test() メソッドや、String の match()、 matchAll、replace、search、split メソッドで使用できます。本章では、 JavaScript の正規表現について説明します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

正規表現 - JavaScript | MDN

正規表現とは、文字列内で文字の組み合わせを照合するために用いられるパターンです。 JavaScript では、正規表現はオブジェクトでもあります。これらのパターンは RegExp の exec() および test() メソッドや、String の match()、matchAll()、replace()、repl...

活用事例

入力のパターンが正しいのか（電話番号など）
入力された文字列が正しいパターンであるかの判定

JavaScript replaceを使って文字列を置換する！joinとsplitを使用した置換方法も紹介

上記の記事では、正規表現を使った文字列の置換について紹介をしています。

正規表現の書き方

正規表現は文字列とメタ文字を組み合わせて書く必要があります。

文字列

マッチする文字列そのものを直接設定

メタ文字

特別な意味を持った記号で文字列を表現するために利用する

メタ文字の表現一覧

正規表現	パターンにマッチする文字
[abc]	[]内の文字
[a-z]	アルファベットの１文字
[0-9]	数字の１文字
[a-z0-9]	アルファベットと数字の１文字
[^abc]	[]に含まれない文字
.	任意の１文字
\t	タブ
\r	改行
\d	数値
\D	すべての数字以外の文字
\w	アルファベット、アンダーバー、数字
^	行頭
$	行末
{5}	{直前の表現にマッチする}
{5,}	5回以上の繰り返し
{5,10}	5～10回までの繰り返し
?	０または１回の繰り返し
*	０回以上の繰り返し
+	１回以上の繰り返し

特定の文字が含まれる行を選択

^.*テスト.*$
^.*\\tテスト\\t.*$
^.*\\t?テスト\\t.*$　最初にマッチした場合

メールアドレスを表す正規表現

^[a-zA-Z0-9_.+-]+@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\\.)+[a-zA-Z]{2,}$

JavaScriptで正規表現を扱う方法

matchメソッドを使った文字列の一致を確認

Stringオブジェクトのマッチメソッド等を用いることで扱うことが可能です。

matchメソッドは結果を返してくれるので、変数へ格納し結果を出力することができます。

どの文字列にもマッチしない場合は、「null」が返却されます。

const text = 'Hello World'
var result = text.match(/Hello/);
console.log(result)

出力結果

[
	'World',　// 結果
	index: 6, // マッチした場所
	input: 'Hello World' // 入力内容
]

出力結果は、「結果、マッチした場所、入力内容」のように出力されます。

また、matchメソッドはフラグを設定することができます。

フラグ一覧と使い方

フラグ	内容
i（ignore case）	大文字小文字の違いを無視する
g（global）	マッチした要素すべてを配列で返す

ignore caseを使った記述例

const text = 'Hello World'

var result = text.match(/hello/i);
console.log(result)

// 出力結果
['Hello', index: 0, input: 'Hello World', groups: undefined]

globalを使った記述例

const text = 'Hello WorldHello WorldHello WorldHello WorldHello WorldHello World'

var result = text.match(/Hello/g);
console.log(result)

// 出力結果
['Hello', 'Hello', 'Hello', 'Hello', 'Hello', 'Hello']

郵便番号を表す正義表現

^[0-9]{3}-[0-9]{4}$

例：郵便番号入力フォームで整合性のチェック

<h1>正規表現をためそう</h1>
<p>郵便番号を入力してください</p>

<form action="" method="post">
  <input type="text" id="text_box">
  <button>送信</button>
</form>

var textBox = document.getElementById('text_box'); 

textBox.addEventListener('keyup', function(e) {
  var text = textBox.value;
  var reg = /^\\d{3}-\\d{4}$/;
  if (reg.test(text)) {
    textBox.style.backgroundColor = '#fff';  // 郵便番号の形式の場合、背景を白
  } else {
    textBox.style.backgroundColor = '#f00';　// 郵便番号の形式ではない場合、背景を赤
  }
});

HTML タグ内の文字だけを取得する場合

HTMLのタグを正規表現で表すことで、タグに囲まれた文字を取得することができます。

const text2 = '<p>Hello World</p>';
result = text2.match(/<p>(.*)<\\/p>/);　// pタグを表す正規表現

console.log(result)
console.log(RegExp.$1)

出力結果

// console.log(result)
[
  '<p>Hello World</p>',
  'Hello World',
  (index: 0),
  (input: '<p>Hello World</p>'),
  (groups: undefined),
]
// console.log(RegExp.$1)
Hello World

まとめ

今回は正規表現について学習しました。

正規表現は文字列のパターンを表現する表記方法で、文字列の検索やパターンを表現するときに使用されます。

正規表現を使うことによって、郵便番号やメールアドレスの整合性をチェックし入力フォームのチェックを行うことができます。

正規表現は一見難しいように見えますが、どの文字がどの役割を持っているのかが明確になっているため苦手意識を捨ててゆっくり見ていきましょう！

SAMURAI TERAKOYA

SAMURAI TERAKOYAの特徴とメリット

40種類以上の教材で、プログラミングスキル習得に必要な基礎から実戦までのすべてを学習できる
つまづいたらいつでも相談できる「Q&A掲示板」があり現役エンジニアが学習のサポートをしてくれる
SAMURAI ENGINEER Plus+にいる人達と一緒に学習をすることができる ←継続するにはかなりいい環境ですね！
単体レッスンも実施してくれるので、言語化できない悩みも相談することができる
月額のサブスクになっているので、利用しやすい！

注意点とデメリット

プログラミングスクールによくある就職できなかったらといったサポートが無い
講義形式ではないので、自発的に行動しないといけない

SAMURAI TERAKOYAがおすすめの人

月々定額で挫折せずプログラミングを学びたい人
エラーなどの悩みを相談できる環境が欲しい人
オンラインで学べるので地方やスクールに通う時間がない人

\ 今なら学び応援キャンペーンも実施中 /

お申し込みはこちらから