過去にも似たような質問を投稿したのですが、また行き詰ってしまったため教えてください。
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";
});
}
よろしくお願いします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
こんにちは
横からですが・・・
チェックしたい「トップ」というのが、例えば
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";
});
}
No.2
- 回答日時:
> うまくいきません
原因追究しましょう
例)
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";
});
}
No.1
- 回答日時:
条件を整理しましょう
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";
});
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードを教えてください 2 2023/04/27 17:58
- JavaScript [再掲]指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードについて 1 2023/05/10 15:09
- JavaScript JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えてほしいです 2 2023/08/25 21:43
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript 【急募】選択した物件と施設の距離をランキング&条件によって画像表示を変更する方法。 2 2021/12/24 07:08
- その他(プログラミング・Web制作) Pythonで会員サイトの自動ログイン ID Nameがない 1 2022/12/16 02:09
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない 2 2023/12/18 18:12
このQ&Aを見た人はこんなQ&Aも見ています
-
「どうして捨てられないの?」前妻の物を捨てられない男性の心理って?
前妻の物を捨てられない理由に加え、捨てるための手段はあるのかを専門家に聞いてみた!
-
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
プログラミング言語の制作方法について
C言語・C++・C#
-
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
-
4
ボタンが押されたらWebページの文字コードを 変える、というプログラミングを書きたいです。 目的は文
HTML・CSS
-
5
コードレビューをお願いします。
JavaScript
-
6
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
7
【JavaScript?HTML?】Webページでこのページは戻ることは出来ませんと表
JavaScript
-
8
HTMLで画像をポップアップで表示するようにする方法
HTML・CSS
-
9
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
10
HTMLでstyleを指定するフォームの作り方
HTML・CSS
-
11
Cookieに保存されない
JavaScript
-
12
PHPでのパスワード制限のセキュリティはどうなのか
PHP
-
13
disabled プロパティが表示されない原因が分からない
JavaScript
-
14
htmlの修正方法を教えていただきたいです。
HTML・CSS
-
15
React hooksが値を返して配列変数に格納するメカニズム
JavaScript
-
16
javascriptの値をformのinput hiddenに入れたい
JavaScript
-
17
c#のTLS1.2での通信について
C言語・C++・C#
-
18
次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。
Java
-
19
htmlのエラーについて(デバッグ)
PHP
-
20
PythonのTkinter詳しい方へ。画像や言葉の意味を答える3択クイズを作るのに手間取っています
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
どこからも呼ばれていない無意...
-
java eclipse 型に解決できません
-
同一パッケージにあるクラスが...
-
CListCtrlクラスに初期化する関...
-
グローバルIPとプライベートIP...
-
クラスのプロパティに構造体を...
-
自作のクラスファイルがインポ...
-
eclipse でクラスに色
-
IPアドレスのクラスAを取得して...
-
JAVAで他ライブラリのクラスを...
-
[C++/CLI]可変個引数について
-
1 つのヘッダファイルに複数の...
-
エクセルのデータ振り分け方法...
-
内部クラス?のエラー
-
配列の重複する値とその個数を...
-
河合塾のクラス分けについて
-
クラスの衝突
-
JSPからJavaクラスを参照できな...
-
「天声人語」をインターネット...
-
EclipseでJSPのコンパイルエラー
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
配列の重複する値とその個数を...
-
「天声人語」をインターネット...
-
java eclipse 型に解決できません
-
グローバルIPとプライベートIP...
-
ポータブル電源を買おうと思う...
-
容姿について
-
自作のクラスファイルがインポ...
-
どこからも呼ばれていない無意...
-
UMLのクラス図はmain()も含むん...
-
同一パッケージにあるクラスが...
-
main()を持つクラスが2つ以上...
-
1 つのヘッダファイルに複数の...
-
アルキメデスの大戦の櫂はなぜ2...
-
dllと同じプロジェクトにする方法
-
IPアドレスの3バイト目の呼び方
-
3年間同じクラスになる確率
-
重複エラーを解決するには
-
同じパッケージ、クラス名が含...
-
コンボボックスのマウスホイー...
-
共通で使う関数を集めたクラス...
おすすめ情報