document.createTextNode and entities • Flailing Wildly

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:

entity: is a string which can be either a named entity (») or a numeric entity (»)
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!