convert textareas string value to JavaScript array separated by new lines

Question

I have a textarea where the user can write up to 1000 characters. I need to get the jQuery('#textarea').val() and create an array where each item is a line of the textarea's value. That means:

This is a nice line inside the textarea.
This is another line.
(let's asume this line is empty - it should be ignored).
Someone left more than 2 new lines above.

Should be converted to a JavaScript array:

var texts = [];
text[0] = 'This is a nice line inside the textarea.';
text[1] = 'This is another line.';
text[2] = 'Someone left more than 2 new lines above.';

That way they can be easily imploded for to querystring (this is the qs format required by the provider):

example.com/process.php?q=["This is a nice line inside the textarea.","This is another line.","Someone left more than 2 new lines above."]

I tried both the phpjs explode() and string.split("\n") approaches but they doesn't take care of the extra new lines (aka line breakes). Any ideas?

Just off the top of my head, maybe try splitting it and then feeding the split bits into an array? — ayyp, Dec 12 '11 at 18:32
@AndrewPeacock i just updated the post with some info. I tried that with phpjs explode(), but it doesn't take care of the extra lines (if any) issue. — Andres SK, Dec 12 '11 at 18:33

Alex Wayne · Accepted Answer · 2011-12-12T18:46:47.233

35

String.prototype.split() is sweet.

var lines = $('#mytextarea').val().split(/\n/);
var texts = [];
for (var i=0; i < lines.length; i++) {
  // only push this line if it contains a non whitespace character.
  if (/\S/.test(lines[i])) {
    texts.push($.trim(lines[i]));
  }
}

Note that String.prototype.split is not supported on all platforms, so jQuery provides $.split() instead. It simply trims whitespace around the ends of a string.

$.trim(" asd  \n") // "asd"

Check it out here: http://jsfiddle.net/p9krF/1/

edited Dec 12 '11 at 18:46

answered Dec 12 '11 at 18:34

Alex Wayne

178,991
47
309
337

just one thing... one extra enter is allowed, two aren't (2 or more should be converted to one). any ideas? – Andres SK Dec 12 '11 at 19:18
Doesn't this snippet do that? If a line contains only whitespace it's ignored. – Alex Wayne Dec 12 '11 at 19:20
yes, but you may have up to 1 of those. this is handy for paragraphs separation. – Andres SK Dec 12 '11 at 19:35

score 7 · Answer 2 · answered Dec 12 '11 at 18:35

7

Use split function:

var arrayOfLines = $("#input").val().split("\n");

answered Dec 12 '11 at 18:35

Abdul Munim

18,869
8
52
61

should be `.split(/\n/)` – Axel Nov 07 '17 at 19:56

Phil Klein · Answer 3 · 2011-12-12T19:13:57.680

3

var split = $('#textarea').val().split('\n');
var lines = [];
for (var i = 0; i < split.length; i++)
    if (split[i]) lines.push(split[i]);
return lines;

edited Dec 12 '11 at 19:13

answered Dec 12 '11 at 18:34

Phil Klein

7,344
3
30
33

1

worked and takes care of the extra spaces, thanks! just one thing, the "int" should be removed ;) – Andres SK Dec 12 '11 at 19:01

ShankarSangoli · Answer 4 · 2011-12-12T18:45:11.320

1

Try this

var lines = [];
$.each($('textarea').val().split(/\n/), function(i, line){
   if(line && line.length){
      lines.push(line);
   }
});

edited Dec 12 '11 at 18:45

answered Dec 12 '11 at 18:36

ShankarSangoli

69,612
13
93
124

What is `.each` supposed to add? I mean, you're iterating over an array, pushing each element to a new array, and not using the original array. It doesn't look very useful. – pimvdb Dec 12 '11 at 18:43
I think now it makes senses, isn't it? – ShankarSangoli Dec 12 '11 at 18:46
It does :) Though the `line` check is not necessary; you never get `null` or `undefined`. – pimvdb Dec 12 '11 at 18:47

convert textareas string value to JavaScript array separated by new lines

4 Answers4

Linked