Web開発において、特定の文字に挟まれた部分を抽出したい場面がよくあります。例えば、角括弧 [ と ] の間にある文字列だけを取得したい場合、JavaScriptでは正規表現を使うことで簡単に実現できます。本記事では、その方法を具体的なコード例と共に紹介します。
基本的な方法：角括弧に挟まれた文字列を取得する
まずは、基本的な例として、角括弧 [ と ] に挟まれた文字列を取得する方法を見ていきましょう。
const str = "このテキストの中に[抽出する文字列]があります。";
const match = str.match(/\[(.*?)\]/);
if (match) {
const extracted = match[1];
console.log(extracted); // "抽出する文字列"
} else {
console.log("指定された文字に挟まれた文字列が見つかりませんでした。");
}
- str.match(/\[(.*?)\]/): 正規表現を使って、角括弧に挟まれた部分を抽出しています。.*? は非貪欲モードを示し、できるだけ少ない文字をマッチさせます。
- match[1]: match 配列の 1 番目の要素が、角括弧に挟まれた部分です。
このコードを使うと、最初に見つかった角括弧内の文字列が取得されます。
応用編：複数のマッチを取得する
次に、文字列内に複数のマッチが存在する場合に、それらすべてを取得する方法を紹介します。
const str = "複数の[文字列1]を抽出して[文字列2]みましょう。";
const matches = [...str.matchAll(/\[(.*?)\]/g)];
matches.forEach(match => {
console.log(match[1]);
});
// 結果:
// "文字列1"
// "文字列2"
- str.matchAll(/\[(.*?)\]/g): /g フラグを付けることで、文字列全体からすべてのマッチを取得します。matchAll はイテレータを返すため、スプレッド構文 […] を使って配列に変換しています。
- matches.forEach(match => {…}): 取得した複数のマッチをループで処理し、それぞれのマッチ部分を出力します。
この方法を使えば、文字列中のすべてのマッチ箇所から文字列を抽出することができます。
よくある質問（FAQ）
Q. JavaScriptで特定の区切り文字で囲まれた部分を取得するには？
A. match()や正規表現の括弧グループを使います。例：str.match(/\[([^\]]+)\]/)?.[1]で[]内の文字列が取得できます。
Q. クォートで囲まれた文字列を抽出するには？
A. /[“‘]([^”‘]*)[“‘]/.exec(str)?.[1]でシングルまたはダブルクォート内の文字列が取得できます。ネストしたクォートには対応しないため、用途に合わせて正規表現を調整してください。
Q. HTMLタグの属性値を正規表現で取得するには？
A. DOMパーサーを使う方が安全です。DOMParser().parseFromString()でHTMLを解析し、querySelectorで属性にアクセスします。正規表現でのHTML解析は入れ子タグで破綻するため推奨しません。
まとめ
JavaScriptを使って、特定の文字に挟まれた文字列を取得する方法は、正規表現を利用することで簡単に実現できます。基本的な例から、複数のマッチを取得する応用まで、状況に応じた使い分けが重要です。これらのテクニックをマスターして、より効率的なコーディングを目指しましょう。
