webページから取得したデータを配列に入れたいが、正規表現をどう書けばよいかわからない。

Question

GASでWebページから取得したHTMLを変数sourceに入れて、.matchで複数のデータを配列へと代入しようとしたのですが、
どう正規表現を記述すればよいのかわかりません。

---

<p class="boid main-root jss439">10日</p>
:略
<p class="boid main-root jss569">18日</p>
:略
<p class="boid main-root jss659">20日</p>

webページのHTML内で上記の部分があるとして、この中の**日の部分を抜き出し、配列に代入したいです。
この場合の正規表現はどのように記述すればいいのでしょうか？

---

様々なことを試したのですが、jss***の部分が不特定なため、ページ全体から抜き出すことが自分はできませんでした。

また、jss***の数値部分は3桁ということで確定しています。

その他

HTMLは以下のコードでsourceへ代入しています。

  const URL = 'https://example.com'; //Target URL
  var key = '##-#####-#####-#####-#####-#####';
  
  var option = 
      {url:URL,
       renderType:"HTML",
       outputAsJson:true};
  var payload = JSON.stringify(option);
  payload = encodeURIComponent(payload);
  var url = "https://phantomjscloud.com/api/browser/v2/"+ key +"/?request=" + payload;                
  var response = UrlFetchApp.fetch(url);
 
  var json = JSON.parse(response.getContentText()); 
  var source = json["content"]["data"];

---

他の部分で少々強引ですが、他の部分は下のようにして抜き出すことができました。

  var itemRegexp = new RegExp(/<a href="/events/(.*?)>/g);
  var item = source.match(itemRegexp);

  for (var i = 0; i < item.length; i++){
    item[i] = item[i].replace("<a href=\"/events/", "");
    item[i] = item[i].replace("\">", "");
    Logger.log(item[i]);
  }  

===
どうかよろしくお願いします

###追記(2019/11/27)

実行環境についてわかりにくかったと思われるため、追記します。

実行環境

Google Apps Script

同スクリプトファイルでは、ES5で記述しているため、基本的にES5を使用したいです。

Comments

[papinianus]

ライブラリ使ってもいいですか？正規表現限定でしょうか

[Dolphiiiin]

使っても構いません。
が、GASを使っているため、ES6を使用することができません。

Answer 1

matchAllが使えれば以下のように書けますが…

const days = [...`
  <p class="boid main-root jss439">10日</p>
  :略
  <p class="boid main-root jss569">18日</p>
  :略
  <p class="boid main-root jss659">20日</p>
`.matchAll(/jss\d{3}">(.*?)</g)
].map(match => match[1]);
console.log(days);
//=> ["10日", "18日", "20日"]

まだ使えないでしょうから以下でしょうか。execの説明のこのあたりが参考になると思います。

const source = `
  <p class="boid main-root jss439">10日</p>
  :略
  <p class="boid main-root jss569">18日</p>
  :略
  <p class="boid main-root jss659">20日</p>
`;
const regex = /jss\d{3}">(.*?)</g;
const days = [];
let match;
while ((match = regex.exec(source)) !== null) days.push(match[1]);
console.log(days);
//=> ["10日", "18日", "20日"]

replaceの第二引数にreplacer関数を渡して以下のようにすることでも達成可能です。

const days = [];
`
<p class="boid main-root jss439">10日</p>
:略
<p class="boid main-root jss569">18日</p>
:略
<p class="boid main-root jss659">20日</p>
`.replace(/jss\d{3}">(.*?)</g, (match, sub) => {
  days.push(sub);
});
console.log(days);
//=> ["10日", "18日", "20日"]

Comments

[Dolphiiiin]

回答ありがとうございます。
GAS環境下で行っているため、たしかに"matchALL"が使用できません。

なので、頂いた2つ目、3つ目のコードで試したのですが、
共にエラーが発生してしまい、実行することができません。

Firefoxのコンソールで実行してみましたが、Firefoxの場合、正常に動作します。
以下は実行した際のスクリーンショットです。

:GASで実行した場合
https://gyazo.com/d0e1e2fcf2176fb71f42b6efb176a247
https://gyazo.com/5656952d387999ad4a541f7a3748c497

:Firefoxコンソール上で実行した場合
https://gyazo.com/2181409a2ef0b138f4b54f86c723ea24
https://gyazo.com/5656952d387999ad4a541f7a3748c497

GASで実行する場合、構文を変えた方がよいのでしょうか。

[shinji709]

gasはES2015の構文色々と使えないんでしたね…。
constもletもvarに書き換えて、
sourceは、
var source
= '<p class="boid main-root jss439">10日</p>'
+ ':略'
+ '<p class="boid main-root jss569">18日</p>'
+ ':略'
+ '<p class="boid main-root jss659">20日</p>'
;
のように+で連結ではどうでしょうか。
clasp( https://github.com/google/clasp )導入も考えてもいいかもしれませんね。

[Dolphiiiin]

https://gyazo.com/7f5d7df37617115b87a3b547d604e68f

無事実行できました。

GASの場合、ES5の構文が一部使えないのは知りませんでした。

丁寧にありがとうございます。

また、最終的なコードは以下の通りになりました
https://pastebin.com/342YNymX

Answer 2

複数のデータを配列へと代入しようとした

配列化が目的なら、querySelectorAll() の引数を属性セレクタで指定する方法もあります。

次の３つは、正規表現のようなマッチング機能を実現します。

1. [属性名^=値]
2. [属性名$=値]
3. [属性名*=値]

ご質問の jss を含む場合は、 p[class*=jss] で取得できそうです。

webページのHTML内で上記の部分があるとして、この中の**日の部分を抜き出し、配列に代入したいです。

この場合の正規表現はどのように記述すればいいのでしょうか？

let paragraphs = document.querySelectorAll("p[class*=jss]");
let days = Array.from(paragraphs).map(el=>el.textContent);
console.log(days): // ["10日", "18日", "20日"]

追記）
HTMLソースを取得ぜず、DOMで扱う事例となります。