如何修复HTML中<pre>标签内容复制时转义字符异常问题？

标签内容复制时HTML实体转义的问题 #

核心原因是直接获取

的innerHTML会拿到经过转义后的HTML代码（比如<），而非页面显示的原始文本。要在保留
展示效果的前提下实现精准复制，有两种可靠方案：
方案1：使用textContent获取原始文本 #
textContent属性会直接返回元素包含的原始文本内容，完全忽略HTML实体转义，是最直接的解决方式：
HTML结构 #
<pre id="target-pre">
&lt;div class="demo"&gt;
  &lt;span&gt;示例文本&lt;/span&gt;
&lt;/div&gt;
</pre>
<button onclick="copyPreContent()">复制内容</button>
JavaScript代码 #
function copyPreContent() {
  const preElement = document.getElementById('target-pre');
  // 获取<pre>的原始文本内容
  const rawText = preElement.textContent;
  
  // 使用Clipboard API复制
  navigator.clipboard.writeText(rawText)
    .then(() => {
      console.log('复制成功');
    })
    .catch(err => {
      console.error('复制失败:', err);
    });
}
方案2：兼容旧浏览器的textarea中转法 #
如果需要兼容不支持navigator.clipboard的旧浏览器，可以通过创建隐藏的textarea元素中转复制：
function copyPreContent() {
  const preElement = document.getElementById('target-pre');
  const tempTextarea = document.createElement('textarea');
  
  // 赋值原始文本
  tempTextarea.value = preElement.textContent;
  // 隐藏textarea避免干扰页面
  tempTextarea.style.position = 'absolute';
  tempTextarea.style.left = '-9999px';
  
  document.body.appendChild(tempTextarea);
  tempTextarea.select();
  // 执行复制
  document.execCommand('copy');
  // 移除临时元素
  document.body.removeChild(tempTextarea);
  
  alert('复制成功');
}
关键说明 #
不要使用innerHTML获取内容，它会返回转义后的HTML实体（如&lt;），导致复制结果异常。
textContent会保留
中的换行、缩进格式，完全匹配页面显示的内容，复制后格式不会丢失。
内容的提问来源于stack exchange，提问作者seba1685