HOME → POSTS → 2006

document.createTextNode and entities

Projects and Code254 words2 minutes to read

One problem that I’ve had when working with dynamic DOM nodes is the inability to use entities with document.createTextElement(). I’ve read suggestions about using utf–16/ucs–2 values, but how do you find them and how do you convert them? This led me on a journey to figure out how to handle this. I ended up digging through some TinyMCE source code, and found a gem of a function that I then added a ‘stupefy’ mode to. Here’s the code:

function entity(str, mode) {
    var str = (str) ? str : '';
    var mode = (mode) ? mode : 'string';

    var e = document.createElement("div");
    e.innerHTML = str;

    if (mode === 'numeric') {
        return '&#' + e.innerHTML.charCodeAt(0) + ';';
    } else if (mode === 'utf16') {
        var un = e.innerHTML.charCodeAt(0).toString(16);

        while (un.length < 4) {
            un = "0" + un;
        }

        return "\\u" + un;
    }

    return e.innerHTML;
}

entity() has two parameters:

  1. entity: is a string which can be either a named entity (») or a numeric entity (&#187;)
  2. mode: is an optional value that accepts ‘numeric’, ‘utf16’, or ‘string’. Defaults to ‘string’.

You’d use it like this:

// Normal mode
var div = document.createElement('div');
var text = document.createTextNode('Parent ' + entity('»') + ' Child');
div.appendChild(text);

// Stupefy mode
var num = "The numeric entity for » is " + entity('»', 'numeric');
var utf = "The UTF-16 entity for » is " + entity('»', 'utf16');

I hope this can help other people out there who’ve run into the same problem as many times as I have!

Ryan Parman

is an engineering manager with over 20 years of experience across software development, site reliability engineering, and security. He is the creator of SimplePie and AWS SDK for PHP, patented multifactor-authentication-as-a-service at WePay, defined much of the CI/CD and SRE disciplines at McGraw-Hill Education, and came up with the idea of “serverless, event-driven, responsive functions in the cloud” while at Amazon Web Services in 2010. Ryan's aptly-named blog, , is where he writes about ideas longer than . Ambivert. Curious. Not a coffee drinker.