JSを使ったスクレイピング

Question

前提

IDやクラス名が無く、何番目に来るかもその時によって違う場合、特定の文字を認識して値を取得する方法を教えていただきたく質問いたします。

該当のソースコード

<div>
 <h3 data-a-111 class="header">初期タイトル</h3>
 <table class="infotable">
   <tr data-a-111>
     <th data-a-111 class>氏名</th>
     <td data-a-111 class>田中太郎</td>
   </tr>
   <tr data-a-111>
     <th data-a-111 class>電話番号</th>
     <td data-a-111 class>123-4567-8910</td>
   </tr>
 </table>
</div>
<div>
 <h3 data-a-111 class="header">タイトル１</h3>
 <table class="infotable">
   <tr data-a-111>
     <th data-a-111 class>氏名</th>
     <td data-a-111 class>佐藤たろう</td>
   </tr>
   <tr data-a-111>
     <th data-a-111 class>メールアドレス</th>
     <td data-a-111 class>[e-mail]</td>
   </tr>
   <tr data-a-111>
     <th data-a-111 class>電話番号</th>
     <td data-a-111 class>123-4567-8910</td>
   </tr>
 </table>
</div>
<div>
 <h3 data-a-111 class="header">タイトル２</h3>
 <table class="infotable">
   <tr data-a-111>
     <th data-a-111 class>氏名</th>
     <td data-a-111 class>鈴木たろう</td>
   </tr>
   <tr data-a-111>
     <th data-a-111 class>メールアドレス</th>
     <td data-a-111 class>[e-mail]</td>
   </tr>
 </table>
</div>

取得したい値

【取得したい値】

・初期タイトル
田中太郎
123-4567-8910

・タイトル１
佐藤たろう
[e-mail]
123-4567-8910

・タイトル２
鈴木たろう
[e-mail]

「氏名」「メールアドレス」「電話番号」などの値は固定です。
そのため、「"氏名”"の値がある場合、次のtdのテキストを取得」や「"氏名"の値がある場合、そのクラス内の2番目のクラス（もしくはtdタグ）のテキストを取得」などで取ってくるのかなと思っています。

書き方が分からず、、ご教示いただけますと幸いです。
よろしくお願いいたします。

※使用言語はJavascriptです。

補足

①質問に記載のコードは1つの大きなブロック内に存在し（id名で取得可能）、１番目のh3のブロックは取込対象外（質問に記載のコードは2つ目のh3ブロックでした）

②取得した値は１つずつ変数で格納したい。
・初期タイトル
田中太郎　→　変数「name」
123-4567-8910　→　変数「phoneNum」

・タイトル１
佐藤たろう　→　変数「name」
[e-mail]　→　変数「mailAdress」
123-4567-8910　→　変数「phoneNum」

・タイトル２
鈴木たろう　→　変数「name」
[e-mail]　→　変数「mailAdress」

Comments

[yambejp]

たとえば「<tr th data-a-111>」とか「<td data-a-111 class>田中太郎</td>」
HTMLの文法に沿ってない特殊な属性の付け方をしていませんか？

[gomasan]

すみません！<tr th data-a-111>は間違いで、<tr data-a-111>でした。修正します。
<td data-a-111 class>田中太郎</td>は該当ページそのまま引用（一部数字等は変更）しています。classはクラス名が無いですが、記載がありました。

Answer 1

条件がよくわからないのでとりあえず

window.addEventListener('DOMContentLoaded', ()=>{
  const res=[...document.querySelectorAll('h3')].map(x=>{
    return [x.textContent].concat([...x.nextElementSibling.querySelectorAll('td')].map(x=>x.textContent));
  });
  console.log(res);
});

調整版

window.addEventListener('DOMContentLoaded', ()=>{
  const list={"氏名":"name","電話番号":"phoneNum","メールアドレス":"mailAdress" };
  const res=[...document.querySelectorAll('h3')].map(x=>{
    return Object.fromEntries([...x.nextElementSibling.querySelectorAll('th')].map(x=>{
      return [list[x.textContent],x.nextElementSibling.textContent];
    }));
  });
  console.log(res);
});

Comments

[gomasan]

ありがとうございます！私の記載不足で大変申し訳ないのですが、補足があります。

①質問に記載のコードは1つの大きなブロック内に存在し（id名で取得可能）、１番目のh3のブロックは取込対象外（質問に記載のコードは2つ目のh3ブロックでした）

②取得した値は１つずつ変数で格納したい。
・初期タイトル
田中太郎　→　変数「name」
123-4567-8910　→　変数「phoneNum」

・タイトル１
佐藤たろう　→　変数「name」
[e-mail]　→　変数「mailAdress」
123-4567-8910　→　変数「phoneNum」

・タイトル２
鈴木たろう　→　変数「name」
[e-mail]　→　変数「mailAdress」

RPAツールに使っておりまして、連携先に値を渡すためそれぞれ変数に格納したいです。
記載いただいた内容をこちらで理解した限りだとそれぞれが配列で返ってくるかなと思っています。
（["田中太郎", "123-4567-8910"]など）この場合、どれをname変数に格納するか判断が難しいかなと思っておりまして・・・

説明が下手ですみません。

[yambejp]

＞ 変数で格納したい

の意味がわかりません
結果として具体的にどういったデータが取得したいのでしょうか？

[gomasan]

例えば、
let name = tr.querySelector("ここに氏名を取得する式");
let phoneNum = tr.querySelector("ここに電話番号を取得する式");
let mailAdress = tr.querySelector("ここにメールアドレスを取得する式");

　 return { name: name, phoneNum: phoneNum, mailAdress: mailAdress };

という流れを想定しておりました。

[yambejp]

なるほど、タイトルはいらないのですね？
調整版をご確認ください

[gomasan]

すみません！回答したつもりが通信が切れていたようでした。申し訳ございません。
いただいたコードで実際のデータにあてたところ無事取得できました！！！
本当にありがとうございます。知らない記法がいくつかあったのでとても勉強になりました。