［再掲］JavaScript｜特定URLだった時、特定の要素を変更するコードの書き方を教えて下さい

過去にも似たような質問を投稿したのですが、また行き詰ってしまったため教えてください。

URLのなかに/bbb/または/cccc/という文字列が一致したときに、そのページ内の.bottom_btn, .fixed_btnのクラスが付与されている要素に対して非表示にする、というコードが以下の記述になるのですが、この条件にトップページも加えたいのですが上手くいかず困ってます。

やりたいこととしては、トップ（/）も/bbb/も/cccc/も.bottom_btn, .fixed_btnのクラスが付与されている要素は非表示にしたいです。


▼変更前
if (new RegExp("/bbb/|/cccc/").test(location.pathname)) {
document.querySelectorAll(".bottom_btn, .fixed_btn").forEach(e => {
e.style.display = "none";
});
}

以下が変更後のコードになります。どこが間違っているのかご指摘いただけないでしょうか。

▼変更後
if (new RegExp("/|/bbb/|/cccc/").test(location.pathname)) {
document.querySelectorAll(".bottom_btn, .fixed_btn").forEach(e => {
e.style.display = "none";
});
}

よろしくお願いします。

No.3 回答者： fujillin 回答日時： 2023/12/26 14:47

こんにちは

横からですが・・・

チェックしたい「トップ」というのが、例えば
　https://hogehoge.com/
のようなURLであるなら、No1様の回答の通りでできるはずです。
この場合であれば、location.pathname は「/」となるはずですので。

もしも、チェックなさりたい「トップ」というのが、
　　https://hogehoge.com/fuga/
のような場合だと、「/」のみにはならないので、
> うまくいきません
となりますけれど・・・

「できた/できない」という2値情報だけでは何も進展しません。
何をチェックしたいのかをきちんと明示すれば、適切な回答を得られると思いますよ。

この回答へのお礼

何から質問してよいのやらで説明不足ですみません。
ご指摘いただいたトップとは、https://hogehoge.com/ という意味でした。以下のコードでうまくいきました。
if (
new RegExp("/bbb/|/ccc/").test(location.pathname) ||
location.pathname === "/"
) {
document.querySelectorAll(".bottom_btn, .fixed_ban").forEach(e => {
e.style.display = "none";
});
}

お礼日時：2023/12/26 18:12

No.2 回答者： Ogre7077 回答日時： 2023/12/26 13:49

> うまくいきません

原因追究しましょう

例)
URL内の判定部分 = location.pathname;
判定した結果 = 正規表現.test(URL内の判定部分);
console.debug("特定URLか判定", URL内の判定部分, 判定した結果);

この回答へのお礼

ご丁寧にご説明いただきありがとうございます。
以下のコードでうまくいきました。
if (
new RegExp("/bbb/|/ccc/").test(location.pathname) ||
location.pathname === "/"
) {
document.querySelectorAll(".bottom_btn, .fixed_ban").forEach(e => {
e.style.display = "none";
});
}

お礼日時：2023/12/26 18:12

No.1 回答者： Ogre7077 回答日時： 2023/12/25 23:49

条件を整理しましょう

URL のパス部分の何処かに "/bbb/" が含まれている
または
URL のパス部分の何処かに "/ccc/" が含まれている
または
URL のパス部分が "/" である

条件を単純に実装すると
path = location.pathname
path.includes("/bbb/") || path.includes("/ccc/") || path == "/"

条件に一致する正規表現ならば
^(.*/bbb/.*|.*/ccc/.*|/)$

この回答へのお礼

ご回答ありがとうございます。

教えていただいた正規表現を入れて試してみたのですが、うまくいきませんんでした。書き方が間違っているのでしょうか。

if (new RegExp("^(.*/bbb/.*|.*/ccc/.*|/)$").test(location.pathname)) {
document.querySelectorAll(".bottom_btn, .fixed_btn").forEach(e => {
e.style.display = "none";
});
}

お礼日時：2023/12/26 09:54