正規表現の基本的な使い方を勉強したので、少しまとめてみたいと思います。
基本
今回は正規表現 + 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;
最大数を省略してみます。
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;
直前の文字の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]」は囲まれていないものにマッチします。
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;
グループ化
「(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に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にマッチします。
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にマッチします。
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;
空白や改行、タブにマッチする
「\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;
英数字と_にマッチする
「\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;
英字の大文字と小文字の区別をなくす
後ろの「/」の後に「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;
置き換え
置き換え前の文字列を「()」で囲んでグループ化して、置き換え後の文字列に$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;
【参考サイト】
コメントが承認されるまで時間がかかります。