如何阻止嵌套模板字面量中的HTML代码被浏览器渲染为实际元素？

核心思路是对模板字面量字符串做HTML特殊字符转义后再插入DOM展示，配套对应的反转义方法即可实现可逆操作，完美适配双层嵌套模板字面量场景，不会破坏原有语法结构。

1. 核心转义/反转义方法 #

用原生DOM API实现，兼容性强、无遗漏：

// 转义：将特殊字符转为HTML实体，用于页面展示
function escapeHTML(str) {
  const temp = document.createElement('div');
  temp.textContent = str;
  return temp.innerHTML;
}

// 反转义：将转义后的实体还原为原始字符串
function unescapeHTML(str) {
  const temp = document.createElement('div');
  temp.innerHTML = str;
  return temp.textContent;
}

2. 适配你场景的修改示例 #

你原有的代码可调整为如下写法，即可实现全部代码黑底橙色展示，不会被浏览器渲染为实际DOM：

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>' + escapeHTML(templateliteral) + '</code></pre>'

3. 可逆性说明 #

• 转义后的字符串可直接插入pre/code标签展示，所有HTML标签、嵌套模板字面量的反引号、转义符都会原样显示，不会被浏览器解析执行
• 需要获取原始代码时，直接调用unescapeHTML(转义后的字符串)即可得到和初始templateliteral完全一致的内容，无任何信息丢失

原理解释 #

你原有代码失效的原因是：直接用innerHTML赋值时，字符串里的<等实体会被浏览器自动解析为对应的<字符，最终被识别为HTML标签触发渲染。上述转义操作相当于把特殊字符多包了一层实体编码，插入DOM后刚好会被解析为你想要展示的原始字符。

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