JS实现HTML标签转义及反转义

HTML中的特殊字符，如尖括号、引号、和符号等，需要进行转义才可以在HTML文本中正常显示。而JS提供了很方便的方法来实现HTML标签的转义及反转义。下面是一份JS实现HTML标签转义及反转义的完整攻略。

转义HTML标签

HTML中的特殊字符，如尖括号、引号、和符号等，需要进行转义才可以在HTML文本中正常显示。JS提供了 htmlentities 函数来实现HTML标签的转义。

function htmlentities(str) {
  return str.replaceAll("<", "&lt;").replaceAll(">", "&gt;")
            .replaceAll("&", "&amp;").replaceAll("\"", "&quot;")
            .replaceAll("'", "&#x27;").replaceAll("/", "&#x2F;");
}

以上函数使用 replaceAll 函数将字符串中的 "<", ">", "&", '"', '/'和"'"字符转换成对应的HTML实体，返回转换后的字符串。下面是示例：

let input = '<script>alert("hello world");</script>';
let output = htmlentities(input);
console.log(output); // 输出：&lt;script&gt;alert(&quot;hello world&quot;);&lt;/script&gt;

在输出结果中，<和>被转成了对应的HTML实体 <和>，"被转成了 "，而'被转成了 '。

反转义HTML标签

还原HTML文本内容时，需要使用反转义方法。html_entity_decode 可以将 HTML 实体转换回它们对应的字符。

function html_entity_decode(str) {
  return str.replaceAll("&lt;", "<").replaceAll("&gt;", ">")
            .replaceAll("&amp;", "&").replaceAll("&quot;", "\"")
            .replaceAll("&#x27;", "'").replaceAll("&#x2F;", "/");
}

以上函数使用 replaceAll 函数将输入中转义后的HTML实体转换回对应字符，返回转换后的字符串。下面是示例：

let input = '<script>alert("hello world");</script>';
let output = html_entity_decode(input);
console.log(output); // 输出：<script>alert("hello world");</script>

在输出结果中，<和>被转成了尖括号 <和>，"被转成了"，而'被转成了 '。