如何在 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 convert_string = document.createTextNode(string);
参数
字符串 − 我们可以将任何 HTML 字符串作为参数传递，以转义特殊字符并对其进行编码。
示例 1
以下示例演示了在 JavaScript 中使用 createTextNode(string) 方法。
<!DOCTYPE html>
<html>
<body>
<h2>在 JavaScript 中转义 HTML 特殊字符。</h2>
<h4> 转义特殊字符后的字符串:</h4>
<p id = "contentDiv"> </p>
<script type = "text/javascript">
// 使用 createTextNode() 方法转义特殊字符的函数。
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; letcoded_string = textAreaDiv.innerHTML;
参数
HTML_string − 我们可以传递任何想要编码的 HTML 字符串作为此参数。
示例 2
用户可以按照以下示例查看上述方法的演示。
<!DOCTYPE html>
<html >
<body>
<h2>在 javascript 中转义 HTML 特殊字符。</h2>
<h4> 转义特殊字符后的字符串。</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_string − 这是一个我们需要转义特殊字符的字符串。
Old_char −它是字符串中需要替换的字符。
New_char − 它是我们将在旧字符位置添加到字符串中的字符。
示例 3
以下示例演示了如何使用 replace() 方法替换特殊字符来对 HTML 字符串进行编码。
<!DOCTYPE html>
<html>
<body>
<h2>转义 HTML 特殊字符</h2>
<p> 转义特殊字符后的结果。</p>
<p id="result"></p>
<script>
// 使用 replace() 方法转义特殊字符的函数。
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 中特殊字符的方法。用户可以根据自己的需求使用任何方法。
