如何在 JavaScript 中转义 HTML 特殊字符？

HTML 包含特殊字符，例如 ‘<,’ ‘>,’ ‘/,’ 以及更多诸如单引号和双引号之类的字符。这些特殊字符用于 HTML 标签，例如 ‘<’ 用于打开 HTML 标签。‘/’ 和 ‘>’ 用于关闭 HTML 标签。本教程将教你如何在 JavaScript 中转义 HTML 特殊字符。

现在，问题是如果我们想在 HTML 内容中使用这些字符怎么办？如果我们在 HTML 内容中正常使用特殊字符，它会将其视为打开或关闭 HTML 标签，并产生未知错误。

例如，我们需要将以下字符串渲染到浏览器中。

<b> tutorialsPoint </b>

如果我们直接在 HTML 中添加上述字符串，它会将 <b> 视为粗体标签，但我们希望将其用作字符串。

为了克服上述问题，我们必须对所有特殊字符使用 Unicode。在这里，我们将用 Unicode 替换所有特殊字符以转义 HTML 特殊字符，并在 HTML 字符串中使用它们。

下面给出解决上述问题的不同方法。

  • 使用 createTextNode() 方法
  • 使用 textContent 属性
  • 使用 replace() 方法

使用 createTextNode() 方法

在这种方法中，我们将使用 HTML DOM 中的 createTextNode() 方法。我们只需要将字符串作为参数传递给该方法，它会返回编码后的字符串。

语法

Var converted_string = document.createTextNode(string);

参数

  • 字符串 − 我们可以将任何 HTML 字符串作为参数传递以转义特殊字符并对其进行编码。

示例 1

以下示例演示了在 JavaScript 中使用 createTextNode(string) 方法。

Open Compiler
<!DOCTYPE html>
<html>
<body>
   <h2>Escape HTML special Chars in JavaScript.</h2>
   <h4> String After escaping the special characters: </h4>
   <p id = "contentDiv"> </p>
   <script type = "text/javascript">
      // function to escape special chars using createTextNode() method.
      function escapeSpecialChars() {
         let string_var = " <h1> tutorialsPoint </h1> ";
         let escapedString = document.createTextNode(string_var);
         contentDiv.appendChild(escapedString);
      }
      escapeSpecialChars();
   </script>
</body>
</html>

对于以上示例输出，用户可以观察到我们使用 createTextNode() 方法创建了一个编码后的字符串，并将其插入到 HTML DOM 中。它按原样呈现特殊字符，而不将其视为标签元素。

使用 textContent 属性

我们可以在 JavaScript 中创建一个 HTML 元素并添加 HTML 字符串。我们可以使用 HTML Textarea 元素的 textContent 属性并插入 HTML 字符串。之后，我们可以使用 innerHTML 属性获取使用 Unicode 编码的字符串。

语法

let textAreaDiv = document.createElement( 'textarea' );
textAreaDiv.textContent = HTML_String;
let encoded_string = textAreaDiv.innerHTML;

参数

  • HTML_字符串 − 我们可以将任何我们想要编码的 HTML 字符串作为此参数传递。

示例 2

用户可以参考以下示例以查看上述方法的演示。

Open Compiler
<!DOCTYPE html>
<html >
<body>
   <h2>Escape HTML special Chars in javascript.</h2>
   <h4> String After escaping the special characters. </h4>
   <p id="resultDiv"> </p>
   <script type = "text/javascript">
      let textAreaDiv = document.createElement('textarea');
      var resultDiv = document.getElementById("resultDiv");
      textAreaDiv.textContent = "<div>Welcome to tutorialsPoint website.</div>";
      let encoded_string = textAreaDiv.innerHTML;
      resultDiv.innerHTML = encoded_string;
   </script>
</body>
</html>

用户可以在以下输出中看到如何使用 textContent 属性对字符串进行编码。

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

使用 Replace() 方法

在这种方法中，我们将使用 JavaScript 的 replace() 方法。我们可以使用 replace() 方法将一个字符替换为另一个字符。在这里，我们将使用 replace() 方法将 HTML 字符串中的所有特殊字符替换为其 Unicode。

语法

html_string.replace( old_char, new_char )

参数

  • Html_字符串 − 它是我们需要转义特殊字符的字符串。

  • 旧字符 − 它是需要替换的字符串中的字符。

  • 新字符 − 它是我们将在旧字符位置添加到字符串中的字符。

示例 3

以下示例演示了如何使用 replace() 方法替换特殊字符来对 HTML 字符串进行编码。

Open Compiler
<!DOCTYPE html>
<html>
<body>
   <h2>Escape HTML special chars</h2>
   <p> Result after escaping the special characters. </p>
   <p id="result"></p>
   <script>
      // function to escape special chars using replace() method.
      function escapeSpecialChars(str) {
         return str
         .replace(/&/g, "&")
         .replace(/</g, "<")
         .replace(/>/g, ">")
         .replace(/"/g, """)
         .replace(/'/g, "'");
      }
      let string = ` <div> hello user! <i>your welcome</i> here. </div>`;
      let escape = escapeSpecialChars(string);
      document.getElementById("result").innerHTML = escape;
   </script>
</body>
</html>

用户可以看到我们已经成功地使用 replace 方法替换了所有特殊字符，并且我们可以按原样呈现包含特殊字符的字符串。

结论

在本教程中，我们学习了三种在 HTML 中替换特殊字符的方法。用户可以根据自己的需要使用任何方法。

更新于: 2022-07-14

9K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告