如何从DevTools复制元素时避免&符号被转义？

以下是几种实用的解决方法：

• 控制台直接提取原始HTML
  选中目标元素后，在DevTools控制台输入$0.outerHTML，右键点击输出的结果选择「复制」，这样得到的是元素的原始HTML，不会把&转义成&。
  如果需要批量提取多个元素，可用选择器批量获取后输出：

// 示例：获取所有class为target的元素并输出原始HTML
$$('.target').forEach(el => console.log(el.outerHTML))

直接复制控制台里的输出内容即可。

• 自定义脚本一键复制还原后的HTML
  如果复制后还是出现转义，可在控制台运行以下脚本，直接把还原后的原始HTML复制到剪贴板：

// 针对当前选中的元素
const rawHtml = $0.outerHTML.replace(/&/g, '&');
navigator.clipboard.writeText(rawHtml);
console.log('原始HTML已复制到剪贴板');

批量处理的话，调整脚本即可：

// 批量获取并复制所有目标元素的原始HTML（用换行分隔）
const rawHtmlList = $$('.target').map(el => el.outerHTML.replace(/&/g, '&'));
navigator.clipboard.writeText(rawHtmlList.join('\n'));
console.log('批量原始HTML已复制到剪贴板');

• 安装专用扩展
  可以安装如「Copy HTML Text」这类浏览器扩展，安装后选中目标元素，点击扩展按钮就能直接复制未转义的原始HTML源码，无需手动处理转义问题。

内容的提问来源于stack exchange，提问作者Dave R.