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
– ayyp, Commented Dec 12, 2011 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
– Andres SK, Commented Dec 12, 2011 at 18:33

Alex Wayne · Accepted Answer · 2011-12-12 18:46:47Z

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, 2011 at 18:46

answered Dec 12, 2011 at 18:34

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andres SK Over a year ago

just one thing... one extra enter is allowed, two aren't (2 or more should be converted to one). any ideas?

Alex Wayne Over a year ago

Doesn't this snippet do that? If a line contains only whitespace it's ignored.

Andres SK Over a year ago

yes, but you may have up to 1 of those. this is handy for paragraphs separation.

Abdul Munim · Accepted Answer · 2011-12-12 18:35:24Z

7

Use split function:

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

answered Dec 12, 2011 at 18:35

Abdul Munim

19.2k8 gold badges54 silver badges61 bronze badges

1 Comment

Axel Over a year ago

should be .split(/\n/)

Phil Klein · Accepted Answer · 2011-12-12 19:13:57Z

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, 2011 at 19:13

answered Dec 12, 2011 at 18:34

Phil Klein

7,5143 gold badges34 silver badges33 bronze badges

1 Comment

Andres SK Over a year ago

worked and takes care of the extra spaces, thanks! just one thing, the "int" should be removed ;)

ShankarSangoli · Accepted Answer · 2011-12-12 18:45:11Z

1

Try this

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

edited Dec 12, 2011 at 18:45

answered Dec 12, 2011 at 18:36

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

3 Comments

pimvdb Over a year ago

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.

ShankarSangoli Over a year ago

I think now it makes senses, isn't it?

pimvdb Over a year ago

It does :) Though the line check is not necessary; you never get null or undefined.

Collectives™ on Stack Overflow

convert textareas string value to JavaScript array separated by new lines

4 Answers 4

3 Comments

1 Comment

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related