I've had to split() a large string into an array, whatever way it worked I'm now left with a space before each element.

For example:

var array = [" hello"," goodbye"," no"];

How can I get rid of this?

Split code as requested:

var depots = v.innerHTML.split(',');

I've had to split() a large string into an array, whatever way it worked I'm now left with a space before each element.

For example:

var array = [" hello"," goodbye"," no"];

How can I get rid of this?

Split code as requested:

var depots = v.innerHTML.split(',');

• javascript
• arrays

6 Answers 6

You can use .map and .trim

var array = [" hello"," goodbye"," no"];
array = array.map(function (el) {
  return el.trim();
});
console.log(array);

if you use ES2015, you can do it shorter, with arrow function

array = array.map(el => el.trim());

Don't use Array#map() to change each element in the array, when you can remove the spaces from the string itself when splitting it by a delimiter.

Use String#trim() with String#split() with RegEx

str.trim().split(/\s*,\s*/)

The regex \s*,\s* will match ma surrounded by any number(including zero) of spaces.

Live Demo:

var regex = /\s*,\s*/;

document.getElementById('textbox').addEventListener('keyup', function() {
  document.getElementById('result').innerHTML = JSON.stringify(this.value.trim().split(regex));
});

<input type="text" id="textbox" />
<pre id="result"></pre>

trim() will remove the leading and trailing spaces from the string and split with the RegEx ,\s* will split the string by ma followed by any number of spaces.

The same results can also be achieved using the negated RegEx with String#match with global flag.

str.match(/[^,\s]+/g)

Why map() should not be used?

Using map in this case requires extra overheads. First, split the string by , and then iterate over each of the element of the array and remove the leading and trailing spaces using trim and then updating the array. This is bit slower than using the split with above RegEx.

var array = [" hello"," goodbye"," no"].toString().replace(/\s*\,\s*/g, ",").trim().split(",");

console.log(array)

Issue in Tushar's Answer

Just one more thing to add in @Tushar's answer. Answer is great and well explained. One thing just missed that I think it's not question's requirement.

If user enter double ma instead of single in result an empty string will be added/return into the array. I just did a little change to the code.

.filter(elem => elem.length !== 0)

Explaination

filter() iterate into each element of the array and check if it is empty or not by String's .length property. If an element length will not be equal to zero it will be added/return as element into array. And at the last a brand new filtered array will be returned.

var regex = /\s*,\s*/;

document.getElementById('textbox').addEventListener('keyup', function() {
  document.getElementById('result').innerHTML = JSON.stringify(this.value.trim().split(regex).filter(elem => elem.length !== 0));
});

<input type="text" id="textbox" />
<pre id="result"></pre>

Loop through each array element and trim it . As like below

for (int i = 0; i < array.length; i++)
    trimmedArray[i] = array[i].trim();

You need these two jQuery functions:

1.) iterate through array element with ability to edit items: http://api.jquery./jquery.map/

2.) remove blank spaces from beginning and end of a string: http://api.jquery./jQuery.trim/

Use them this way:

array = $.map(array, function(value) { return value.trim();});

Check this JSFiddle: https://jsfiddle/L00eyL4x/49/