Encoding HTML entities is an essential skill of any programmer. Don’t know how to encode HTML in Javascript? Check out this guide to learn how to perform this task with three different approaches.

What is character encoding? It is essentially a mapping technique that allows HTML documents to declare text and bytes independently. In other words, this process sends header data to the server to ensure that the text is shown as text instead of an HTML code.

Method 1: Encode String To HTML In Javascript Utilizing String.prototype.toHtmlEntities()

Here is the use of the codes in Javascript.

• String.prototype.toHtmlEntities = function() gives back a string that contains entities in HTML with the aid of the method .replace().
• .replace() locates the value of the specified string and replaces it with the new specified or desired value.
• .prototype is a Javascript object, which automatically ties together with functions and objects.
• String.charCodeAt() gives back the character’s Unicode based on its index in the string.

Here is a sample code.

/**
 * Conversion of string to HTML entities | encode HTML in Javascript
 */

String.prototype.toHtmlEntities = function() {
    return this.replace(/./gm, function(s) {

        // return "&#" + s.charCodeAt(0) + ";";
        return (s.match(/[a-z0-9\s]+/i)) ? s : "&#" + s.charCodeAt(0) + ";";
    });
};

Method 2: Encode String From HTML In Javascript Utilizing String.fromHtmlEntities()

Let’s have a look at the below statements in Javascript that we have produced.

• String.fromHtmlEntities = function(string) takes the string containing entities in HTML.
• In this case, /&#\d+;/gm is the value of the provided string in .replace(). This value is changed to function(s) that gives back a String.fromCharCode string.
• The String.fromCharCode method will give back a string produced by the sequence.

/**
 * Creation of string from HTML entities
 */

String.fromHtmlEntities = function(string) {
    return (string+"").replace(/&#\d+;/gm,function(s) {
        return String.fromCharCode(s.match(/\d+/gm)[0]);
    })
};

Next, utilize the method as follows.

• A var str variable is created by a string with several special characters such as †®¥¨©˙∫ø…ˆƒ∆….
• With the unique character var str string, the .toHtmlEntities function is invoked.
• JavaScript’s built-in console.log method shows values within a log box.

var str = "Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

Output:

"Entities:"
"Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"
"String:"
"Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"

Method 3: Encode HTML In Javascript Utilizing unescapeHTML()

These functions are available for online and offline testing on JavaScript compilers. It makes it easier for you to show a string without having the browser read the HTML. There is another method for doing this. You can put together the entities in HTML into an object.

• The object of the special symbols and characters are contained in a var htmlEntities variable.
• With the aid of the conditions .replace(), a function unescapeHTML(str) can accept strings and give back values.

var htmlEntities = {
    nbsp: ' ',
    cent: '¢',
    pound: '£',
    yen: '¥',
    euro: '€',
    copy: '©',
    reg: '®',
    lt: '<',
    gt: '>',
    quot: '"',
    amp: '&',
    apos: '''
};

function unescapeHTML(str) {
    return str.replace(/\&([^;]+);/g, function (entity, entityCode) {
        var match;
        if (entityCode in htmlEntities) {
            return htmlEntities[entityCode];
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
            return String.fromCharCode(parseInt(match[1], 16));
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#(\d+)$/)) {
            return String.fromCharCode(~~match[1]);
        } else {
            return entity;
        }
    });
};

Keep in mind that the native form of HTML entities is unavailable in the Javascript programming language. Here is an example.

The Bottom Line

Now you have learned several ways to encode HTML in Javascript. Hopefully, you find this guide easy to understand and follow. Go ahead and give each approach a try. Once your HTML encoding skills are impressive., why not continue to learn how to convert HTML to PDF? This is another useful technique to add to your Javascript skills collection.