【課題】文字列を置換する
正規表現を使って、次の文字列に含まれる dog と cat を bird に置換してコンソール表示するプログラムを作ってください。
const value = "A dog is running. Two cats are crying.";
実行イメージ（コンソールに表示／Chromeでの画面イメージ）
A bird is running. Two birds are crying.
ヒント
正規表現 /パターン/ とStringオブジェクトのreplaceメソッドを使うと実現できます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js"></script>
<title>dogcat2bird</title>
</head>
<body>
<p>コンソールに表示します...</p>
</body>
</html>
main.js
// main.js
window.addEventListener("load", ()=>{
const value = "A dog is running. Two cats are crying.";
const regex = /dog|cat/g;
console.log(`元の内容: ${value}`);
console.log(value.replace(regex, "bird"));
});
実行イメージ（コンソールに表示）
元の内容: A dog is running. Two cats are crying.
A bird is running. Two birds are crying.
補足
プログラムでは、参考のため元のvalueの値も表示しています。
/dog|cat/のように|で区切ると「又は」という意味の正規表現となります。
今回の変数valueではあまり意味がありませんが、最後の/dog|cat/gの最後のgは、複数回パターンが出現する場合に有効な記述です。
【課題】文字列のパターンをチェックする
CSS等で利用する16進数カラーコードをチェックするJavaScript正規表現を考えてください。
16進数カラーコードの仕様
- 先頭が「#」で始まる
- 16進数の文字のみ利用可能（0~9, a~z, A~Z）
- 桁数は3桁又は6桁 例）#1AF, #ffcc00
作成した正規表現をテストする場合、RegExpオブジェクトのtestメソッドを使うと正規表現と指定された文字列の比較が容易です。
testメソッドの戻り値は一致する（true）、一致しない（false）となります。
使用例
const regex = /^[0-9]{4}$/; // 正規表現オブジェクト（4桁の数値のみチェック）
console.log(regex.test("0123"));
console.log(regex.test("a8977"));
結果
true
false
参考資料
Regular expression syntax cheat sheet - JavaScript | MDN
This page provides an overall cheat sheet of all the capabilities of RegExp syntax by aggregating the content of the articles in the RegExp guide. If you need m...
developer.mozilla.org
RegExp.prototype.test() - JavaScript | MDN
test() メソッドは、正規表現と指定された文字列の一致を調べるための検索を実行します。 true または false を返します。
developer.mozilla.org
正規表現例
// 16進カラーパターン #1af, #FFCC00.... const regex1 = /(^#[0-9a-fA-F]{3}$)|(^#[0-9a-fA-F]{6}$)/;
正規表現の補足
パターンの最初と最後を表す^と$を利用するのがポイントです。
桁数は3桁と6桁の固定桁のため{3}と{6}をそれぞれ利用しました。
実際のソースコード例
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js"></script>
<title>hex_color_check</title>
</head>
<body>
<p>コンソールに表示します...</p>
</body>
</html>
main.js
// main.js
window.addEventListener("load", ()=>{
// 16進カラーパターン #1af, #FFCC00....
const regex1 = /(^#[0-9a-fA-F]{3}$)|(^#[0-9a-fA-F]{6}$)/;
// チェック用16進カラー
const color1 = "#1af";
const color2 = "#ffCC00";
const color3 = "#2FabcD";
const color4 = "#22DA";
const color5 = "55FFBB";
const color6 = "#33HHBB";
const color7 = "hello#33AABB";
// チェックする（OKならtrue、NGならfalse）
console.log(regex1.test(color1) + " " + color1);
console.log(regex1.test(color2) + " " + color2);
console.log(regex1.test(color3) + " " + color3);
console.log(regex1.test(color4) + " " + color4);
console.log(regex1.test(color5) + " " + color5);
console.log(regex1.test(color6) + " " + color6);
console.log(regex1.test(color7) + " " + color7);
});
実行イメージ（コンソールに表示）
true #1af true #ffCC00 true #2FabcD false #22DA false 55FFBB false #33HHBB false hello#33AABB
コメント