按正则表达式阻止 div

Question

假设我想删除 example.com 上的 div，但网站使用随机 div classes 匹配正则表达式 /[0-9a-z ]{12}/（并在每次重新加载页面时更改）。

两个（相关）问题：

首先，我如何删除每个 div 与 class 匹配的模式？每个 div 看起来像：

<div class="0123456789ab" ... > ... </div>

其次，如何删除与已知模式匹配的特定 div（在以下代码段中说“底部”）？

<div class="0123456789ab" style="bottom: 0px; position: fixed; justify-content: center;">

[...]

</div>

提前致谢。

Answer 1

对于第一部分，您只需遍历所有 <div> 个元素并匹配它们的 class 个名称：

  const divs = document.querySelectorAll("div");
  const regex_className = /^[0-9a-z]{12}$/i;
  // for each div
  for(const div of divs) {
    for(const className of div.classList) {
      // if one of the class names matches the regex
      if(regex_className.test(className)) {
        // do something with div
        console.log(div);
        // do not process this div again for more class names
        break;
      }
    }
  }

要额外检查内联样式，您可以只使用 getAttribute 方法，该方法为您提供属性的字符串值：

  const divs = document.querySelectorAll("div");
  const regex_className = /^[0-9a-z]{12}$/i;
  const regex_inlineStyle = /^bottom/i;
  
  const checkInlineStyle = (divToCheck, styleRegex) => {
    // check if any value is present, if not then we certainly have no match
    if(divToCheck.hasAttribute("style")) {
      return styleRegex.test(divToCheck.getAttribute("style"));
    }
    return false;
  };
  
  // for each div
  for(const div of divs) {
    for(const className of div.classList) {
      // if one of the class names matches the regex
      if(regex_className.test(className) && checkInlineStyle(div, regex_inlineStyle)) {
        // do something with div
        console.log("Found div",div);
        // do not process this div again for more class names
        break;
      }
    }
  }

按正则表达式阻止 div

Blocking div by regex

javascript

userscripts