hakeの日記

Windows環境でプログラミングの勉強をしています。

javascript 正規表現

文字列が正規表現とマッチするかの判断には、RegExp.test()を使用し、置換はString.replace()を使用する。


正規表現とマッチした文字列の取得は、String.match()かRegExp.exec()を使用する。正規表現にgオプションを使用していない場合、両者とも最初にマッチした文字列を返す。正規表現にgオプションを使用している場合は、String.match()はマッチした文字列の配列を返す。RegExp.exec()は実行する毎にマッチした文字列を返し、マッチしなくなった場合nullを返す。
正規表現にキャプチャの記述がある場合には、String.match(/re/g)以外は返った配列の2番目以降にキャプチャされた文字列が入る。

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>正規表現テスト</title>
<script type="text/javascript">

	function print(str){
		var s = str + '<br>';
		document.getElementById('result').innerHTML += s;
	}

	window.onload = function(){
		var src = 'ababcabcd';
		var re  = /a[^a]+/;
		var rec  = /a([^a]+)/;  // キャプチャー有
		var reg = /a[^a]+/g;
		var recg = /a([^a]+)/g;  // キャプチャー有
		var result;

		print('src : ababcabcd');
		print('re  : a[^a]+');
		print('rec : a([^a]+)');


		print('');
		print('- test -');
		// test
		result = re.test(src);
		print('/re/.test(src) -> ' + result);


		print('');
		print('- exec -');
		// exec
		result = re.exec(src);
		print('/re/.exec(src)  -> ' + result);

		result = reg.exec(src);   // resultには最初にマッチした文字列が返る。
		print('/re/g.exec(src) 1st -> ' + result);
		result = reg.exec(src);   // resultには2番目にマッチした文字列が返る。
		print('/re/g.exec(src) 2nd -> ' + result);
		result = reg.exec(src);   // resultには3番目にマッチした文字列が返る。
		print('/re/g.exec(src) 3rd -> ' + result);
		result = reg.exec(src);   // マッチする文字列が無いのでnullが返る。
		print('/re/g.exec(src) 4th -> ' + result);

		print('');
		print(' キャプチャ有');
		result = rec.exec(src);// resultにはマッチした文字列とキャプチャ文字列の配列が返る。
		print('/rec/.exec(src)  -> ' + result);

		result = recg.exec(src);   // resultには最初にマッチした文字列とキャプチャ文字列の配列が返る。
		print('/rec/g.exec(src) 1st -> ' + result);
		result = recg.exec(src);   // resultには2番目にマッチした文字列とキャプチャ文字列の配列が返る。
		print('/rec/g.exec(src) 2nd -> ' + result);
		result = recg.exec(src);   // resultには3番目にマッチした文字列とキャプチャ文字列の配列が返る。
		print('/rec/g.exec(src) 3rd -> ' + result);
		result = recg.exec(src);   // マッチする文字列が無いのでnullが返る。
		print('/rec/g.exec(src) 4th -> ' + result);


		print('');
		print('- match -');
		// match
		result = src.match(re);// resultにはマッチした文字列が入る。
		print('src.match(/re/)  -> ' + result);
		result = src.match(reg);  // resultにはマッチした文字列の配列が返る。
		print('src.match(/re/g) -> ' + result);

		print('');
		print(' キャプチャ有');
		result = src.match(rec); // resultにはマッチした文字列とキャプチャ文字列の配列が返る。
		print('src.match(/rec/)  -> ' + result);
		result = src.match(recg);  // resultにはマッチした文字列の配列が返る。
		print('src.match(/rec/g) -> ' + result);


		print('');
		print('- replace -');
		// replace
		print('src.replace(/re/,"0")  -> ' + src.replace(re, '0'));
		print('src.replace(/re/g,"0") -> ' + src.replace(reg, '0'));

	}

</script>
</head>
<body>
結果<br>
<div id='result'></div>
</body>
</html>

結果

結果

src : ababcabcd
re : a[^a]+
rec : a([^a]+)

- test -
/re/.test(src) -> true

- exec -
/re/.exec(src) -> ab
/re/g.exec(src) 1st -> ab
/re/g.exec(src) 2nd -> abc
/re/g.exec(src) 3rd -> abcd
/re/g.exec(src) 4th -> null

 キャプチャ有
/rec/.exec(src) -> ab,b
/rec/g.exec(src) 1st -> ab,b
/rec/g.exec(src) 2nd -> abc,bc
/rec/g.exec(src) 3rd -> abcd,bcd
/rec/g.exec(src) 4th -> null

- match -
src.match(/re/) -> ab
src.match(/re/g) -> ab,abc,abcd

 キャプチャ有
src.match(/rec/) -> ab,b
src.match(/rec/g) -> ab,abc,abcd

- replace -
src.replace(/re/,"0") -> 0abcabcd
src.replace(/re/g,"0") -> 000