JavaScript HTMLEncode 和 HTMLDecode 的完整实例(兼容IE和Firefox)

本文将介绍如何使用 JavaScript 实现 HTML 编码和解码，以及如何使其兼容 IE 和 Firefox 浏览器。

HTML 编码和解码

HTML 编码和解码是将 HTML 特殊字符转换为实体编码和将实体编码转换回 HTML 特殊字符的过程。HTML 特殊字符包括：&、<、>、"、'。

HTMLEncode

以下是 JavaScript 实现 HTML 编码的函数：

function HTMLEncode(html) {
    var temp = document.createElement("div");
    (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
    var output = temp.innerHTML;
    temp = null;
    return output;
}

此函数将传入的 html 字符串作为参数，创建一个 div 元素，并尝试根据浏览器支持的属性设置 div 内容（textContent 或 innerText）。然后返回 div 内容，这将是已编码的 HTML 特殊字符。

示例

var result = HTMLEncode("<p>这是一个段落。</p>");
console.log(result); // 输出 &lt;p&gt;这是一个段落。&lt;/p&gt;

运行结果将是将 HTML 特殊字符 < 和 > 转换为实体编码 < 和 >。

HTMLDecode

以下是 JavaScript 实现 HTML 解码的函数：

function HTMLDecode(text) {
    var temp = document.createElement("div");
    temp.innerHTML = text;
    var output = temp.innerText || temp.textContent;
    temp = null;
    return output;
}

此函数将传入的文本字符串作为参数，创建一个 div 元素，设置该 div 的 innerHTML 属性为传入的文本字符串。然后返回该元素的 innerText 或 textContent 属性，这将是已解码的 HTML 特殊字符。

示例

var result = HTMLDecode("&lt;p&gt;这是一个段落。&lt;/p&gt;");
console.log(result); // 输出 <p>这是一个段落。</p>

运行结果将是将实体编码 < 和 > 转换回 HTML 特殊字符 < 和 >。

兼容 IE 和 Firefox

上述实现方式在大多数现代浏览器中都有效，但在 IE 中可能存在某些问题。为了确保代码在所有浏览器中正常工作，请使用以下代码：

function HTMLEncode(html) {
    var temp = document.createElement("div");
    (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
    var output = temp.innerHTML.replace(/"/g, "&quot;").replace(/'/g, "&apos;");
    temp = null;
    return output;
}

function HTMLDecode(text) {
    var temp = document.createElement("div");
    temp.innerHTML = text.replace(/&amp;/g, "&").replace(/&quot;/g, "\"").replace(/&apos;/g, "'");
    var output = temp.innerText || temp.textContent;
    temp = null;
    return output;
}

这些修改将确保在 IE 中正确执行编码和解码操作。

示例

var encoded = HTMLEncode("<p>这是一个段落。</p>");
console.log(encoded); // 输出 &lt;p&gt;这是一个段落。&lt;/p&gt;

var decoded = HTMLDecode("&lt;p&gt;这是一个段落。&lt;/p&gt;");
console.log(decoded); // 输出 <p>这是一个段落。</p>

这些函数将对字符串进行编码和解码，并返回正确的结果，无论在哪种浏览器中都应该能够正常工作。