JavaScriptの正規表現：初心者から上級者への完全ガイド

JavaScriptにおける正規表現（Regular Expression）は、文字列内で特定のパターンを検索したり一致させたりするための強力なツールです。

正規表現とは？
特殊文字
文字クラス
応用例

正規表現とは？

正規表現（RegExp）は、文字列内の特定のパターンを検索するためのパターンです。

JavaScriptでは、正規表現はRegExpオブジェクトを使用して作成され、またはリテラル（/pattern/）を使用して直接記述されます。

// RegExpオブジェクトを使った方法
// var str = new RegExp('正規表現','オプション');
var re1 = new RegExp('abc');

// リテラルを使った方法
//  var str = /正規表現/オプション;
var re2 = /abc/;

“ABCD” を “CODINGHAKU” に置き換える例を見てください。

Visit ABCD

<button onclick="myFunction()">クリック</button>
<p id="demo">Visit ABCD</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/abcd/i,"CODINGHAKU");
    document.getElementById("demo").innerHTML = txt;
}
</script>

特殊文字

正規表現では、特殊文字がいくつか使用されます。これらの文字は特定のパターンを表現するために使われます。

たとえば：

. は任意の単一文字に一致します（改行文字を除く）。
* は直前の文字が0回以上繰り返すパターンに一致します。
+ は直前の文字が1回以上繰り返すパターンに一致します。
? は直前の文字が0回または1回繰り返すパターンに一致します。

var pattern = /r.n/;
var str = "run";
console.log(pattern.test(str)); // true
// . は任意の単一文字に一致するため、
// "run" や "ran" など、"r" と "n" の間に任意の文字がある場合、このパターンに一致します。

var pattern = /ca*r/;
var str = "caar";
console.log(pattern.test(str)); // true
// "a" の後ろに * があるため、
// "a" が0回以上繰り返す任意の文字列（"cr", "car", "caar", "caaar" など）がこのパターンに一致します。


var pattern = /ca+r/;
var str = "caar";
console.log(pattern.test(str)); // true
// "a" の後ろに + があるため、
// "a" が1回以上繰り返す任意の文字列（"car", "caar", "caaar" など）がこのパターンに一致します。
// ただし、"cr" は "a" が0回しか出現しないため、このパターンには一致しません。

var pattern = /ca?r/;
var str = "car";
console.log(pattern.test(str)); // true
// "a" の後ろに ? があるため、
// "a" が0回または1回繰り返す任意の文字列（"cr" と "car"）がこのパターンに一致します。
// ただし、"a" が2回以上繰り返される場合（"caar", "caaar" など）、このパターンには一致しません。

文字クラス

正規表現では、文字クラスを使って特定のセットの文字に一致するパターンを作成することができます。

たとえば：

[abc] は ‘a’, ‘b’, ‘c’ のどれか1文字に一致します。
[a-z] は小文字のアルファベットの任意の1文字に一致します。
[0-9] は任意の数字1文字に一致します。

var pattern = /[abc]/;
var str = "apple";
console.log(pattern.test(str)); // true

var pattern = /[a-z]/;
var str = "Hello";
console.log(pattern.test(str)); // true

var pattern = /[0-9]/;
var str = "Hello2";
console.log(pattern.test(str)); // true

応用例

正規表現は、非常に複雑で高度なパターンマッチングも可能です。グルーピング、参照、前方一致・後方一致、否定的先読みなど、多くの高度なテクニックが存在します。

これらの詳細な説明はこの記事の範囲を超えていますが、以下に役立つJavaScriptの正規表現の応用例をいくつか挙げてみます。

電子メールの検証

function validateEmail(email) {
  var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

URLの検証

function validateURL(url) {
  var re = /^(https?:\/\/)?([^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})$/i;
  return re.test(url);
}

電話番号の検証

function validatePhoneNumber(phoneNumber) {
  var re = /^0\d{1,4}-\d{1,4}-\d{3,4}$/;
  return re.test(phoneNumber);
}

特殊文字のエスケープ

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

HTMLタグの除去

function removeHtmlTags(str) {
  var re = /<[^>]*>/g;
  return str.replace(re, "");
}

文字列の中から数値だけを取り出す

function extractNumbers(str) {
  var re = /\d+/g;
  return str.match(re); // 数値の配列を返します
}

これらは一部の例ですが、正規表現はその柔軟性と強力さから、様々なテキスト処理タスクに使用できます。ただし、正規表現は読みにくく、複雑になりやすいため、適切にコメントを付けることをお勧めします。また、特にユーザからの入力を扱う場合は、セキュリティ上の考慮も必要です。

以上、JavaScriptの正規表現の基本から高度なテクニックまでを網羅する初心者から上級者向けのガイドでした。