如何用JavaScript在URL含特定文本时隐藏多个指定ID元素

问题背景 #

原有代码仅能针对单个ID元素，当URL包含指定文本时执行隐藏操作，现在需要优化为支持同时处理多个元素ID，且为目标元素添加visibility: hidden样式。原代码如下：

<script type="text/javascript">
  var url = window.location.href;
  var msg = document.getElementById('thisid');
  // Check if URL contains the keyword
  if( url.search( 'thisword' ) > 0 ) {
      msg.style.display = "none";
  }
</script>

优化后的完整代码 #

<script type="text/javascript">
  const url = window.location.href;
  const targetKeyword = 'thisword';
  // 配置需要处理的元素ID列表
  const targetElementIds = ['something', 'something-else', 'another-thing', 'yet-another'];

  // 检查URL是否包含目标关键词
  if (url.includes(targetKeyword)) {
    targetElementIds.forEach(id => {
      const element = document.getElementById(id);
      if (element) {
        // 应用隐藏样式
        element.style.display = 'none';
        element.style.visibility = 'hidden';
        // 若不需要绿色边框可删除此行
        element.style.borderColor = 'green';
      } else {
        console.warn(`未找到指定ID的元素: ${id}`);
      }
    });
  }
</script>

关键优化点 #

• 用url.includes()替代url.search()，逻辑更直观，且现代浏览器兼容性更好
• 将关键词、目标ID列表单独提取为变量，便于后续修改维护
• 遍历ID列表时先判断元素是否存在，避免触发空指针报错
• 修正了原尝试代码中console.warn的变量错误：输出找不到的id而非element
• 同时设置display: none和visibility: hidden，两者区别：
  • display: none：元素完全脱离文档流，不占据页面空间
  • visibility: hidden：元素仅视觉隐藏，仍保留原有页面占位

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