WooCommerce产品页按钮'.com'隐藏代码失效致文本为空，求排查

我在WooCommerce中使用联盟产品，后台通过短码Buy at %Domain%自动在每个产品上显示类似“Buy at domain.com”的内容。因.com显示异常且拖慢页面加载，我采用CSS加脚本处理这段文本，此前运行正常，但现在按钮文本直接为空，不清楚问题出在哪。

以下是我尝试的两段代码：

第一段代码 #

.gspb_id-gsbp-f2fd5af a {
  visibility: hidden;
}
.gspb_id-gsbp-f2fd5af a.completed {
  visibility: visible;
}

window.addEventListener("load", function () {
  const linkEls = document.querySelectorAll(".gspb_id-gsbp-f2fd5af a");
  linkEls.forEach((el) => {
    if (el.innerHTML.includes(" at ")) {
      el.innerHTML = el.innerHTML.replaceAll("number_format_thousands_sep",",").replaceAll("number_format_decimal_point",".");

      let arr = el.innerHTML.split(" at ");
      arr[0] = arr[0].replace(/\..+/, "").replace(/,/g, "");
      arr[1] = arr[1].replace(/\.com/, "");
      el.innerHTML = arr.join(" at ");
      el.classList.add("completed");
    }
  });
});

第二段尝试的代码（未生效） #

.gspb_id-gsbp-f2fd5af a {
  visibility: visible; /* 默认可见 */
}
.gspb_id-gsbp-f2fd5af a.hide-text {
  visibility: hidden; /* 添加类后隐藏文本 */
}

window.addEventListener("load", function () {
  const linkEls = document.querySelectorAll(".gspb_id-gsbp-f2fd5af a");
  linkEls.forEach((el) => {
    if (el.innerHTML.includes(" at ")) {
      el.innerHTML = el.innerHTML.replaceAll("number_format_thousands_sep", ",").replaceAll("number_format_decimal_point", ".");
      let arr = el.innerHTML.split(" at ");
      arr[0] = arr[0].replace(/\..+/, "").replace(/,/g, "");
      arr[1] = arr[1].replace(/\.com/g, "");
      el.innerHTML = arr.join(" at ");
      el.classList.add("hide-text"); // 添加类隐藏文本
    }
  });
});

问题分析与修复方案 #

• 文本为空的核心原因：

  1. 第一段代码默认将所有目标a标签设为visibility: hidden，仅添加completed类才显示。若脚本执行失败（比如元素未加载完成、未匹配到at文本），元素会一直处于隐藏状态，视觉上表现为文本为空。
  2. 第二段代码逻辑完全倒置：处理完文本后主动添加hide-text类，直接将按钮文本隐藏，必然导致按钮为空。

• 修正后的代码示例：

/* 初始隐藏避免文本闪烁，处理完成后显示 */
.gspb_id-gsbp-f2fd5af a {
  visibility: hidden;
}
.gspb_id-gsbp-f2fd5af a.processed {
  visibility: visible;
}

// 改用DOMContentLoaded确保元素加载完成就执行
document.addEventListener("DOMContentLoaded", function () {
  const linkEls = document.querySelectorAll(".gspb_id-gsbp-f2fd5af a");
  linkEls.forEach((el) => {
    // 先处理占位符替换
    let text = el.innerHTML.replaceAll("number_format_thousands_sep", ",").replaceAll("number_format_decimal_point", ".");
    
    // 处理文本格式
    if (text.includes(" at ")) {
      let [prefix, domain] = text.split(" at ");
      // 清理前缀多余内容（按需调整规则）
      prefix = prefix.replace(/\..+/, "").replace(/,/g, "");
      // 移除.com（忽略大小写适配更多场景）
      domain = domain.replace(/\.com/i, "");
      // 重新拼接文本
      el.innerHTML = `${prefix} at ${domain}`;
    }
    // 强制添加类显示按钮，避免因匹配失败导致永久隐藏
    el.classList.add("processed");
  });
});

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