如何使用JavaScript移除网站中含随机字符的banner相关class与id

嘿，这个问题其实很好解决！虽然JavaScript的remove()方法不能直接用CSS选择器，但咱们可以结合属性选择器和正则表达式来精准定位并移除那些带随机字符但包含banner的class和id，分两步来：

首先，咱们可以用CSS属性选择器[class*="banner" i]先筛选出所有可能包含目标class的元素（i表示忽略大小写）。然后对每个元素，取出它的classList，用正则匹配出符合「若干字符/数字 + (-或_) + banner + (-或_) + 若干字符/数字」格式的class项，最后逐个移除。

代码示例：

// 批量移除所有符合格式的class
document.querySelectorAll('[class*="banner" i]').forEach(element => {
  // 正则规则：匹配 字符/数字 + -/_ + banner + -/_ + 字符/数字 的class
  const targetClassRegex = /[\w\d]+[-_]banner[-_][\w\d]+/i;
  
  // 把classList转成数组，过滤出要移除的class
  const classesToRemove = Array.from(element.classList).filter(cls => targetClassRegex.test(cls));
  
  // 逐个移除目标class
  classesToRemove.forEach(cls => element.classList.remove(cls));
});

小贴士：如果需要更严格的匹配（比如只允许字母数字，不包含下划线），可以把正则里的[\w\d]改成[a-zA-Z0-9]，因为\w默认包含下划线。

处理ID的思路类似，但要注意：HTML规范里一个元素只能有一个ID（不能像class那样多个），但如果遇到不规范的带空格的ID（虽然不推荐），也可以用类似的方法拆分处理。

情况1：规范的单个ID #

用属性选择器[id*="banner" i]筛选元素，然后用正则检查ID是否符合格式，符合就移除ID属性：

// 移除符合格式的单个ID
document.querySelectorAll('[id*="banner" i]').forEach(element => {
  const targetIdRegex = /[\w\d]+[-_]banner[-_][\w\d]+/i;
  
  if (targetIdRegex.test(element.id)) {
    // 移除ID属性
    element.removeAttribute('id');
    // 或者只是清空ID值：element.id = '';
  }
});

情况2：不规范的带空格的ID（不推荐但需兼容） #

如果遇到元素ID带空格（不符合HTML规范，但实际项目中偶尔会出现），可以拆分ID后过滤再重新设置：

// 处理带空格的不规范ID
document.querySelectorAll('[id*="banner" i]').forEach(element => {
  const targetIdRegex = /[\w\d]+[-_]banner[-_][\w\d]+/i;
  
  // 按空格拆分ID项
  const idParts = element.id.split(' ');
  // 过滤掉符合目标格式的ID项
  const remainingIds = idParts.filter(part => !targetIdRegex.test(part));
  
  // 重新设置ID为剩下的项（如果没有剩余就清空）
  element.id = remainingIds.join(' ');
});

这样就能批量处理所有符合你描述格式的class和id了，逻辑和你用CSS选择器的思路完全呼应，只是用正则做了更精准的匹配~

内容的提问来源于stack exchange，提问作者Tần Quảng