如何在JS中将HTMLElement转换为浏览器复制所得的文本？

问题里的innerText输出和手动复制结果不一致，核心原因是**innerText不会读取元素伪元素（比如:before/:after）生成的内容**，而手动复制时浏览器会包含这部分内容。要拿到和手动复制完全一致的字符串，可以试试下面两种方案：

方案一：直接读取伪元素内容 #

如果:maam:是通过伪元素（比如:after）生成的，用getComputedStyle直接获取伪元素的内容：

const targetEl = document.querySelector('你的元素选择器');
// 获取:after伪元素的内容
const pseudoContent = window.getComputedStyle(targetEl, ':after').content;
// 去除内容自带的引号
const cleanContent = pseudoContent.replace(/["']/g, '');
// 拼接原文本和伪元素内容
const fullText = `${targetEl.innerText.trim()} ${cleanContent}`;

方案二：模拟浏览器复制流程 #

通过创建临时元素克隆目标元素的样式和内容，再模拟选中复制的过程来获取完整文本：

function getCopyableText(element) {
  const tempDiv = document.createElement('div');
  // 继承目标元素的所有样式，确保伪元素生效
  tempDiv.style.cssText = window.getComputedStyle(element).cssText;
  // 克隆目标元素到临时容器
  tempDiv.appendChild(element.cloneNode(true));
  document.body.appendChild(tempDiv);

  // 选中临时容器的所有内容
  const range = document.createRange();
  range.selectNodeContents(tempDiv);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  // 执行复制并获取选中的文本
  document.execCommand('copy');
  const fullText = selection.toString();

  // 清理临时内容
  selection.removeAllRanges();
  document.body.removeChild(tempDiv);

  return fullText;
}

// 使用示例（需在用户交互事件中调用，比如点击事件）
const targetElement = document.querySelector('你的元素选择器');
const result = getCopyableText(targetElement);
console.log(result);

注意：第二种方案必须在用户触发的交互（如click事件回调）里执行，否则浏览器会拦截剪贴板操作。

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