【Python】htmlのテーブル書き換えで意図しない値に置き換わる

Question

実現したいこと

Pythonでhtml内のテーブル（テキスト部分）を、Excelの内容をもとに書き換える

前提

Pythonでhtmlのテーブル内テキスト部分を書き換えるプログラムを作っています。
（具体的にはテーブルは料金表で、既存の価格から新価格へ書き換えるために作成しています。）

openpyxlでExcelを読み込み、A列に記入されている値たち（以下、「書き換えデータ」と記載）をlistに追加。それをpop(0)で取り出してhtml内のテーブルのテキストを書き換えています。
html内の書き換え先検索にはBeautifulSoup4を使用しています。

処理自体はエラー等は出ず、一見問題なく書き換えできているように見えるのですが、正しく置き換えができていない箇所が複数あります。

※実際はExcelは複数シート存在し、各シートに対応するhtmlファイルがシート数分存在しています。

実行環境

• Mac(Monterey)
• Python3

質問内容

• 意図しない置き換えがされる原因と解決策が知りたいです。正しく置き換えができている箇所も多数あり、意図しない置き換えが発生する箇所の原因や法則性もわからず困っています。（ただし再現性はあります。）

発生している問題

処理自体はエラー等は出ず、一見問題なく書き換えできているように見えるのですが、正しく置き換えができていない箇所が複数あります。

書き換えが正しくできていない箇所は以下の３つのうちどれかしらに当てはまっています。
（３つ全てが同じ原因で起きているのかは現状わかりません。）

また、試したことの項目で記載していますが、Pythonコードの47行目のreplaceの処理で意図しない値に置き換わっていることまではわかっています。

① 書き換えデータのリストで後ろに格納されている値が、想定より前の箇所で書き換えられる。

ex)以下のテーブルを書き換えデータで書き換えたい
<td> a </td>
<td> b </td>
<td> c </td>
<td> d </td>

書き換えデータ[e, f, g, h ]

○処理結果○
<td> e </td>
<td> h </td> //fで置き換えたいところ、hで置き換えられてしまう
<td> g </td>
<td> h </td>

② 書き換え後の値の一部が、2進数表記の下3桁に変換される。
今のところ4桁の値では起きたことがなく、5桁の場合のみ発生する。
ただし全ての5桁の値がこのように置き換えられるわけではなく、一部の値のみ発生する。

ex)

書き換えたい値	実際の書き換え結果
23,920	111,920
22,070	110,070

③ 書き換え後の値の一部が想定とは異なる値に書き換えられる（書き換えデータのリストには存在しない値）
具体的には下3桁目以降が想定より±2 or ±3ずれる。

ex)

書き換えたい値	実際の書き換え結果
20,230	18,230

該当のソースコード

from bs4 import BeautifulSoup
import openpyxl
import glob
import os
import shutil
import tkinter
import tkinter.filedialog
from natsort import natsorted

def replace_a_tag_text(html_file, new_file , ws , column_index):

    # 最終行を取得する
    maxRow = ws.max_row + 1
    maxClm = ws.max_column + 1

    #行を逆ループ
    for j in range(1,maxClm):
        # 列の指定
        if j == column_index:
            for i in reversed(range(1,maxRow)):
                if ws.cell(row=i, column=j).value != None:
                    last_row = i
                    break
    
    # リストを初期化
    data = []

    # 1行ずつ読み取る
    for row in range(1, last_row + 1):
        # 指定した列の値を取得する
        value = ws.cell(row, column_index).value
        # リストに追加する
        data.append(value)

    # htmlファイルを読み込み
    with open(html_file, "r",encoding='UTF-8') as f  , open(new_file, "w") as nf:

        rep_html = f.read()
        soup = BeautifulSoup(rep_html, 'html.parser')

        #書き換え候補を探し、置き換える
        for a_tags in soup.tbody.select('tr a'):
            a_tags_text = a_tags.get_text(strip=True)
            # 書き替えるテキストを取得する
            replace_text = data.pop(0)
            # 書き替えを実行
            rep_html = rep_html.replace(a_tags_text,str(replace_text))

        nf.write(rep_html)    


if __name__ == "__main__":

    column_index = 1

    #書き換えの時に参照したいエクセルを選択させる★GUI
    idir = '/Users/XXXXXX/Desktop/kakikae_test'
    excel_file = tkinter.filedialog.askopenfilename(
        initialdir = idir,
        title = "参照したいExcelを選択")

    #処理したいフォルダを選択させる★GUI
    html_folder = tkinter.filedialog.askdirectory(
        initialdir = idir,
        title = "書き換えたいhtmlファイルを含むフォルダを選択")
    
    # 処理したいディレクトリに移動
    os.chdir(html_folder)

    #書き換え先のnewフォルダを作る
    os.mkdir('./new')

    # フォルダ内の全てのHTMLファイルを読み込む
    html_files = natsorted(glob.glob('*.html')) 

    #シート数=HTMLファイル数を管理するためのカウント番号をリセット
    cnt = 0

    # Excelファイルを読み込む
    wb = openpyxl.load_workbook(excel_file)
    
    # シートごとの処理
    for ws in wb.worksheets:
        print("シート名:" + str(ws))
        
        #書き換え元のhtmlを設定
        html_file = html_files[cnt]

        # 書き換えた後のhtmlファイルを設定(元のhtmlファイルをnewフォルダ内にコピー)
        new_file = shutil.copy2( html_file , './new')

        # データを書き替える
        replace_a_tag_text(html_file, new_file , ws , column_index)

        #htmlファイルのカウントを進める
        cnt = cnt + 1
    
    wb.close()

・
・
・
# テーブル内の値は適当です
<tbody>
  <tr>
    <th class="title">tableA</th>
    <td><a href="XXXXXXX"> 3,580 </a></td>
    <td><a href="XXXXXXX"> 2,480 </a></td>
    <td><a href="XXXXXXX"> 2,250 </a></td>
    <td><a href="XXXXXXX"> 2,020 </a></td>
  </tr>
  <tr>
    <th class="title">tableB</th>
    <td><a href="XXXXXXX"> 4,570 </a></td>
    <td><a href="XXXXXXX"> 4,210 </a></td>
    <td><a href="XXXXXXX"> 3,850 </a></td>
    <td><a href="XXXXXXX"> 3,500 </a></td>
  </tr>
  <tr>
    <th class="title">tableC</th>
    <td><a href="XXXXXXX"> 4,570 </a></td>
    <td><a href="XXXXXXX"> 4,210 </a></td>
    <td><a href="XXXXXXX"> 3,850 </a></td>
    <td><a href="XXXXXXX"> 3,500 </a></td>
  </tr>
  <tr>
    <th class="title">tableD</th>
    <td><a href="XXXXXXX"> 4,570 </a></td>
    <td><a href="XXXXXXX"> 4,210 </a></td>
    ・
    ・
    ・
</tbody>
・
・
・

試したこと

• 書き換え実行（rep_html=~~）の直前で、 a_tags_text、replace_textをprint()で出力

→問題なく想定通りExcelの書き換えデータの値がそのまま出力されていることを確認しました。

• 書き換え実行（rep_html=~~）とhtml書き出し（nf.write(rep_html)）の間でrep_htmlを出力

→発生している問題の項目で記載した、想定しない置き換えがされたhtmlが出力されることを確認しました。

• htmlファイルのopenの際に指定したencodingが悪さしているのかと思い、付けたり外したりしてみるものの処理結果に変化ありませんでした。

[追記]
Excelのシート数分だけhtmlファイルを書き換えたところ、意図しない置き換えがされている箇所や個数はまちまちでした。

---

質問内容は以上となります。
回答のために不足している情報がありましたら追記致します。

Pythonでこういったプログラムを作成するのは初めてで、プログラム自体変な書き方をしているかもしれません；
問題についても色々と調べてみたものの、1週間以上原因・解決に辿り着けないため、お力をお貸しいただけますと幸いです。よろしくお願いいたします。

Answer 1

rep_html.replace(...) としてしまうと、HTML ファイルの内容全体を対象にして置換を実行してしまうことになります。書き換えるのは tr 要素内にある a 要素のテキスト部分なので、bs4.element.Tag.string を置き換えます。以下は簡略化した実行例です。

from bs4 import BeautifulSoup

html_file = 'input.html'
new_file = 'output.html'
data = ['e', 'f', 'g', 'h']

with open(html_file, "r",encoding='UTF-8') as f, open(new_file, "w") as nf:
    rep_html = f.read()
    soup = BeautifulSoup(rep_html, 'html.parser')

    #書き換え候補を探し、置き換える
    for a_tags in soup.tbody.select('tr a'):
        # a_tags_text = a_tags.get_text(strip=True)
        # 書き替えるテキストを取得する
        replace_text = data.pop(0)
        # 書き替えを実行
        a_tags.string = replace_text
        # rep_html = rep_html.replace(a_tags_text,str(replace_text))

    nf.write(str(soup))

input.html

<table>
<tbody>
<tr>
<td><a> a </a></td>
<td><a> b </a></td>
<td><a> c </a></td>
<td><a> d </a></td>
</tr>
</tbody>
</table>

output.html

<table>
<tbody>
<tr>
<td><a>e</a></td>
<td><a>f</a></td>
<td><a>g</a></td>
<td><a>h</a></td>
</tr>
</tbody>
</table>

Comments

[comacom]

ご回答ありがとうございます！
そもそものbeautifulsoupの使い方・置き換え方がいまいちだったのですね；

修正・実行してみたところ書き換えたい箇所は問題なく置き換えができてうまくいったのですが、
それ以外の関係ない部分のクラスやidの要素の順序が全体的に入れ替わったり、brタグに/が追加されてしまいました。。。
これは何が原因なのでしょうか？
抽出の指定をした<tr>タグ内の<a>タグは該当のテーブル部分にしかないことは確認済みです。

ex)
<meta name="〇〇" content="△△" />　→　<meta content="△△" name="〇〇" >

<img src="〇〇" width="XX" height="XX" alt="△△">　
→<img alt="△△" height="XX" src="〇〇" width="XX">

<br>→<br/>
など

[comacom]

↑のコメントの
<meta name="〇〇" content="△△" />の/はミスです、無視してください。

[melian]

タグの属性の順序に関しては、BeautifulSoup の内部では辞書順でソートされています。 <br/> に関しては XHTML 時代の名残りです。どちらにしても、HTML 要素としての意味に違いがあるわけではありませんが、元の HTML ファイルの内容と同一の順序でないと問題があるのでしょうか？

[comacom]

なるほど、BeautifulSoup内で自動的にソート・brについては補完されるのですね。
無知でした、ありがとうございます。

属性順序が入れ替わってもHTMLの意味としては同様というのは承知しているのですが、今回書き換えを行わない他のhtmlファイルのコーディングルールと揃っていた方が（見た目としても差分管理等の面でも）少し嬉しいな、という思いがありまして・・・
とはいえ、ソートされるのはbs4の仕様とのことなのでその点は目を瞑ったほうが良さそうですね。

ありがとうございました！