基于URL匹配控制元素显隐的JavaScript脚本问题排查

我是编程新手，首次尝试为A/B测试编写可用脚本。我希望元素prodBanEle仅在当前URL包含页面中另外三个元素存储的URL（topBanUrl1、topBanUrl2、topBanUrl3）之一时才显示。

示例：若访问"mywebsite.com/category-grey-pants/product-light-grey-shorts/"，仅当"mywebsite.com/category-grey-pants/"是三个URL之一时，prodBanEle才可见；若当前URL为"mywebsite.com/category-shorts/product-light-grey-shorts/"，则该元素需隐藏。

我不确定indexOf是否支持变量使用，同时怀疑代码存在其他错误，以下是我编写的代码：

$(function(){
    var prodBanEle = document.getElementById("addToCardButtonDiv").getElementsByClassName("banner ")[0];
    var topBanUrl1 = document.getElementById("top_banner_url_1");
    var topBanUrl2 = document.getElementById("top_banner_url_2");
    var topBanUrl3 = document.getElementById("top_banner_url_3");
        if (window.location.href.indexOf(topBanUrl1)){
                prodBanEle.style.display = "block";
        } 
        else if (window.location.href.indexOf(topBanUrl2)){
                prodBanEle.style.display = "block";
        }
        else if (window.location.href.indexOf(topBanUrl3)){
                prodBanEle.style.display = "block";
        }
        else { prodBanEle.style.display = "none";
        }
    }
);

请问代码中存在哪些明显错误？是否可正常运行？

你的代码无法正常运行，存在以下关键问题：

• 未获取DOM元素的实际URL值：topBanUrl1/2/3只是DOM元素对象，不是URL字符串。必须通过textContent（如果是普通文本元素）或value（如果是输入类元素）提取其中存储的URL内容，否则indexOf会把元素对象转为字符串[object HTMLElement]进行匹配，完全不符合需求。
• indexOf判断逻辑错误：indexOf找到匹配子串时返回它的起始索引（>=0），未找到返回-1。直接写if (window.location.href.indexOf(...))会把索引为0的情况（比如URL以目标字符串开头）判定为false，导致逻辑反转。正确的判断应该是indexOf(...) !== -1。
• 类名选择器带多余空格：getElementsByClassName("banner ")里的空格会导致无法匹配类名为banner的元素，需要去掉空格写成"banner"。
• 缺乏错误处理：如果addToCardButtonDiv、banner元素或三个URL元素不存在，代码会直接抛出Cannot read properties of null的错误，导致整个脚本中断。
• 代码冗余：三个else if逻辑重复，可以合并成一个条件，用逻辑或||简化代码。

$(function(){
    // 先获取元素并做存在性判断
    const container = document.getElementById("addToCardButtonDiv");
    const prodBanEle = container ? container.getElementsByClassName("banner")[0] : null;
    const urlEle1 = document.getElementById("top_banner_url_1");
    const urlEle2 = document.getElementById("top_banner_url_2");
    const urlEle3 = document.getElementById("top_banner_url_3");

    // 提取URL字符串，处理元素不存在的情况
    const topBanUrl1 = urlEle1 ? urlEle1.textContent.trim() : "";
    const topBanUrl2 = urlEle2 ? urlEle2.textContent.trim() : "";
    const topBanUrl3 = urlEle3 ? urlEle3.textContent.trim() : "";

    const currentUrl = window.location.href;
    // 判断当前URL是否包含任一目标URL
    const shouldShow = currentUrl.indexOf(topBanUrl1) !== -1 
        || currentUrl.indexOf(topBanUrl2) !== -1 
        || currentUrl.indexOf(topBanUrl3) !== -1;

    // 只有元素存在时才操作显示状态
    if (prodBanEle) {
        prodBanEle.style.display = shouldShow ? "block" : "none";
    }
});

内容的提问来源于stack exchange，提问作者hshop tcarpet