Tuesday, 29 January 2013

Replacing C2A0 Spaces in JavaScript

I've been doing some work recently with input entered into a contenteditable="true" element, rather than a plain old text input box. This allows me to do some nice styling on the inputted text, but can cause unwanted side effects.

One of these is the appearance of the C2A0 character, otherwise known as the non-breaking space. When typing a space within a content editable, some browsers will insert   instead of a normal ASCII 32 space character.

Here's some code that shows what happens

// suppose this is the content editable..
var element = document.createElement("div");
// and you just typed a space
element.innerHTML=" "

// we get the text to send to the server
var text = element.innerText; 
// on Chrome text will a string that looks like " "
// on Firefox you'll get undefined
// and on IE you'll get an ASCII 32 space!
// so on some browsers..
text == " "; // returns false
The difference becomes obvious when you encode it:
encodeURIComponent(" "); // returns "+"
encodeURIComponent(text); // returns "%C2%A0"
To get around this problem, I wrote the following.
This uses jQuery for brevity. It also yields consistent results across different browsers.

(function() {
    var nbsp = jQuery("
 
").text(); return { getText: function(element) { return jQuery(element).text().replace(nbsp, " "); } } })();
Hope it helps somebody.

No comments:

Post a Comment