How To Replace Html Entities In Javascript

When working with user-generated content, it’s essential to ensure that your website remains secure and functional.
One common way to achieve this is by replacing HTML entities in the content. HTML entities are special codes that
represent characters that have a specific meaning in HTML, such as < for the less-than sign (<) or & for
the ampersand (&). In this blog post, we will explore how you can replace HTML entities in your JavaScript code.

Using a Function to Replace HTML Entities

One simple way to replace HTML entities in JavaScript is by using a function. Below is an example of a function
called escapeHtml that takes a string as its input and returns the string with HTML entities

function escapeHtml(unsafe) {
    return unsafe
        .replace(/&amp;/g, "&amp;")
        .replace(//g, "&gt;")
        .replace(/"/g, """)
        .replace(/'/g, "'");

This function uses the JavaScript replace() method with regular expressions to search for
specific characters in the input string (such as &, <, and
>) and replace them with their corresponding HTML entities.

Example: Replacing HTML Entities in a Comment System

Let’s say you’re building a simple comment system for your website. Users can submit comments, which are then
displayed on the page. To ensure that the comments do not contain any dangerous HTML or JavaScript, you can use
the escapeHtml() function to replace any HTML entities in the user’s input.

// Get the user's input from a form, for example
var userInput = document.getElementById('commentInput').value;

// Replace HTML entities using the escapeHtml function
var safeInput = escapeHtml(userInput);

// Display the safe input on the page
document.getElementById('comments').innerHTML += '&lt;p&gt;' + safeInput + '&lt;/p&gt;';

In this example, when a user submits a comment, their input is first passed through the
escapeHtml() function. This will replace any HTML entities in the input, ensuring that any
potentially dangerous content is rendered harmless. The comment is then added to the page using the
innerHTML property.


Replacing HTML entities in JavaScript is an essential step in ensuring the security and functionality of your web
applications. By using a simple function like escapeHtml() to replace potentially harmful
characters, you can protect your website from malicious user-generated content.