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

Posted 2023-02-21

【中文标题】如何在可编辑的 DIV 中输出美化的原始 HTML 代码

【英文标题】：How to output prettified raw HTML code inside an Editable DIV

【发布时间】：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标签字符串

【参考方案1】：

function escapeHtml(unsafe) 
    return unsafe
         .replace(/&/g, "&")
         .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;

<div id=x contenteditable="true"></div>

【讨论】：

顺便说一句，他想用 `

输出`<div class="flexContainer">HELLO WORLD</div>`

@Anonymous 谢谢。错过（包括``）部分

@Program-Me-Rev 看起来您可以在插入代码后调用highlightElement。 （不确定那个库，但格式化的代码输出一开始不应该是有效的 HTML 本身吗？）