What is the best way to prevent "escaping" in the createTextElement method when using Javascript?

Question

What is the best way to prevent "escaping" in the createTextElement method when using Javascript?

Check out the Jsfiddle demo

document.getElementById("container").appendChild(document.createTextNode('&#xe145; '))

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet>
<div id="container" class="material-icons"></div>
<br>
<div class="material-icons">&#xe145;</div>

I am dealing with two <div> nodes.

 represents the "plus sign" character code in the font.

Unfortunately, the execution of  through Javascript doesn't seem to be functioning properly.

It appears that  is being escaped by either createTextNode or appendChild...

If anyone has suggestions on how to prevent this escaping issue, I would appreciate it.

javascript html css dom fonts

Answer 1

Answer №1

By creating a text node, you are bypassing the HTML parsing process that would normally recognize entity notation and display the corresponding content.

If you want to include special characters, you can use a JavaScript escape sequence like this:

document.getElementById("container").appendChild(document.createTextNode('\ue145'))

However, keep in mind that the string in the JavaScript code is interpreted based on JavaScript syntax rules, not HTML syntax rules.

Answer 2

By creating a text node, you are bypassing the HTML parsing process that would normally recognize entity notation and display the corresponding content.

If you want to include special characters, you can use a JavaScript escape sequence like this:

document.getElementById("container").appendChild(document.createTextNode('\ue145'))

However, keep in mind that the string in the JavaScript code is interpreted based on JavaScript syntax rules, not HTML syntax rules.

Answer 3

Answer №2

 represents an html entity in hexadecimal format

To implement, try using the .innerHTML method

var elem = document.getElementById("container");
elem.innerHTML = "&#xe145;";

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet>
<div id="container" class="material-icons"></div>
<br>
<div class="material-icons">&#xe145;</div>

Answer 4

 represents an html entity in hexadecimal format

To implement, try using the .innerHTML method

var elem = document.getElementById("container");
elem.innerHTML = "&#xe145;";

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet>
<div id="container" class="material-icons"></div>
<br>
<div class="material-icons">&#xe145;</div>

Answer 5

Answer №3

Avoid using the innerHTML property as it can pose security risks.

If you want to steer clear of innerHTML, you can create a regular expression with str.replace to decode HTML entities in Strings.

function decode_html_entities(str) {
    return str.replace(/&(?:#x((?:[0-9a-f]{2}){1,2})|#(\d{1,3})|(amp));/ig, function () {
        if (arguments[1] || arguments[2])
            return String.fromCharCode(arguments[1] ? parseInt(arguments[1], 16) : parseInt(arguments[2], 10));
        var i,
            map = ['&']; // this matches &amp;, add more to the regexp for others
        for (i = 3; i < arguments.length; ++i)
            if (arguments[i]) return map[i-3];
    });
}

Answer 6

Avoid using the innerHTML property as it can pose security risks.

If you want to steer clear of innerHTML, you can create a regular expression with str.replace to decode HTML entities in Strings.

function decode_html_entities(str) {
    return str.replace(/&(?:#x((?:[0-9a-f]{2}){1,2})|#(\d{1,3})|(amp));/ig, function () {
        if (arguments[1] || arguments[2])
            return String.fromCharCode(arguments[1] ? parseInt(arguments[1], 16) : parseInt(arguments[2], 10));
        var i,
            map = ['&']; // this matches &amp;, add more to the regexp for others
        for (i = 3; i < arguments.length; ++i)
            if (arguments[i]) return map[i-3];
    });
}

What is the best way to prevent "escaping" in the createTextElement method when using Javascript?

Answer №1

Answer №2

Answer №3

Similar questions

Clickable links and compliant W3C coding

Display just a fraction of a picture

I am having trouble clicking the button in the popup dialog titled "Before you continue" on Google while using Selenium

Reload a tab on an ajax-enabled webpage

Validating RSS Feeds with Javascript

Error encountered when attempting to retrieve JSON data in JavaScript due to being undefined

CSS image cropping is a technique used to adjust the size

What benefits and drawbacks come with setting up JS libraries in resource files compared to package.json?

Exploring the Differences Between NPM Jquery on the Client Side and Server

Encountered a WebDriverException when attempting to capture a screenshot

Applying JavaScript to HTML - Implementing a function to only display an input statement when the "Yes" option is selected, otherwise keeping it hidden

Mocha throwing 400 bad request error when making a post request with raw data

Calculate the sum of all values listed in a PHP table

Choosing the selected option in AngularJS

Using jQuery to send LocalStorage data to an email address with the help of PHP

Error: The function execute_script() is expecting between one and two arguments, however three arguments were provided

Stop automatic resizing on mobile device after postback

The Dragula NPM package appears to be functioning smoothly during development environments, yet encounters issues when transitioning to the

Exploring TypeScript: Understanding how to define Object types with variable properties names

What is causing the lack of response in the select box on Mac Chrome when I try to click on it?