【javascript】正規表現に詳しい方お願いします！

Question

javascriptの正規表現について質問です。

javascriptっていっても、使用言語はgasなのですが・・・

  var data = UrlFetchApp.fetch(url);
  var strText = data.getContentText();

というコードで、変数strTextにhtmlを取得しています。

その内容が以下とします。
この際に、
"classが「A」かつ、「data=B」が付いていないDIVのouterHTML"を配列に格納したいのです。

<div class="A" data="B">
    <div class="C">
        <div class="D">
            <a href="/">×外側のクラスはAですが、data=Bが入っているので取得しません</a>
        </div>
    </div>
</div>
<div class="A">
    <div class="C">
        <div class="D">
            <a href="/">取得します！！</a>
        </div>
    </div>
</div>
<div class="ZZZZZZZZZZ">
    <div class="C">
        <div class="D">
            <a href="/">×外側のクラスがZZZZZZZZZなので取得しません</a>
        </div>
    </div>
</div>
<div class="A">
    <div class="C">
        <div class="D">
            <a href="/">取得します！！</a>
        </div>
    </div>
</div>
<div class="A" data="B">
    <div class="C">
        <div class="D">
            <a href="/">×外側のクラスはAですが、data=Bが入っているので取得しません</a>
        </div>
    </div>
</div>

つまり、

var aryMatch = strText.match(【正規表現】);
// aryMatchの内容
// [
// "<div class="A">
//    <div class="C">
//        <div class="D">
//            <a href="/">取得します！！</a>
//        </div>
//    </div>
// </div>"
// ,
// "<div class="A">
//    <div class="C">
//        <div class="D">
//            <a href="/">取得します！！</a>
//        </div>
//    </div>
// </div>"
// ]

となるようにしたいのです。

正規表現に詳しい方、宜しくお願いいたします。

Comments

[kei344]

「Google Apps Script」のタグも追加されてはいかがでしょう。https://teratail.com/tags/Google+Apps+Script

Answer 1

正規表現ではなくDOMをパースしたほうが確実な気がします。
（最近使っていないので下記記事が今も使えるかはわかりませんが）

【［GAS］HTML/XMLをパースする · ENTRYPOINT】
https://yhirano55.github.io/2015/10/01/6653458415123214142/

【XML Service Service  |  Apps Script  |  Google Developers】
https://developers.google.com/apps-script/reference/xml-service/

Answer 2

根本的に、HTMLのような「ネストしうるものに対して正規表現でマッチングを行う」というのが向いていません。

そのようなマッチングをさせようとしたら、処理系ごとの独自拡張に頼る必要があるのですが、JavaScriptの「後方参照」だけでそのようなものを書けるかは、よくわかりませんし、仮に書けたとしても読解が困難なものとなります。

Answer 3

window.addEventListener('DOMContentLoaded', function(){
  Array.prototype.map.call(document.querySelectorAll('.A:not([data=B]'),function(x){
    console.log(x.outerHTML);
  })
});

追記

文字列から取得

var strText=`
<div class="A" data="B">
    <div class="C">
        <div class="D">
            <a href="/">×外側のクラスはAですが、data=Bが入っているので取得しません</a>
        </div>
    </div>
</div>
<div class="A">
    <div class="C">
        <div class="D">
            <a href="/">取得します！！1</a>
        </div>
    </div>
</div>
<div class="ZZZZZZZZZZ">
    <div class="C">
        <div class="D">
            <a href="/">×外側のクラスがZZZZZZZZZなので取得しません</a>
        </div>
    </div>
</div>
<div class="A">
    <div class="C">
        <div class="D">
            <a href="/">取得します！！2</a>
        </div>
    </div>
</div>
<div class="A" data="B">
    <div class="C">
        <div class="D">
            <a href="/">×外側のクラスはAですが、data=Bが入っているので取得しません</a>
        </div>
    </div>
</div>
`;
$(strText).filter('.A:not([data=B])').each(function(){
  console.log($(this).prop('outerHTML'));
});

Comments

[Zoohomi]

さっそくのご回答ありがとうございます！

すみません、使用言語はgasなので、
var aryMatch = strText.match(【正規表現】);
で取れるようにはできますでしょうか？

[yambejp]

文字列から取得したいのですね
それでも正規表現は使う処理ではないです

Answer 4

正規表現

まず、正規表現でHTMLタグを抽出する事は不可能ではありません。
JavaScriptにおいては、ネストされたタグの対応関係を知るために 、RegExp#execもしくはString#replace` を利用する事になります。
https://teratail.com/questions/75922
https://gist.github.com/think49/53b4a2cedfcff3c1a1ea40390a7ff3d8

githubの readme.md より <div></div> を抽出する手法を参考にして下さい。
そして、開始タグより classが「A」かつ、「data=B」が付いていない、タグを絞り込んで下さい。
ただし、find-corresponding-from-string.js では「開始タグ」「終了タグ」しか抽出しない為、「開始タグから終了タグまでの文字列全体」も抽出するように処理を書き換えてやる必要があります。

DOM API

JavaScriptでは、HTMLタグはDOMオブジェクトに変換して処理する方が容易に処理出来るよう設計されています。

• DOMParser
• innerHTML
• insertAdjacentHTML
• createHTMLDocument

jQueryならこちら。

• jQuery()
• .html()

「DOM/jQueryオブジェクトに変換→innerHTML等で文字列出力」という手順で要件を達成するわけですが、その場合はDOMに変換される過程出元の文字列が失われ、抽出する文字列　元々の文字列に相違が出る可能性があります。
基本的にDOM的に同一でるなら、同一と見なすべきですが、何がしかの事情出対応出来ないのであれば、正規表現で実装する意味はあります。

Re: Zoohomi さん

Comments

[kei344]

To: think49さん
Google Apps Script に DOMParser は実装されていません。（HTMLというかUIを出力/表示したあとはブラウザなので使えます）

[think49]

To: kei344 さん
なるほど、Google Apps Script はDOM API全般をサポートしていないサーバサイド言語なんですね。
そうなると、自前実装なら、正規表現で実装する手段しか思いつきませんでした。