如何在pre code标签中展示多层嵌套模板字面量的HTML代码且可还原原始内容

核心思路是对模板字面量中的HTML特殊字符做可逆的实体编码，插入DOM时浏览器不会将编码后的内容解析为真实节点，需要还原原始代码时执行对应的解码操作即可，完美适配多层嵌套模板字面量的场景。

1. 实现可逆的编解码工具函数 #

// HTML特殊字符转义（用于插入DOM展示源码）
function htmlEscape(str) {
  return str.replace(/[&<>"']/g, match => {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }
    return escapeMap[match]
  })
}

// HTML实体解码（用于还原原始代码）
function htmlUnescape(escapedStr) {
  const unescapeMap = {
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
    '&quot;': '"',
    '&#39;': "'"
  }
  return escapedStr.replace(/&amp;|&lt;|&gt;|&quot;|&#39;/g, match => unescapeMap[match])
}

2. 替换原有的DOM插入逻辑 #

你原有代码存在两个问题：一是直接插入未转义的HTML字符串会被浏览器解析，二是拼接innerHTML时结束标签顺序写反了。修改后的代码如下：

let templateliteral = `let inner = { content : \`
<style>
#exampleDivInTemplateLiteral { background-color:lightblue;color:white; }
</style>

<div id="exampleDivInTemplateLiteral">
    <b>this is some text.</b>
    <input id="exampleInput" placeholder="example input"></input>
</div>\`}`

// 转义后插入DOM，所有代码会原样展示，不会被渲染
document.getElementById("exampleDiv").innerHTML = '<pre><code>' + htmlEscape(templateliteral) + '</code></pre>'

// 需要还原原始代码时调用解码函数即可
const originalCode = htmlUnescape(document.getElementById("exampleDiv").querySelector('code').textContent)
console.log(originalCode === templateliteral) // 输出true，完全还原无损失

该方案无需额外依赖，处理效率高，不管模板字面量嵌套多少层，都能正常完成代码展示和还原。

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