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

正規表現を使って引用符で囲まれたテキストを抽出するJavaScriptコード

この記事では、正規表現（RegExp）を使用して、文字列から引用符「" "」で囲まれたテキストを抽出する方法を、実際に動作するサンプルコードとともに解説します。ポイントは、/"(.*?)"/g というパターンです。.*? による最短一致と g フラグ（グローバル検索）を組み合わせることで、文中の引用符で挟まれた部分を取得できます。

サンプルコード

<!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;
    }
    .result,.sample {
        font-size: 20px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>引用符で囲まれたテキストを抽出する</h1>
<div style="color: green;" class="result">Hello "World"</div>
<div class="sample"></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、引用符内のテキストが表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let sampleEle = document.querySelector(".sample");
    let regex = /"(.*?)"/g;
    var match = regex.exec(resEle.innerHTML);
    BtnEle.addEventListener("click", () => {
        if (match) {
            sampleEle.innerHTML += match[0];
        }
    });
</script>
</body>
</html>

コードの解説

  • /"(.*?)"/g：引用符で囲まれた部分にマッチする正規表現です。括弧 () でキャプチャグループを作り、? を付けることで貪欲でない（最短）マッチを行います。
  • regex.exec()：対象文字列に対して正規表現を適用し、最初のマッチ結果を返します。
  • match[0]：マッチした全体（引用符を含む "World"）を表します。引用符を除いたテキストだけが必要な場合は match[1] を使用します。
  • addEventListener("click", ...)：ボタンがクリックされたときに抽出結果を画面へ出力します。

実行結果

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

正規表現を使って引用符で囲まれたテキストを抽出するJavaScriptコード

「クリックしてください」ボタンを押すと、以下のように引用符内のテキストが出力されます。

正規表現を使って引用符で囲まれたテキストを抽出するJavaScriptコード

  1. JavaScriptで<text>要素の値を変数に抽出する方法

    JavaScriptで要素の値を変数に抽出するにはSVGの<text>要素のテキスト値を変数に抽出したい場合は、textContentプロパティを使用します。基本的な書き方は以下の通りです。document.getElementById(yourTextIdValue).textContentgetElementById()メソッドで対象の要素をIDから取得し、そのtextContentプロパティを参照することで、要素内のテキストを文字列として変数に格納できます。textContentとinnerHTMLの違いなお、SVG要素の場合はinnerHTMLよりもtextContentを

  2. SeleniumでJavaScriptコードの戻り値を取得する方法

    Selenium WebDriverを使用すると、JavaScriptコードの戻り値を取得することができます。SeleniumはexecuteScriptメソッドを利用してJavaScriptコマンドを実行でき、実行したいJavaScriptコマンドはこのメソッドの引数として渡します。 JavaScriptコードから値を返す際にはreturnキーワードを使用します。また、JavaScriptを操作するためには、import org.openqa.selenium.JavascriptExecutorというインポート文を追加する必要がある点にも注意してください。 構文 JavascriptEx