Different behaviour of str.split(' ') in editable divs

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

If you have `string = "hello "` then `string.split(" ")` _does_ produce an array with two elements: `["hello", ""]` as shown here: http://jsfiddle.net/zgXUp/ - can you reproduce your problem in a [fiddle](http://jsfiddle.net) of your own? — nnnnnn, Jul 15 '12 at 00:37
Here a "working" example: http://jsfiddle.net/vDDqG/1/. Look at the console. Whitespace is included in myArray. — r_31415, Jul 15 '12 at 00:47
@doniyor - I didn't say the delimiter became the array element. Read my comment again - the second array element is an _empty_ string. — nnnnnn, Jul 15 '12 at 00:47
By the way, you need to add something like "abc " in the editable div. Just in case it wasn't clear enough. — r_31415, Jul 15 '12 at 00:51

score 3 · Accepted Answer · answered Jul 15 '12 at 00:51

3

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/

answered Jul 15 '12 at 00:51

nnnnnn

147,572
30
200
241

You're welcome. Note that if you enter several trailing spaces in a row it looks like some of them end up as normal spaces and some as non-breaking spaces. – nnnnnn Jul 15 '12 at 00:55
Yes, I noticed that. By the way, what did you use to know the code of that character... something like str.charCodeAt(0)? – r_31415 Jul 15 '12 at 01:50
Yeah, I figured what you were seeing wasn't really a space so I used `.charCodeAt()` to confirm - as in the latest version of that demo fiddle... – nnnnnn Jul 15 '12 at 03:49

score 0 · Answer 2 · answered Jul 15 '12 at 00:03

0

check before splitting if the string has whitespace, if yes, then split normally and add this into array including the whitespace..

...
var splitted;
var array[];
String whitespace = "";
if(string.contains("")){
  splitted = string.split("");
  array.insert(splitted,whitespace);
 }
array.insert(splitted);

code is just from my fantasy, i am not coding guru, but is it okay for you?

answered Jul 15 '12 at 00:03

doniyor

36,596
57
175
260

Not sure what language you're referring to, but taking your idea, I wasn't able to tell whether a string coming from an editable div contains a whitespace. I used string.indexOf(' ') but it returns false every time. – r_31415 Jul 15 '12 at 00:35
my code is just pseudo code, not a working one. look here: http://stackoverflow.com/questions/1731190/javascript-check-if-a-string-has-white-space – doniyor Jul 15 '12 at 00:42

Different behaviour of str.split(' ') in editable divs

2 Answers2