从我的 HTML 中删除所有广告代码？

Question

虽然我的 CSS 每天都在改进，但我的 HTML 编码技能略高于新手水平，所以我什至不知道这是否可以做到。虽然我没有 Python、Php、Ruby、Javascript、Perl、Fortran 蜂鸣器！（只是想确保你还是醒着的大家伙）我愿意学习。下面的切片是仅包含其一种样式的 365,937 个字符中的前 970 个字符（0.003%）。我渴望删除的正是这些和其他广告代码墙块：

<style type="text/css">#Ad2, #AdText, #Ad_Top, #Adbanner, #Adfox_Banner, #Ads, #AdvertFieldBottom, #AdvertFieldCenter, #AdvertFieldTop, #Advertisement, #AdvertisingTopLine, #BanHolder28-1, #BannerGBottom, #BannerGCenter, #BannerGIMG, #BannerGTop, #BannerH2Left, #BannerHIMG, #BannerHLeft, #BannerUnderBroChat, #JaboxAdBarOuter, #METABAR_IFRAME, #MarketGidComposite1001, #PopUpWnd, #PopWin, #PopWin_popupsu_notds, #RichBanner_center, #__adIframe, #ad-200, #ad-slides, #ad2, #ad4, #ad7, #adHeadBanner, #adL, #adP, #adWrapper, #ad_help_link, #ad_hide_mask_ad_0, #ad_hide_mask_ad_1, #adbns, #adf_notifiers_wrap, #adsCSS, #advRightBox, #advbroker_place_1, #advbroker_place_10, #advbroker_place_2, #advbroker_place_3, #advbroker_place_4, #advbroker_place_5 { display: none!important; }
#advbroker_place_6, #advbroker_place_7, #advbroker_place_8, #advbroker_place_9, #advertbox, #advertising_floater, #advertisment, #advrich, #advunder-top, #adzerk3, #app-banners, . . .</style>

我经常保存 HTML 页面以供我自己的私人参考，我想知道是否有任何离线¹小部件/应用程序/宏/技术可以用来剥离

1. 文件的广告代码，以及
2. 所有非内容数据代码（脚本、表单、事件等）

我想保留作者页面的视觉风格，但要消除臃肿，我想如果 stackoverflow 上的高水平人才找不到解决方案，那么 没有人 可以。我对正则表达式有基本的了解，除了 Notepad++，我是以下资产的常规用户：

• Macromedia 的 Dreamweaver 8
• 文本板（8.1 版）
• Ultra-Edit-32（版本 13）
• 记事本++
• Nir Sofer 的 magnificent suite of tools
• SysInternals 的（同样）suite of tools

可以吗？感谢大家。 :)

¹出于隐私原因，我想避免使用在线服务

Answer 1

好吧，这很粗略，但正如 Wild Beard 所说，要摆脱这种广告垃圾并不是一个简单的方法。 使用固定间距/等宽字体和带有行号选项的强大文本编辑器（我在 Textpad 中做过，但我很确定 Don Ho 的免费 Notepad++ 可以做到这一点以及）。

1. 保存原始文件的备份！
2. 删除所有自动换行
3. 将所有文本行对齐到左边距
4. 消除所有双倍或更多的垂直间距

您现在应该有一大块文本，左对齐且单行距

5. 在每行的第一个字符位置插入行号，后跟一个制表符
6. 零填充您的数字列，以便您的数字对齐

对第一个字符进行排序，您不希望第 5 行与第 50001 行分组

6. 直观地滚动查看真正冗长的行并开始尝试对其位置进行排序

您正在做的是抓取最长的广告行并将其隔离以进行删除。准备好不止一次这样做。并且不要急于将文档恢复到其原始顺序。这就是你给行编号的原因。

Answer 2

这是一个简单的概念证明。删除元素等或样式后，您仍然需要确定文件的读/写。 Fiddle

但是，就像我在评论中提到的那样，这也将匹配 #additional-info。我确实添加了一个检查以查看该元素是否为 iframe，这应该会缩小错误范围。

var matched_classes = [],
		regex = /(#ad)\w+/gmi,
    style = document.querySelectorAll('style');

style.forEach(function(item) {
	matched_classes = item.innerHTML.match(regex);
});

matched_classes.forEach(function(item) {
	var el = document.getElementById(item.replace('#', ''));
  if ( el != null && el.nodeName === 'IFRAME' ) {
	  el.parentElement.removeChild(el);
  }
});

<style type="text/css">#Ad2, #AdText, #Ad_Top, #Adbanner</style>
<iframe id="Ad2" src="https://www.w3schools.com">

</iframe>

<div id="AdText">Something not removed hopefully.</div>

编辑

正如您在评论中提到的，您不知道如何实现这一点。没有简单易行的方法来做到这一点。您可以开始 here 了解如何使用 javascript 创建文件，但 Javascript 可能不会是您的最佳选择。从您在问题中的语言列表中，Python 可能是您最好的选择，遗憾的是，我不知道 Python。

您可以复制我创建的这段代码并将其粘贴到文件底部，在浏览器中打开文件，查看源代码，复制并保存新文件，因为它应该删除任何带有匹配来自<style> 标签的id。这有点乏味。但是对于没有任何经验的人来说，这可能是您最好的起点——您知道自己写不出完整的解决方案。

<script>
var matched_classes = [],
            regex = /(#ad)\w+/gmi,
        style = document.querySelectorAll('style');

    style.forEach(function(item) {
        matched_classes = item.innerHTML.match(regex);
    });

    matched_classes.forEach(function(item) {
        var el = document.getElementById(item.replace('#', ''));
      if ( el != null && el.nodeName === 'IFRAME' ) {
          el.parentElement.removeChild(el);
      }
    });
</script>

Answer 3

如果您在浏览器的 shadow-root 中发现这些奇怪的样式定义： 这个 CSS 是动态添加到每个网站的 Adguard 广告拦截器。该工具将各种“#banner...”或“#ad...”等设置为“display:none !important”。

https://chrome.google.com/webstore/detail/adguard-adblocker/