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

JavaScript正規表現の後読みアサーション（Lookbehind）の使い方を実例で解説

後読みアサーション（Lookbehind）とは、あるパターンの直前に特定の文字列や記号が存在する場合にのみ、そのパターンをマッチさせることができるJavaScript正規表現の機能です。マッチ結果には直前のパターン自体は含まれず、あくまで「存在確認の条件」として扱われる点が大きな特徴です。

後読みアサーションの基本構文

後読みアサーションは (?<=パターン) の形式で記述します。例として (?<=\$)\d+ という正規表現を見てみましょう。

  • (?<=\$): 直前にドル記号（$）が存在することを確認する
  • \d+: 1桁以上の数字にマッチする

この組み合わせにより、「$記号の直後に続く数字」だけが抽出され、$記号そのものはマッチ結果に含まれません。

コード例

以下は、文中の金額（$50、$99、$121、$150）から数字部分だけを後読みアサーションで取り出すHTMLとJavaScriptの実装例です。

<!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: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>後読みアサーションによる正規表現マッチング</h1>
<div class="sample">テーブル4脚の価格は $50 、$99 、$121 、$150 です。</div>
<div style="color: green;" class="result"></div>
<button class="btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、後読みアサーションを使ってテーブルの価格を抽出します
</h3>
<script>
    let sampleEle = document.querySelector(".sample").innerHTML;
    let btnEle = document.querySelector(".btn");
    let resEle = document.querySelector(".result");
    const priceRegex = /(?<=\$)\d+/g;
    btnEle.addEventListener("click", () => {
        resEle.innerHTML = "テーブルの価格 = " + sampleEle.match(priceRegex);
    });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のように表示されます。

JavaScript正規表現の後読みアサーション（Lookbehind）の使い方を実例で解説

続いて「CLICK HERE」ボタンをクリックすると、後読みアサーションによって$記号を除いた価格の数字だけが配列として抽出され、次のように表示されます。

JavaScript正規表現の後読みアサーション（Lookbehind）の使い方を実例で解説

補足：ブラウザ対応について

後読みアサーションはES2018で正式に仕様へ追加された機能です。Chrome・Firefox・Edgeなどの主要ブラウザでは広くサポートされていますが、Safariでは16.4以降でのみ利用可能です。古いブラウザ環境もサポート対象とする場合は、代替手段（キャプチャグループとの併用など）を検討しましょう。

  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が解決された時点で