Question

I noticed this “interesting” behaviour. Suppose you have a <div id="editableDiv" contenteditable="true"></div>

and you want to get its value (in this case, assume your value is something like ‘hello ‘ (with a trailing whitespace). Afterwars, you want to convert that string into an array using split():

var string = window.getSelection().anchorNode.data // hello_ (_ means whitespace)
var myArray = string.split(' ') // ['hello '] -> includes whitespace!

However, when you manipulate a string without having to get that value through an editable div, everything works as usual.

Why and how can I force trailing whitespaces to produce another empty value in the resulting array (['hello', ''])?

Thanks

Answer 1

The problem is that a trailing space from an editable div appears to be character 160 which is a non-breaking space, rather than character 32 which is a “normal” space. You can work around this by splitting on a regex that matches a “normal” space or character 160 as follows:

var string = window.getSelection().anchorNode.data;
var myArray = string.split(/ |\u00A0/);
console.log(myArray);

Demo: http://jsfiddle.net/zgXUp/2/