JavaScript HTML文字列からstyleタグ内のテキストを取得したい

Question

JavaScript HTML文字列からstyleタグ内を取得したいです

以下のようなHTMLから

<p style="color:red;">aaa</p> 

<style>.blue { color:blue; }</style> 
<p class="blue">aaa</p> 

<p>aaa</p> 

<style>.yellow { background:yellow; }</style> 
<p class="yellow">aaa</p>

scriptタグ内の文字のみを取得したコード

.blue { color:blue; } .yellow { background:yellow; }

を取得したいです

試してみたこと

この記事を参考にstyleタグを取得してみました
https://qiita.com/yut-nagase/items/0f4aab256e38bb72068a

var str = `<p style="color:red;">aaa</p> 

<style>.blue { color:blue; }</style> 
<p class="blue">aaa</p> 

<p>aaa</p> 

<style>.yellow { background:yellow; }</style> 
<p class="yellow">aaa</p>`;

var tag_val="style";

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

しかしresultはnullが返ってきてしまいます

お心優しい方、助言いただけると幸いです。

Answer 1

DOMで処理しては？

var str = `<p style="color:red;">aaa</p> 
<style>.blue { color:blue; }</style> 
<p class="blue">aaa</p> 
<p>aaa</p> 
<style>.yellow { background:yellow; }</style> 
<p class="yellow">aaa</p>`;
var tag_val="style";
var res=[...Object.assign(document.createElement('template'),{innerHTML:str}).content.querySelectorAll(tag_val)].map(x=>x.textContent);
console.log(res);

Answer 2

試してみたことに記載されているJSのコードを実行してみたところ、resultには配列でstyleの内容が取得出来ていました。
ですので、コード自体は問題なく、他の部分に問題があるのだと思います。