如何从HTML源代码中删除样式为display：none的元素

Question

我正在阅读一篇关于如何从blog article抓取IP地址和端口号的4岁http://proxylist.hidemyass.com/。虽然文章未完成且不包含任何代码，但似乎他们描述的混淆技术仍然是HideMyAss使用的那个。

例如，这是与IP地址对应的<span>元素：

<span>
  <style>
    .p6ox{ display:none }
    .arbS{ display:inline }
    .fjtd{ display:none }
    .X9U3{ display:inline }
  </style>
  <span class="31">171</span>
  <span class="X9U3">.</span>
  38
  <span style="display:none">196</span>
  <div style="display:none">196</div>
  <span style="display: inline">.</span>
  <span class="96">66</span>
  <span class="fjtd">223</span>
  <span></span>
  <span class="X9U3">.</span>
  <span style="display: inline">144</span>
</span>

这是Chrome的'Inspect Element'（更清晰）呈现的方式，

，这是渲染的IP地址：

似乎HideMyAss通过将{decoy'<span>个子元素与display:none包含在一起来更难以读取IP地址，这可以通过style属性直接实现或间接指定class {display:none}。

为了消除这种混淆，我正在寻找一种基本上采用HTML和“渲染”的工具，它只是用display:none删除元素。是否已存在任何此类工具？

Answer 1

<script>
const el = document.getElementById('element-to-remove');
const display = window.getComputedStyle(el, null).getPropertyValue('display');
if ( display === 'none' ) el.remove();
</script>

Answer 2

if ( $(element).css('display') == 'none' ){
    $(element).remove();
}

如果您使用javascript修改他们提供的html，您可以遍历每个元素并检查其CSS。

Answer 3

根据Filtering out HTML elements which have 'display:none' either as a tag attribute or in their CSS，这也可以使用Selenium WebDriver以轻松的方式实现。