JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの正規表現（RegExp）とは？基本の使い方を実例付きで解説

正規表現（Regular Expression）とは、検索パターンを表す文字列のことです。あらかじめ定義したパターンをもとに、テキストの中から特定の文字列や条件に一致する部分を効率的に検索したり、置換したりすることができます。

JavaScriptでは、スラッシュ「/」で囲んでパターンを記述する方法と、RegExpオブジェクトを使う方法の2通りで正規表現を作成できます。また、パターンには「g（グローバル検索：すべての一致を対象）」「i（大文字・小文字を区別しない）」「m（複数行モード）」などのフラグを組み合わせることで、より柔軟な検索が可能です。

ここでは、replace() メソッドと正規表現を組み合わせて、テキスト内の特定の単語を別の単語へ置き換えるシンプルなサンプルを紹介します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample,.result{
        font-size: 18px;
        font-weight: 500;
        color:red;
    }
</style>
</head>
<body>
<h1>JavaScript Regular Expressions</h1>
<div class="sample">The king bought the ring and went to the palace.</div>
<div style='color:black' class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to replace king with queen in the text above
</h3>
<script>
    let sampleEle = document.querySelector('.sample');
    let resultEle = document.querySelector('.result');
    document.querySelector('.Btn').addEventListener('click',()=>{
        let newText = sampleEle.innerHTML.replace(/king/gi,'queen');
        resultEle.innerHTML = 'Result = ' + newText;
    })
</script>
</body>
</html>

コードのポイント

  • /king/gi … 検索パターン「king」に対し、フラグ「g」（文中のすべての一致を対象）と「i」（大文字・小文字を区別しない）を指定しています。
  • replace(/king/gi, 'queen') … 文字列中のすべての「king」を「queen」に一括で置き換えます。
  • ボタンがクリックされると、置換後のテキストが result クラスの要素に出力されます。

実行結果

上記のコードをブラウザで実行すると、まず次のような画面が表示されます。

JavaScriptの正規表現（RegExp）とは？基本の使い方を実例付きで解説

そして、「CLICK HERE」ボタンをクリックすると、テキスト内の「king」がすべて「queen」に置き換わり、結果が下に表示されます。

JavaScriptの正規表現（RegExp）とは？基本の使い方を実例付きで解説


  1. JavaScriptでドキュメントの読み込み状態（readyState）を確認する方法

    JavaScriptでドキュメント（ページ）の読み込みが完了しているかどうかを確認するには、document.readyStateプロパティを使用します。このプロパティは、現在のドキュメントの読み込み状況に応じて以下の3つの文字列を返します。loading … ドキュメントがまだ読み込み中の状態interactive … ドキュメントの解析は完了したが、画像などのサブリソースは still 読み込み中の状態complete … ドキュメントとすべてのサブリソースの読み込みが完了した状態以下は、ボタンをクリックしたタイミングでdocument.readyStateの値を判定し、ページの読み込み状

  2. JavaScriptの動的インポート（Dynamic Import）の使い方と実装例を解説

    JavaScriptの動的インポートとは 動的インポート（Dynamic Import）とは、JavaScriptのモジュールを必要なタイミングで読み込むための機能です。通常の静的なimport文と異なり、import()関数はPromiseを返すため、async/awaitやthen()と組み合わせて柔軟に扱うことができます。 これにより、ユーザーがボタンをクリックしたときなど、実際に必要になった瞬間にだけモジュールを読み込むことが可能になります。 動的インポートの基本構文 import()関数にモジュールのパスを渡すと、そのモジュールが非同期に読み込まれ、Promiseが解決された時点で