Chrome中如何通过JS或jQuery实现网页加载时仅保留指定内容

完全可以实现，优先推荐无依赖的原生JS方案，比常规遍历删除元素的逻辑效率更高、不会出现漏删的情况。

原生JS实现（最优，无第三方依赖） #

核心逻辑是先提取克隆目标元素，再清空整个页面后回插目标元素，彻底清理所有无关的脚本、样式、DOM节点，避免嵌套元素误删、漏删的问题。

// DOM加载完成后执行，若目标元素为异步渲染，可将逻辑放到异步回调内触发
document.addEventListener('DOMContentLoaded', () => {
  // 替换为你需要保留的元素class名
  const targetClass = 'someone';
  // 查找所有符合要求的目标元素
  const keepNodes = document.querySelectorAll(`.${targetClass}`);
  // 用文档碎片暂存克隆的目标元素，避免多次操作DOM
  const fragment = document.createDocumentFragment();
  keepNodes.forEach(node => {
    // 深克隆保留元素内部所有子节点和内容
    fragment.appendChild(node.cloneNode(true));
  });
  // 清空页面所有内容
  document.head.innerHTML = '';
  document.body.innerHTML = '';
  // 回插保留的元素
  document.body.appendChild(fragment);
  // 可选：添加基础样式模拟只读模式，提升可读性
  Object.assign(document.body.style, {
    padding: '24px',
    maxWidth: '1200px',
    margin: '0 auto',
    fontFamily: 'system-ui, sans-serif'
  });
});

jQuery实现方案 #

如果项目本身已经引入jQuery，可以用以下写法：

$(document).ready(function() {
  const targetClass = 'someone';
  // 克隆所有目标元素
  const keepEls = $(`.${targetClass}`).clone(true);
  // 清空全页内容
  $('head, body').empty();
  // 回插目标元素
  $('body').append(keepEls);
  // 可选只读样式
  $('body').css({
    'padding': '24px',
    'max-width': '1200px',
    'margin': '0 auto'
  });
});

常见失效原因说明 #

之前参考的方案未生效大概率是因为用了遍历筛选删除的逻辑，比如$(':not(.someone)').remove()，这类写法存在两个问题：

• 只会删除直接匹配的节点，嵌套在其他父元素内的目标元素会跟随父节点被一起删除
• 无法清理head内的脚本、样式等无关内容，残留的脚本可能还会修改页面内容

内容的提问来源于stack exchange，提问作者RKS