HTMLから特定部分をJSON形式で抽出したい

表題の件の通りです。
以下htmlファイルになります。

html
1<div id="contents" role="main">
2  <!--カテゴリ-->
3  <section class="listblock">
4    <div class="programlist normal ranking">
5      <h2>カテゴリ１</h2>
6      <div class="listinner">
7        <ul>
8          <li class="resumable" data-ref-id="1">
9          <a href="/corner/aaaa/" class="detail_link" data-pos="popular">
10            <div class="pic"><div class="picinner" style="background-image:url(https://hogehoge.sample1.jpg);">ああああああああ</div></div>
11            <div class="rank">1</div>
12            <div class="progtitle">
13              <h3>ああああああああ</h3>
14              <p class="summary">1巻</p>
15              <p class="tv">AAAAAAAA</p>
16            </div>
17          </a>
18          </li>
19          <li class="resumable" data-ref-id="2">
20          <a href="/episode/bbbb/" class="detail_link" data-pos="popular">
21            <div class="pic"><div class="picinner" style="background-image:url(https://hogehoge.sample2.jpg);">いいいいいいいい</div></div>
22            <div class="rank">2</div>
23            <div class="progtitle">
24              <h3>いいいいいいいい</h3>
25              <p class="summary">　</p>
26              <p class="tv">BBBBBBBB</p>
27            </div>
28          </a>
29          </li>
30          <li class="resumable" data-ref-id="3">
31          <a href="/episode/cccc/" class="detail_link" data-pos="popular">
32            <div class="pic"><div class="picinner" style="background-image:url(https://hogehoge.sample2.jpg);">うううううううう</div></div>
33            <div class="rank">3</div>
34            <div class="progtitle">
35              <h3>うううううううう</h3>
36              <p class="summary">1巻</p>
37              <p class="tv">CCCCCCCC</p>
38            </div>
39          </a>
40          </li>
41        </ul>
42      </div>
43    </div>
44  </section>

上記HTMLより以下のようなJSONデータを抜き取りたいのです。

JSON
1[
2{"thumbnail": "https://hogehoge.sample1.jpg", "title": "ああああああああ", "link": "/corner/aaaa/"},
3{"thumbnail": "https://hogehoge.sample2.jpg", "title": "いいいいいいいい", "link": "/episode/bbbb/"},
4{"thumbnail": "https://hogehoge.sample3.jpg", "title": "うううううううう", "link": "/episode/cccc/"}
5]

＜試したこと＞
こちらを使用して試してみたのですが、thumbnailとして抜き取りたいURL部分をうまく抽出できませんでした。
こちらも試そうとしているのですが、使い方がｲﾏｲﾁよくわかりません。

何せほんとに素人で頼れる人もいません。。。頭がパンクしそうになってしまい、こちらで質問させていただきました。
上記の試してみたツール以外の方法でも全くかまいませんので、
御助言頂けるとありがたいです。

よろしくお願いいたします。

yambejp

2018/06/29 10:46

phpでよいのですか？それともクライアントのjavascriptを想定していますか？その場合jQueryなどの利用は可能ですか？

ddp

2018/06/29 11:47

コメントありがとうございます。php、javascriptのどちらでも構いません。ただjQueryについては当方知見がありません。ただこれを機に調べてみる気はあります。よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryでもよいようなのでこう
(コピペできるようjQueryのライブラリのpathまで書いておきます)

javascript
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  var a=$('.picinner').map(function(){
5    return {
6    thumbnail:$(this).css("background-image").match(/\"(.+?)\"/)[1],
7    title:$(this).text(),
8    link:$(this).closest(".detail_link").attr("href"),
9    };
10  }).get();
11  console.log(a);
12  console.log(JSON.stringify(a));
13});
14</script>
15
16<div id="contents" role="main">
17  <!--カテゴリ-->
18  <section class="listblock">
19    <div class="programlist normal ranking">
20      <h2>カテゴリ１</h2>
21      <div class="listinner">
22        <ul>
23          <li class="resumable" data-ref-id="1">
24          <a href="/corner/aaaa/" class="detail_link" data-pos="popular">
25            <div class="pic"><div class="picinner" style="background-image:url(https://hogehoge.sample1.jpg);">ああああああああ</div></div>
26            <div class="rank">1</div>
27            <div class="progtitle">
28              <h3>ああああああああ</h3>
29              <p class="summary">1巻</p>
30              <p class="tv">AAAAAAAA</p>
31            </div>
32          </a>
33          </li>
34          <li class="resumable" data-ref-id="2">
35          <a href="/episode/bbbb/" class="detail_link" data-pos="popular">
36            <div class="pic"><div class="picinner" style="background-image:url(https://hogehoge.sample2.jpg);">いいいいいいいい</div></div>
37            <div class="rank">2</div>
38            <div class="progtitle">
39              <h3>いいいいいいいい</h3>
40              <p class="summary">　</p>
41              <p class="tv">BBBBBBBB</p>
42            </div>
43          </a>
44          </li>
45          <li class="resumable" data-ref-id="3">
46          <a href="/episode/cccc/" class="detail_link" data-pos="popular">
47            <div class="pic"><div class="picinner" style="background-image:url(https://hogehoge.sample2.jpg);">うううううううう</div></div>
48            <div class="rank">3</div>
49            <div class="progtitle">
50              <h3>うううううううう</h3>
51              <p class="summary">1巻</p>
52              <p class="tv">CCCCCCCC</p>
53            </div>
54          </a>
55          </li>
56        </ul>
57      </div>
58    </div>
59  </section>