在 JavaScript 中转义 HTML 字符的示例
没有使用 JavaScript 将 HTML 特殊字符替换为所需字符的内置方法。我们通常调用自定义函数来实现该功能以转义 HTML 预定义和保留的特殊字符。在本文中，我们将讨论多个示例，以通过自定义声明的函数使用 JavaScript 忽略这些字符。
JavaScript 转义 HTML 字符方法实例
下面的 HTML 源代码将显示一个 From 输入类型的文本，带有占位符，以在运行时从用户那里获取任何字符串值。在插入值期间，我们将在表单输入的事件侦听器上调用自定义声明的函数。该函数将简单地用另一个给定的字符更改提到的字符并最终返回结果。
我们将在浏览器控制台中显示转换后的用户给定字符串结果。
<!DOCTYPE html>
<html>
<head>
<title>
HTML | Escape HTML Special Chars
</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hi Users Check Escape of HTML Special Chars.</h2>
<Form>
<input style='width:90%; padding:6px;' placeholder='Enter Text With HTML Chars'>
</Form>
<script>
//function to ignore OR escape HTML chars
const escapeHtmlChars = (unsafe) => {
return unsafe.replaceAll('&', '').replaceAll('<', '').replaceAll('>', '').replaceAll('"', '').replaceAll("'", '');
}
// Escape while typing & print result in console
document.querySelector('input').addEventListener('input', e => {
console.clear();
console.log( escapeHtmlChars(e.target.value));
});
</script>
</body>
<html>
在这个 HTML 页面源代码中，我们创建了一个表单输入类型的文本，用于在网页运行时从用户那里获取一个字符串值。
你可以看到 const 类型函数 escapeHtmlChars(string) 通过转义 HTML 特殊字符来转换用户给定的字符串。
在该方法的主体中，我们使用 JavaScript replaceAll(value1,value2) 方法将第一个 value1 替换为第二个 value2。
正如我们所知，我们正在寻找转义 HTML 特殊字符，我们只是在第一个值处传递任何特殊字符（我们将要替换），在第二个值处传递一个空字符串 ""。
如上所示，我们可以对字符串多次使用 replaceAll() 方法，然后我们也返回转换后的字符串。
我们在 document.querySelector('input').addEventListener() 的侦听器上调用了 escapeHtmlChars() 函数。当用户在输入表单中输入或更改值时，它将自动触发。
我们在 console.log() 中调用函数以在浏览器检查中显示返回值。
你可以在网页中看到一个表单输入，只需插入包含 HTML 特殊字符的字符串并在控制台标签页中查看输出。
在 JavaScript 中转义 HTML 字符的另一种方法
你还可以使用 document.createTextNode(html) 实现相同的功能。它创建一个新的 Text 节点。此方法可用于通过将包含字符串的字符传递给函数来转义 HTML 字符。
然后我们将使用 appendChild(text) 将转换后的文本附加到变量中
function escapeChars(html) {
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
}
我们只是使用了另一种方法 escapeChars(html) 来转换文本并返回结果，而不使用 replace() 方法。