Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert special characters to HTML in Javascript?
Special characters like <, >, and & have special meaning in HTML and can break your webpage if not properly escaped. JavaScript provides several methods to convert these characters into their HTML entity equivalents.
Why Convert Special Characters to HTML?
When displaying user input or dynamic content on a webpage, special characters can cause problems. For example, if you want to display "<script>" as text, the browser might interpret it as an actual HTML tag. Converting these characters to HTML entities like < and > ensures they display as intended text.
Common characters that need escaping:
- < becomes
< - > becomes
> - & becomes
& - " becomes
" - ' becomes
'
Using String.prototype.replace() Method
The replace() method can convert individual characters using regular expressions:
<html>
<body>
<p id="result1"></p>
<script>
var text = "This is a <script> tag & some text";
// Replace one by one
text = text.replace(/</g, "<");
text = text.replace(/>/g, ">");
text = text.replace(/&/g, "&");
document.getElementById("result1").innerHTML = text;
</script>
</body>
</html>
Using replace() with Character Map
A more efficient approach uses a character map to handle multiple replacements:
<html>
<body>
<p id="result2"></p>
<script>
const htmlEntities = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
function escapeHtml(text) {
return text.replace(/[&<>"']/g, function(match) {
return htmlEntities[match];
});
}
var userInput = '<div class="alert">Hello & welcome!</div>';
document.getElementById("result2").innerHTML = escapeHtml(userInput);
</script>
</body>
</html>
Using textContent Property (Recommended)
The safest method for displaying user content is using textContent instead of innerHTML:
<html>
<body>
<p id="result3"></p>
<script>
var userInput = '<script>alert("XSS")</script>';
// This automatically escapes HTML
document.getElementById("result3").textContent = userInput;
// Display what was actually set
console.log("Safe display:", document.getElementById("result3").textContent);
</script>
</body>
</html>
Using encodeURIComponent() Function
While encodeURIComponent() is designed for URL encoding, it can help with some special characters:
<html>
<body>
<p id="result4"></p>
<script>
var text = "Hello <world> & universe!";
var encoded = encodeURIComponent(text);
document.getElementById("result4").innerHTML =
"Original: " + text + "<br>Encoded: " + encoded;
</script>
</body>
</html>
Comparison of Methods
| Method | Best For | Pros | Cons |
|---|---|---|---|
| Character Map + replace() | HTML entities | Complete control, efficient | More code to write |
| textContent | Displaying user input | Automatic, secure | No HTML formatting |
| encodeURIComponent() | URLs | Built-in function | Not designed for HTML |
Conclusion
For displaying user content safely, use textContent. For converting strings to HTML entities, use the character map approach with replace(). Always escape special characters when displaying dynamic content to prevent security vulnerabilities.
6K+ Views
