使用 JavaScript 对 HTML 字符进行转义

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何使用 JavaScript 对 HTML 字符进行转义。HTML 转义是一种常用技术,用于在 HTML 中对特殊字符进行编码,以防止跨站脚本攻击。然而,有时我们需要将转义后的字符转换回其原始形式。我们将通过创建一个对最常见 HTML 字符进行转义的函数来学习如何做到这一点。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") subgraph Lab Skills javascript/variables -.-> lab-28677{{"`使用 JavaScript 对 HTML 字符进行转义`"}} javascript/data_types -.-> lab-28677{{"`使用 JavaScript 对 HTML 字符进行转义`"}} javascript/arith_ops -.-> lab-28677{{"`使用 JavaScript 对 HTML 字符进行转义`"}} javascript/comp_ops -.-> lab-28677{{"`使用 JavaScript 对 HTML 字符进行转义`"}} end

对 HTML 进行转义

此函数用于对转义后的 HTML 字符进行反转义。使用步骤如下:

  1. 打开终端/SSH。
  2. 输入 node
  3. 复制并粘贴以下代码:
const unescapeHTML = (str) =>
  str.replace(
    /&|<|>|'|"/g,
    (tag) =>
      ({
        "&": "&",
        "&lt;": "<",
        "&gt;": ">",
        "&#39;": "'",
        "&quot;": '"'
      })[tag] || tag
  );
  1. 调用 unescapeHTML 函数,并向其传递一个包含转义字符的字符串。
  2. 该函数将返回反转义后的字符串。

示例用法:

unescapeHTML("&lt;a href=&quot;#&quot;&gt;Me &amp; you&lt;/a&gt;");
// '<a href="#">Me & you</a>'

总结

恭喜你!你已完成“对 HTML 进行转义”实验。你可以在 LabEx 中练习更多实验以提升技能。

您可能感兴趣的其他 JavaScript 教程