POSTS FOR 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

Ryan Parman is an experienced software engineer, open source evangelist, and passionate user advocate currently living in Seattle. He is the creator of and , and worked on DevOps and Security at . He is now bringing learning into the digital age as an Engineering Lead and Site Reliability Engineer at . Ryan's aptly-named blog, , is where he writes about ideas longer than .