✅FirefoxでAmazonのページが動かない

2025/9/14

再現方法

問題の正体

Chrome

Unicode制御文字あり: 出版社 : 一迅社 (2022/4/27)

文字コード: " " (32), "" (8207), " " (32), ":" (58),

" " (32), "" (8206), " " (32)

Firefox

Unicode制御文字なし: 出版社 : 一迅社 (2022/4/27)

文字コード: " " (32), " " (32), ":" (58), " " (32)

結果

Chrome: 現在の正規表現 false、修正版正規表現 false →

実はChromeでも動いていない

Firefox: 現在の正規表現 false、修正版正規表現 true → 修正版なら動く

真実

1. 現在のコードはChromeでも実際は動いていない

2. Firefoxでは修正版正規表現で動く

3. Chromeにはさらなる対応が必要

ChromeでもFirefoxでも両方動くようにするには、両方のパターンに対応した正規

表現が必要ですね。

ChromeとFirefoxのinnerText実装の違いが原因

実際の違い

Chrome の innerText

出版社 : 一迅社 (2022/4/27)

文字コード:

code:zsh

Firefox の innerText

出版社 : 一迅社 (2022/4/27)

文字コード:

Unicode制御文字が除去され、通常のスペースのみ

Unicode制御文字とは

U+200E (LTR Mark) と U+200F (RLM Mark) は：

見た目には表示されない制御文字

文字の読み方向を指定するために使用

ブラウザ実装の差異

Firefox (Gecko)

HTMLからinnerText取得時、Unicode制御文字をそのまま保持

より「生」のテキスト内容を返す

Chrome (WebKit/Blink)

HTMLからinnerText取得時、Unicode制御文字を正規化・除去

よりクリーンな表示用テキストを返す

W3C仕様との関係

innerTextの仕様では制御文字の扱いが曖昧で、ブラウザ実装に依存する部分があります

検証コード

code:js

const publisherRows = productDetails.filter((i) =>

i.innerText.includes("出版社"));

// 文字コード確認

console.log("文字コード詳細:");

for (let i = 0; i < publisherRow.innerText.length; i++) {

}

// 正規表現テスト

const regex1 = /出版社\s : \s(.*) \(.*\)/;

console.log("現在の正規表現:", regex1.test(publisherRow.innerText));

console.log("修正版正規表現:", regex2.test(publisherRow.innerText));

firefox

code:sh

文字コード詳細: debugger eval code:8:13

現在の正規表現: false debugger eval code:17:13

修正版正規表現: true

chrome

code:sh

文字コード詳細: