如何纯净浏览知乎网页文章——利用JavaScript删除页面元素(附直接运行脚本)
javascript:(function(){const s=['.css-lgijre','.Post-Row-Content-right','.ContentItem-actions','.css-u76jt1','.css-1fo89v5','.CornerAnimayedFlex','.ContentItem-time','.Post-Sub','.Recommendations-Main'];let r=0;s.forEach(e=>{document.querySelectorAll(e).forEach(t=>{t.remove(),r++,console.log(`已删除:${e}`)})});console.log(`🎉 已完成!共删除了${r}个元素`);alert(`已删除${r}个指定元素!`)})();
JavaScript书签注入方法,在打开文章页面后点击书签。
或控制台运行下方脚本:
// 知乎页面元素删除脚本(包含推荐阅读)
function removeZhihuElements() {
// 定义要删除的元素选择器数组
const selectorsToRemove = [
'.css-lgijre', // 第一个:顶部导航栏
'.Post-Row-Content-right', // 第二个:关于作者侧边栏
'.ContentItem-actions', // 第三个和第八个:底部操作栏
'.css-u76jt1', // 第四个:评论区域
'.css-1fo89v5', // 第五个:评论输入框
'.CornerAnimayedFlex', // 第六个:回到顶部按钮
'.ContentItem-time', // 第七个:发布时间
'.Post-Sub', // 第九个:推荐阅读模块
'.Recommendations-Main' // 推荐阅读的另一种选择器
];
let removedCount = 0;
selectorsToRemove.forEach(selector => {
const elements = document.querySelectorAll(selector);
elements.forEach(element => {
element.remove();
removedCount++;
console.log(`已删除:${selector}`);
});
});
console.log(`🎉 已完成!共删除了${removedCount}个元素`);
return removedCount;
}
removeZhihuElements();
即可
此方法可以快速通过截图得到知乎文章的pdf形式。
代码解释
本质是利用CSS 选择器定位元素然后进行删除。
- CSS 选择器 是一种语法,用于精确描述页面中元素的位置或特征(比如类名、ID、标签名等)。例如:
.className匹配所有带有class="className"的元素(类选择器,最常用)。#idName匹配带有id="idName"的元素(ID 选择器)。div匹配所有<div>标签元素(标签选择器)。
对于元素特征,只需利用浏览器的开发者工具(F12)选中特定元素即可。
然后用 DOM API 查找元素:document.querySelectorAll(selector)
这个会返回所有匹配的元素的集合。
然后用forEach循环逐一执行事件element.remove()
书签的使用方法
书签注入法复写JavaScript是一种在浏览器环境中,通过书签工具(Bookmarklet)注入自定义代码,从而覆盖或修改网页原有JavaScript函数的技术。其核心原理是利用*浏览器书签的javascript:协议,将待执行的代码封装为可点击的书签,在目标网页上下文执行时,优先覆盖网页中原有的函数定义或事件绑定,从而绕过网页的功能限制(如禁用粘贴、右键等)。 具体来说,当用户点击书签时,封装的代码会在网页的全局作用域中运行,通过重写目标函数(如init_no_paste)或解除事件绑定(如document.onpaste),提前拦截网页原有的限制逻辑,使被禁用的功能(如粘贴)恢复正常。这种方法无需修改网页源码,仅通过浏览器自带的书签功能即可实现对JavaScript逻辑的动态复写,是前端调试和功能解锁的轻量型实用技巧。
Chrome 浏览器书签添加方法:



收录于知乎专栏「js逆向实例」· 查看知乎原文