【JavaScript】HTML文字列から特定のタグ内のテキストを取得する

#背景
某CMS対応案件にて、HTML生成後、見た目を変更する必要が有った。
CMSが密接に絡んでいる箇所において、変数に格納されたHTML文字列を書き換える必要が有った。正規表現でHTML文字列内のタグテキストを取得し編集する必要が有り対応した。その際の知見を活かして、「HTML文字列から特定のタグ内のテキストを取得する」関数を作成した。

#正規表現メモ

正規表現パターン

• 静的、又は動的に定義できます。

静的

• 静的な文字列で正規表現パターンを定義します。

var str = "<span><b>こんにちは、「Bタグ文字列1」です。</b><b>ここは、「Bタグ文字列2」です。</b><strong>こちらは、「strongタグ文字列」です。</strong></span>";
var pattern = /<("[^"]*"|'[^']*'|[^'">])*>/g
var result = str.match(/<b(?: .+?)?>.*?<\/b>/g);
console.log(result);

出力結果：

["<b>こんにちは、「Bタグ文字列1」です。</b>", "<b>ここは、「Bタグ文字列2」です。</b>"]

動的

• RegExpコンストラクタにて、動的に正規表現パターンを生成できます。

var str = "<span><b>こんにちは、「Bタグ文字列1」です。</b><b>ここは、「Bタグ文字列2」です。</b><strong>こちらは、「strongタグ文字列」です。</strong></span>";
var tag_val="b";

//動的に正規表現パターンを生成するには「RegExp」を使用します。
var pattern1 = new RegExp("<"+tag_val+"(?: .+?)?>.*?<\/"+tag_val+">", "g"); 
var result = str.match(pattern1);
console.log(result);

出力結果：

["<b>こんにちは、「Bタグ文字列1」です。</b>", "<b>ここは、「Bタグ文字列2」です。</b>"]

主な正規表現

正規表現	説明
^	入力の先頭にマッチします。
$	入力の末尾にマッチします。
.	任意の1文字にマッチします。（改行コードと\u2028、\u2029を除く）
*	指定した文字の0回以上繰り返しパターンにマッチします。「x*」の場合、xの0回以上繰り返しパターンを指します。
?	指定した文字の0回か1回の繰り返しパターンにマッチします。「x*」の場合、xの0回以上繰り返しパターンを指します。

サンプル関数

• 説明用に読みやすくする為、冗長な書き方をしております。

// HTMLタグのテキスト取得関数
// 引数：
// 　target_val：HTML文字列
// 　tag_val：タグ文字(例：bタグのテキストを取得したい場合は、"b"を指定する。)
// 戻り値：
// 　引数「tag_val」に囲まれたテキスト(例：HTML文字列が「<b>あいうえお</b>」で、タグ文字が「b」の場合、「あいうえお」が戻り値となる)
function extractTagText(target_val,tag_val){

    // 戻り値配列　※指定タグで複数一致した場合の考慮
    var retArry = [];
    
	// 引数で指定されたタブをHTML文字列から、正規表現で検索する
	var pattern1 = new RegExp("<"+tag_val+"(?: .+?)?>.*?<\/"+tag_val+">", "g"); 
	var result = target_val.match(pattern1);

    // HTMLタグのみを除去する正規表現のパターン
	var pattern2 = new RegExp("<(\"[^\"]*\"|'[^']*'|[^'\">])*>", "g"); 

    result.forEach(function( value ) {
        // HTMLタグのみを削除して戻り値配列に格納
    	retArry.push(value.replace(pattern2, ""));

    });

    // 戻り値を返す
    return retArry;
}

var htmlText = "<span><b>こんにちは、「Bタグ文字列1」です。</b><b>ここは、「Bタグ文字列2」です。</b><strong>こちらは、「strongタグ文字列」です。</strong></span>";
var ret = extractTagText(htmlText, "b");
console.log(ret);

ret = extractTagText(htmlText, "strong");
console.log(ret);

出力結果：

[ 'こんにちは、「Bタグ文字列1」です。', 'ここは、「Bタグ文字列2」です。' ]
[ 'こちらは、「strongタグ文字列」です。' ]