数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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) 方法。
<!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
用户可以参考以下示例以查看上述方法的演示。
<!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 属性对字符串进行编码。
使用 Replace() 方法
在这种方法中，我们将使用 JavaScript 的 replace() 方法。我们可以使用 replace() 方法将一个字符替换为另一个字符。在这里，我们将使用 replace() 方法将 HTML 字符串中的所有特殊字符替换为其 Unicode。
语法
html_string.replace( old_char, new_char )
参数
Html_字符串 − 它是我们需要转义特殊字符的字符串。
旧字符 − 它是需要替换的字符串中的字符。
新字符 − 它是我们将在旧字符位置添加到字符串中的字符。
示例 3
以下示例演示了如何使用 replace() 方法替换特殊字符来对 HTML 字符串进行编码。
<!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 中替换特殊字符的方法。用户可以根据自己的需要使用任何方法。
9K+ 阅读量
