How to Escape HTML Chars in JavaScript
There is no built-in method to replace HTML special characters with required characters using JavaScript. We normally invoke custom functions to achieve that functionality to escape HTML pre-defined and reserved special chars. In this article, we will discuss multiple examples to ignore those chars using JavaScript by custom declared functions.
JavaScript Escape HTML Chars Method Example
Below HTML source code will show a From input type of text with place holder to get any string value from the user at runtime. We will call a custom declared function on the event listener of form input during insertion of value. The function will simply change the mentioned character with another given character and finally return the result.
We will display the converted user-given string result in the browser console.
<!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>
In this HTML page source, we have created a form input type of text to get a string value from the user at the runtime of the webpage.
You can see the const type function escapeHtmlChars(string) to convert the user given string by escaping the HTML special chars.
In body of that method we have used JavaScript replaceAll(value1,value2) method to replace first value1 with second value2.
As we know, we were looking to escape the HTML special characters, we simply passed any special character (which we are going to replace) at the first value and an empty string "" at the second value.
We can use the replaceAll() method multiple times on our string as shown above, then we return that converted string as well.
We have called our escapeHtmlChars() function on listener of document.querySelector('input').addEventListener(). It will automatically triggered when ever user enter OR change value in input form.
We called function in console.log() to display the returned value in browser inspect.
You can see a form input in the webpage, just insert the string containing HTML special characters and view the output in the console tab.
Alternative Way to Escape HTML Characters in JavaScript
You can also achieve the same functionality using document.createTextNode(html). it Creates a new Text node. This method can be used to escape HTML characters by passing characters containing the string to a function.
Then we will append a converted text in a variable using appendChild(text)
function escapeChars(html) {
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
}
We just used another method escapeChars(html) to convert text and return the result without using the replace() method.