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

JavaScriptで二重引用符(ダブルクォート)内のテキストを抽出する方法

JavaScriptを使って、文字列から二重引用符(ダブルクォート)で囲まれたテキストを抽出する方法を解説します。

テキストブロックから引用文を取り出したい場面はよくあります。引用文は通常、二重引用符(" ")で囲まれています。そんなときは、JavaScriptのmatch()メソッドと正規表現を組み合わせれば、シンプルに解決できます。

まずは、二重引用符で囲まれた一文を含むテキストブロック(文字列)を用意し、textWithQuoteという変数に代入します。

const textWithQuote =
  'One of my favorite quotes is "First we make our habits, then our habits make us". This quote is sometimes attributed to John Dryden, or other authors.'

続いて、この変数にmatch()メソッドをつなげて、一見難解に見える正規表現パターン /(?:"[^"]*"|^[^"]*$)/)[0].replace(/"/g, "") を渡してみましょう。

const extractQuote = textWithQuote
  .match(/(?:"[^"]*"|^[^"]*$)/)[0]
  .replace(/"/g, "")

結果をコンソールに出力すると、次のようになります。

console.log(extractQuote)
// "First we make our habits, then our habits make us"

[0]を指定する理由

[0]を付けているのは、これがないとマッチ結果が意図せず重複して返されてしまうためです。[0]を指定することで、「最初の1件だけ」を確実に取り出せます。

replace()を使う理由

replace()メソッド(.replace(/"/g, ""))を挟んでいるのは、正規表現によるマッチ結果には引用符自体も含まれるためです。そのまま返すと結果に余分な引用符が残ってしまうので、すべて削除しています。

split()を使った代替方法

split()メソッドを使っても、同じことが実現できます。

const textWithQuote =
  'One of my favorite quotes is "First we make our habits, then our habits make us". This quote is sometimes attributed to John Dryden, or other authors.'

console.log(textWithQuote.split('"')[1])
// "First we make our habits, then our habits make us"

この場合、[1]を指定して「2番目の要素」を返す必要があります。[0]を指定すると、最初の引用符より前の部分である One of my favorite quotes is が返されてしまうためです。

逆に[2]を指定すると、2番目の二重引用符の直後に続くテキストが取得できます。

複数の引用文を抽出したい場合

文字列内に引用文が複数含まれている場合は、グローバルフラグ(g)付きの正規表現とmatchAll()メソッドを組み合わせると便利です。

const matches = [...textWithQuote.matchAll(/"([^"]*)"/g)]
matches.forEach(m => console.log(m[1]))

どちらの方法をいつ使うべきか、それぞれのメリット・デメリットについては、筆者自身も正規表現を本格的に学び始めたばかりなので断言はできませんが、単純なケースではsplit()の方が直感的で読みやすい一方、柔軟性や拡張性を重視するなら正規表現ベースのmatch()が有利だと言えます。

  1. JavaScriptでテキストを切り替える(トグルする)方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える(トグルする)処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>  

  2. JavaScriptで<strong>タグにテキストを設定する方法

    Webページ上のテキストを動的に書き換えたい場面は多くあります。この記事では、jQueryを使用して<strong>タグ内のテキストをJavaScriptで変更する方法を、手順とコード例とともにわかりやすく解説します。手順1:<strong>要素を用意するまず、HTML内にテキストを差し替えたい<strong>要素を配置します。後からJavaScript側でこの要素を指定できるよう、id属性を付けておくのがポイントです。<strong id="strongDemo">Replace This strong tag</st