如何用JavaScript复制innerHTML且不保留HTML转义字符

我编写了两个JavaScript函数：

• outputCode：动态向id为code-output的div中填充示例HTML代码（当前为静态内容，后续计划让style和body动态生成）
• copyHtml：将示例HTML代码复制到剪贴板

但copyHtml复制的内容包含HTML转义字符（如&lthtml&gt），我需要复制的是原始的HTML标签（如<html>）。

原始函数代码 #

outputCode函数

function outputCode() {
    var style = "<p>#main-container {</p><p class='indent-1'>width: 100%;</p><p>}</p>"

    var body = "<p>&ltdiv id='main-container'&gt</p>" + "<p class='indent-1'>&ltdiv id='header'&gt</p>" + "<p class='indent-2'>&lth1&gtThis is a header 1&lt/h1&gt</p>" + "<p class='indent-1'>&lt/div&gt</p>" + "<p>&lt/div&gt</p>"

    code = "<p>&lt!DOCTYPE html&gt</p>" + "<p>&lthtml&gt</p>" + "<p class='indent-1'>&lthead&gt</p>" + "<p class='indent-2'>&ltmeta charset='utf-8'&gt</p>" + "<p class='indent-2'>&ltmeta name='viewport' content='width=device-width, initial-scale=1'&gt</p>" + "<p class='indent-2'>&lttitle&gtMy HTML Theme&lt/title&gt</p>" + "<p class='indent-2'>&ltstyle&gt</p>" + "<div class='code'>" + style + "</div>" + "<p class='indent-2'>&lt/style&gt</p>" + "<p class='indent-1'>&lt/head&gt</p>" + "<p class='indent-1'>&ltbody&gt</p>" + "<div class='code'>" + body + "</div>" + "<p class='indent-1'>&lt/body&gt</p>" + "<p>&lt/html&gt</p>"

    outputBlock = document.getElementById("code-output");

    outputBlock.innerHTML = code;
}

copyHtml函数

function copyHtml() {
    var copyText = document.getElementById("code-output").innerHTML;

    navigator.clipboard.writeText(copyText);

    document.getElementById("copied-message").innerHTML = "Copied";
}

解决方案 #

方案一：通过临时DOM元素还原转义内容

核心思路是利用浏览器的DOM解析能力，把转义后的HTML还原成原始文本：

function copyHtml() {
    // 获取转义后的HTML内容
    var escapedHtml = document.getElementById("code-output").innerHTML;
    // 创建临时div元素
    var tempDiv = document.createElement("div");
    // 将转义内容设置为临时div的innerHTML，浏览器会自动解析转义字符
    tempDiv.innerHTML = escapedHtml;
    // 获取还原后的纯文本（即原始HTML标签）
    var originalHtml = tempDiv.textContent;
    
    navigator.clipboard.writeText(originalHtml);
    document.getElementById("copied-message").innerHTML = "Copied";
}

原理：当把包含<这类转义序列的内容设置给DOM元素的innerHTML时，浏览器会自动将其解析为对应的原始字符（如<），再通过textContent就能拿到不带转义的纯文本内容。

方案二：提前存储原始HTML代码（推荐）

如果后续要动态生成style和body，更可靠的方式是在outputCode中同步保存一份原始的HTML代码，复制时直接使用这份内容，避免依赖DOM解析：

function outputCode() {
    // 生成用于显示的转义内容（保留原逻辑）
    var style = "<p>#main-container {</p><p class='indent-1'>width: 100%;</p><p>}</p>"
    var body = "<p>&ltdiv id='main-container'&gt</p>" + "<p class='indent-1'>&ltdiv id='header'&gt</p>" + "<p class='indent-2'>&lth1&gtThis is a header 1&lt/h1&gt</p>" + "<p class='indent-1'>&lt/div&gt</p>" + "<p>&lt/div&gt</p>"
    var displayCode = "<p>&lt!DOCTYPE html&gt</p>" + "<p>&lthtml&gt</p>" + "<p class='indent-1'>&lthead&gt</p>" + "<p class='indent-2'>&ltmeta charset='utf-8'&gt</p>" + "<p class='indent-2'>&ltmeta name='viewport' content='width=device-width, initial-scale=1'&gt</p>" + "<p class='indent-2'>&lttitle&gtMy HTML Theme&lt/title&gt</p>" + "<p class='indent-2'>&ltstyle&gt</p>" + "<div class='code'>" + style + "</div>" + "<p class='indent-2'>&lt/style&gt</p>" + "<p class='indent-1'>&lt/head&gt</p>" + "<p class='indent-1'>&ltbody&gt</p>" + "<div class='code'>" + body + "</div>" + "<p class='indent-1'>&lt/body&gt</p>" + "<p>&lt/html&gt</p>"

    // 保存原始HTML代码（不带转义，后续动态生成时同步更新）
    window.originalHtmlCode = `<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <title>My HTML Theme</title>
        <style>
#main-container {
    width: 100%;
}
        </style>
    </head>
    <body>
<div id='main-container'>
    <div id='header'>
        <h1>This is a header 1</h1>
    </div>
</div>
    </body>
</html>`;

    var outputBlock = document.getElementById("code-output");
    outputBlock.innerHTML = displayCode;
}

// 修改后的复制函数
function copyHtml() {
    navigator.clipboard.writeText(window.originalHtmlCode);
    document.getElementById("copied-message").innerHTML = "Copied";
}

这种方式的优势在于：后续动态生成style和body时，只需要同步更新window.originalHtmlCode变量即可，复制的内容始终是最准确的原始代码，不会出现DOM解析可能带来的格式偏差。

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