正規表現を使ってみる

正規表現の基本的な使い方を勉強したので、少しまとめてみたいと思います。

基本

今回は正規表現 + replace()を使って色々と試してみます。
正規表現を使用する場合、文字列を「’」や「"」で囲むのと同じように、「/」で囲んで記述します。

str.replace(/a/, 'z');

 

先頭にマッチする

「^」は値の先頭にマッチします。

HTML

<p id="before">and a</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/^a/, 'ω'); // ωnd a

document.getElementById('after').innerHTML = afterText;

値の先頭の「a」を「ω」に置き換えました。
^のデモページ
 

末尾にマッチする

「$」は値の末尾にマッチします。

HTML

<p id="before">and a</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/a$/, 'ω'); // and ω

document.getElementById('after').innerHTML = afterText;

値の末尾の「a」を「ω」に置き換えました。
$のデモページ
 

何らかの1文字にマッチする

「.」は改行文字以外のどの1文字にもマッチします。

HTML

<p id="before">nay, an apple is on the tree</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/.n/g, 'ω'); // nay, ω apple is ω the tree

document.getElementById('after').innerHTML = afterText;

何らかの1文字 + 「n」を「ω」に置き換えました。
同じ値内で複数回マッチしたい場合は、「/」の後に「g」を付けます。
.のデモページ
 

直前の文字の1回以上の繰り返しにマッチする

「+」は直前の文字の1回以上の繰り返しにマッチします。

HTML

<p id="before">candy caaaaaaandy</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/a+/g, 'ω'); // cωndy cωndy

document.getElementById('after').innerHTML = afterText;

1文字以上の「a」を「ω」に置き換えました。
+のデモページ
 

直前の文字の0回以上の繰り返しにマッチする

「*」は直前の文字の0回以上の繰り返しにマッチします。

HTML

<p id="before">nay, an apple is on the tree</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/a*n/g, 'ω'); // ωay, ω apple is oω the tree

document.getElementById('after').innerHTML = afterText;

0文字以上の「a」 + 「n」を「ω」に置き換えました。
*のデモページ
 

直前の文字のn回の繰り返しにマッチする

「{n}」は直前の文字がちょうどn回出現するものにマッチします。
nには正の整数が入ります。

HTML

<p id="before">candy caandy caaaaaaandy</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/a{2}/g, 'ω'); // candy cωndy cωωωandy

document.getElementById('after').innerHTML = afterText;

2個並んでいる「a」を「ω」に置き換えました。
{n}のデモページ
 

直前の文字のn回以上m回以下の繰り返しにマッチする

「{n,m}」は直前の文字が少なくともn回、多くてもm回出現するものにマッチします。
n,mには正の整数が入り、省略可能です。

HTML

<p id="before">candy caandy caaaaaaandy</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/a{2,3}/g, 'ω'); // candy cωndy cωωandy

document.getElementById('after').innerHTML = afterText;

{n,m}のデモページ
 

最大数を省略してみます。

HTML

<p id="before">candy caandy caaaaaaandy</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/a{2,}/g, 'ω'); // candy cωndy cωndy

document.getElementById('after').innerHTML = afterText;

{n,m}のデモページ2
 

直前の文字の0回か1回の繰り返しにマッチする

「?」は直前の文字の0回か1回の出現にマッチします。({0,1} と同じです)
例えば /e?le?/ は “angel” の ‘el’ や “angle” の ‘le’、あるいは “oslo” の ‘l’ にマッチします。

HTML

<p id="before">candy caandy caaaaaaandy</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/ca?/g, 'ω'); // ωndy ωandy ωaaaaaandy

document.getElementById('after').innerHTML = afterText;

?のデモページ
 

文字集合のいずれかにマッチする

「[xyz]」は囲まれた文字のいずれかにマッチします。
「-」を用いて文字の範囲を指定することも可能です。

HTML

<p id="before">I'm Tom.</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/[a-z.]/g, 'ω'); // I'ω Tωωω

document.getElementById('after').innerHTML = afterText;

[xyz]のデモページ
 

文字集合のいずれでもないものマッチする

「[^xyz]」は囲まれていないものにマッチします。

HTML

<p id="before">I'm Tom.</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/[^a-z.]/g, 'ω'); // ωωmωωom.

document.getElementById('after').innerHTML = afterText;

[^xyz]のデモページ
 

グループ化

「(x)」は囲んでいる部分をグループ化します。

HTML

<p id="before">candy caandy caaaaaaandy</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/(ca)+/g, 'ω'); // ωndy ωandy ωaaaaaandy

document.getElementById('after').innerHTML = afterText;

(x)のデモページ
 

xにyが続く場合にマッチする

「x(?=y)」はxにyが続く場合のみxにマッチします。

HTML

<p id="before">candy caandy caaaaaaandy</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/a(?=n)/g, 'ω'); // cωndy caωndy caaaaaaωndy

document.getElementById('after').innerHTML = afterText;

x(?=y)のデモページ
 

xにyが続かない場合にマッチする

「x(?!y)」はxにyが続かない場合のみxにマッチします。

HTML

<p id="before">candy caandy caaaaaaandy</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/a(?!n)/g, 'ω'); // candy cωandy cωωωωωωandy

document.getElementById('after').innerHTML = afterText;

x(?!y)のデモページ
 

xまたはyにマッチする

「x|y」はxまたはyにマッチします。

HTML

<p id="before">candy caandy caaaaaaandy</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/ca|an/g, 'ω'); // ωndy ωωdy ωaaaaaωdy

document.getElementById('after').innerHTML = afterText;

x|yのデモページ
 

空白や改行、タブにマッチする

「\s」「\n」「\t」の場合、それぞれ空白と改行とタブにマッチします。
「\S」の場合は空白以外にマッチします。
「*」や「+」などの特殊文字を通常の文字列として扱いたい場合、「\*」や「\+」のようにします。

HTML

<p id="before">7 * 7 = 49</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/\s|\*/g, 'ω'); // 7ωωω7ω=ω49

document.getElementById('after').innerHTML = afterText;

\のデモページ
 

数字にマッチする

「\d」は[0-9] と同じで、数字にマッチします。
「\D」は逆に数字以外にマッチします。

HTML

<p id="before">abc123あいう_def456えおか_ghi789きくけ</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/\d/g, 'ω'); // abcωωωあいう_defωωωえおか_ghiωωωきくけ

document.getElementById('after').innerHTML = afterText;

\dのデモページ
 

英数字と_にマッチする

「\w」は[A-Za-z0-9_] と同じで、アンダースコアを含むどの英数字にもマッチします。
「\W」はその逆です。

HTML

<p id="before">abc123あいう_def456えおか_ghi789きくけ</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/\w/g, 'ω'); // ωωωωωωあいうωωωωωωωえおかωωωωωωωきくけ

document.getElementById('after').innerHTML = afterText;

\wのデモページ
 

英字の大文字と小文字の区別をなくす

後ろの「/」の後に「i」を付けると、半角英字の大文字と小文字を区別しなくなります。

HTML

<p id="before">APPLE is apple</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/apple/ig, 'ω'); // ω is ω

document.getElementById('after').innerHTML = afterText;

iのデモページ
 

置き換え

置き換え前の文字列を「()」で囲んでグループ化して、置き換え後の文字列に$1を使うことで、置き換え前の文字列を参照できます。

HTML

<p id="before">200円 400円 600円</p>
<p id="after"></p>

JavaScript

var beforeText = document.getElementById('before').innerHTML;
var afterText = beforeText.replace(/(\d+)円/g, '\\$1'); // \200 \400 \600

document.getElementById('after').innerHTML = afterText;

$1のデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

コメントが承認されるまで時間がかかります。

2021年4月
 123
45678910
11121314151617
18192021222324
252627282930