Beautiful soupでカラーコードを取得したい

Question

やりたいこと

wiki/日本の鉄道ラインカラー一覧を利用して、HTMLに入っている文字と属性タグの中に入っているカラータグを取り出して、JSONを作成したいと考えています。そのために、Beautiful soupを利用したスクレイピングを行っています。

問題

<td style="background:#00B2E5;"></td>などtdタグの中にある色コードをリストとし取得したいのですが、仕様上難しく、解決策を探りたいです。

完成物のイメージ

<table class="wikitable">
<caption>東京近郊地区における路線案内色と車体色
</caption>
<tbody><tr>
<th style="width:auto;">路線・系統名
</th>
<th>路線記号
</th>
<th colspan="2"><span class="nowrap">案内色<sup id="cite_ref-2" class="reference"><a href="#cite_note-2">[1]</a></sup><sup id="cite_ref-sobuboso_3-0" class="reference"><a href="#cite_note-sobuboso-3">[2]</a></sup></span>
</th>
<th colspan="2">車体色（JR車両の色のみ記載）
</th></tr>
<tr>
<td><a href="/wiki/%E4%BA%AC%E6%B5%9C%E6%9D%B1%E5%8C%97%E7%B7%9A" title="京浜東北線">京浜東北線</a>・<a href="/wiki/%E6%A0%B9%E5%B2%B8%E7%B7%9A" title="根岸線">根岸線</a>
</td>
<td>JK
</td>
<td style="background:#00B2E5;">&nbsp;
</td>
<td><b>水色</b>
</td>
<td style="background-color:#ccc;"><a href="/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:LineColor_KeihinTohoku.svg" class="image"><img alt="LineColor KeihinTohoku.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/58/LineColor_KeihinTohoku.svg/22px-LineColor_KeihinTohoku.svg.png" decoding="async" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/58/LineColor_KeihinTohoku.svg/33px-LineColor_KeihinTohoku.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/58/LineColor_KeihinTohoku.svg/44px-LineColor_KeihinTohoku.svg.png 2x" data-file-width="500" data-file-height="500" width="22" height="22"></a>
</td>
<td><b>スカイブルー</b>（国鉄<a href="/wiki/%E9%9D%9224%E5%8F%B7" title="青24号">青24号</a>）<sup id="cite_ref-5" class="reference"><a href="#cite_note-5">[注 3]</a></sup>
</td></tr>
<tr>
<td><a href="/wiki/%E4%B8%AD%E5%A4%AE%E7%B7%9A%E5%BF%AB%E9%80%9F" title="中央線快速">中央線快速</a><br><a href="/wiki/%E9%9D%92%E6%A2%85%E7%B7%9A" title="青梅線">青梅線</a>・<a href="/wiki/%E4%BA%94%E6%97%A5%E5%B8%82%E7%B7%9A" title="五日市線">五日市線</a>
</td>
<td>JC
</td>
<td style="background:#F15A22;">&nbsp;
</td>
<td><b>朱</b>
</td>
<td style="background-color:#ccc;"><a href="/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:LineColor_ChuoRapid.svg" class="image"><img alt="LineColor ChuoRapid.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LineColor_ChuoRapid.svg/22px-LineColor_ChuoRapid.svg.png" decoding="async" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LineColor_ChuoRapid.svg/33px-LineColor_ChuoRapid.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LineColor_ChuoRapid.svg/44px-LineColor_ChuoRapid.svg.png 2x" data-file-width="500" data-file-height="500" width="22" height="22"></a>
</td>
<td><b>オレンジバーミリオン</b>（国鉄<a href="/wiki/%E6%9C%B1%E8%89%B21%E5%8F%B7" title="朱色1号">朱色1号</a>）
</td></tr>
</table>

{
'京浜東北線・根岸線':'#00B2E5'
'中央線快速 青梅線・五日市線':'#F15A22'
}

現在のコード

import requests
from bs4 import BeautifulSoup
# Webページを取得して解析する

load_url = "https://ja.wikipedia.org/wiki/日本の鉄道ラインカラー一覧"
html = requests.get(load_url)
soup = BeautifulSoup(html.content, "html.parser")
a=[]
# HTML全体を表示する
chap2 = soup.find_all(class_="wikitable")
#chap3=chap2.find_all("td")
for element in chap2:
    for element2 in element.find_all("td"):
        for element3 in element2.find_all("a"):
            a.append("'"+element3.text+"'")
print(a)

Comments

[jeanbiego]

>仕様上難しく、解決策を探りたいです。
具体的な問題点は何ですか？

[kyonmn]

具体的な問題点は、Beautiful soupは仕様上、タグ内部の属性を取得するためのものではない点です。今回はタグ内部の属性データを引き出したいため、scrapyなど他の方法も使おうと調べましたが、結果が出ず分かりませんでした。

[otn]

具体的に何をしたいのかよくわかりません。色情報はどこから取るのですか？

[kyonmn]

「問題」に記述してある通り、例えばHTMLの票タグにある
<td style="background:#00B2E5;"></td>から「#00B2E5」を取り出そうとしています。

Answer 1

タグの属性を取得するのはgetです。

td = tdタグを特定するコード
print(td.get("style")) #=> 'background:#00B2E5;'