如何在可编辑的 DIV 中输出美化的原始 HTML 代码答案

【问题标题】：How to output prettified raw HTML code inside an Editable DIV如何在可编辑的 DIV 中输出美化的原始 HTML 代码
【发布时间】：2021-09-20 09:15:44
【问题描述】：

我一直试图在可编辑的 DIV 中输出原始 HTML，但 <div> 被注释掉了。

这就是我要输出的（包括``）：

\`<div class="flexContainer">HELLO WORLD</div>\`

这是我得到的（请注意 HELLO WORLD 没有包裹在 div 中）：

`HELLO WORLD`;

呼唤

let htmlCode = `\`<div class="flexContainer">HELLO WORLD</div>\`;`;
document.getElementById(myEditableDIVInputArea_Id).innerHTML = js_beautify(<pre><code>${htmlCode}</code></pre>);

如何获取原始 HTML 输出？

提前谢谢大家。

【问题讨论】：

不要使用innerHTML 因为它会输出元素而不是div标签字符串

标签： javascript html pretty-print

【解决方案1】：

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}

let htmlCode = escapeHtml('<div class="flexContainer">HELLO WORLD</div>')
document.getElementById(myEditableDIVInputArea_Id).innerHTML = js_beautify(<pre><code>${htmlCode}</code></pre>);

【讨论】：

【解决方案2】：

您可以将它们插入为文本而不是 HTML

let htmlCode = `\`<div class="flexContainer">HELLO WORLD</div>;\``
document.getElementById('x').innerText = htmlCode;

&lt;div id=x contenteditable="true"&gt;&lt;/div&gt;

【讨论】：

顺便说一句，他想用 ` 输出`<div class="flexContainer">HELLO WORLD</div>`
@Anonymous 谢谢。错过（包括``）部分
@Program-Me-Rev 看起来您可以在插入代码后调用highlightElement。（不确定那个库，但格式化的代码输出一开始不应该是有效的 HTML 本身吗？）