JavaScript HTML转义函数

好的，为了在HTML页面中显示HTML代码而不是让浏览器将其渲染出来，你需要将HTML中的特殊字符（如<, >, &, ", '）转义为对应的HTML实体。以下是一个JavaScript函数，可以帮助你实现这个功能：

/**
 * 将HTML字符串中的特殊字符转义为HTML实体，以便在页面上以文本形式显示HTML代码。
 * @param {string} htmlString 待转义的HTML字符串。
 * @returns {string} 转义后的字符串。
 */
function escapeHtml(htmlString) {
  return htmlString
    .replace(/&/g, "&")   // 必须首先转义&符号
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;"); // 或者 &#x27; 或 &apos; (部分浏览器可能不支持)
}

// 示例用法：
const rawHtml = "<div><p>Hello & World!</p><button onclick=\"alert('Hi');\">Click Me</button></div>";
const escapedHtml = escapeHtml(rawHtml);

console.log(escapedHtml);
// 输出: &lt;div&gt;&lt;p&gt;Hello &amp; World!&lt;/p&gt;&lt;button onclick=&quot;alert(&#039;Hi&#039;);&quot;&gt;Click Me&lt;/button&gt;&lt;/div&gt;

// 如何在HTML中显示：
// 在HTML页面中，你可以将这个转义后的字符串放入一个 <pre> 或 <code> 标签中，
// 或者一个普通元素（如 <div> 或 <p>）的 textContent 属性中。
// 例如：
// document.getElementById('codeDisplay').textContent = escapedHtml;

// HTML结构示例：
// <pre id="codeDisplay"></pre>

解释：

1. & (和号): 被替换为 &。这是最重要的，因为它本身就是HTML实体的前缀。必须优先处理。
2. < (小于号): 被替换为 <。如果保留，浏览器会将其解释为标签的开始。
3. > (大于号): 被替换为 >。如果保留，浏览器会将其解释为标签的结束。
4. " (双引号): 被替换为 "。在HTML属性值中使用双引号时尤其重要。
5. ' (单引号/撇号): 被替换为 '。在HTML属性值中使用单引号时非常重要，尽管某些浏览器也支持 '。