document.createTextNode and entities

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;
	}
	else return e.innerHTML;
}

entity() has two parameters:

1. entity: is a string which can be either a named entity (») or a numeric entity (»)
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 '+[b]entity([/b]'»'[b])[/b]+' 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!

Comments for this post are now closed.