.trim() is not a function [duplicate]

Question

I have a very simple string that can contains a list which can possibly contain whitespace:

string = "one, two,three ";

I want to first split the string by , to create an array of three strings and then remove any whitespace using .trim()

array = string.split(',').trim();

which returns "one","two","three"

however sometimes it fails and returns an error .trim() is not a function

I read that .trim() returns a new string not a trimmed version of the current string. So i used a for loop to do the above:

array = string.split(',');
for (var i = 0; i < array.length; i++) {
    var item = array[i].trim();
    array.push(item);
}

which returns "one","two","three"

my question is, can anyone explain why i was getting the error only sometimes? if the array never changed from my example and can anyone provide a cleaner solution to my fix.

Starobin

you should be getting TypeError: array.split is not a function every time, so it would never ever get the error you say you are getting – Earthly

The split() method splits a String object into an array of strings by separating the string into substrings, from the doc – Legislature

There is no split method on an array. Even if you start with a string instead of an array then the split method returns an array and there is no trim method on an array. If you would push an item into the array that you are looping over, then you would never reach the end of the array, it would be an infinite loop. So, none of the code that you show would ever return anything at all. – Indifferentism

if the first line is a typo and should be array = "one, two,three "; - then your last piece of code will run until the browser has had enough and begs you to stop the script running – Earthly

sorry all, string.split(',').trim(); returns an array so i just poorly named my example, the original var is a string as a lot of you suggest. – Starobin

@JaromandaX yes it was a typo as i was rewriting real code to make an easier to read example.. went well as you can tell. Fancy answering the updated as you seem knowledgeable on the subject. – Starobin

Answer 1

In ES6 compliant runtime (i.e: node 4+) you can use use arrow function that gives you a less verbose code to achieve your goal:

> "one, two, three ".split(',').map(s => s.trim());
[ 'one', 'two', 'three' ]

Chicken

Answer 2

split() does not work on arrays, but on strings. As you wrote your String into an array you have to get that string via array[0], since the string is the very first Element.

If you splitted your string into an array you can call the map function and trim each value in your newly created array. like this:

array = ["one, two,three "];
array = array[0].split(',')
array = array.map(function(a){return a.trim()})

Or in short:

array = ["one, two,three "][0].split(',').map(function(a){return a.trim()})

Gnostic

Answer 3

It is apparent that there could be other problems with your codes but sticking specifically to your question .trim() is not a function, there is a change in how the function is called especially for jQuery 3.5 upwards. This is already explained elsewhere but brought here for quick reference:

For codes using jQuery 3.5 and below, the usual function call works:

let xString = " This is my string with spaces  ";
let xTrimmed = xString.trim();

But for codes using jQuery 3.5 upwards:

let xString = " This is my string with spaces  ";
let xTrimmed = $.trim(xString);

Pippy

Answer 4

I saw this same issue trying to iterate the output of String.split using a "for (var i in splitTokens)". Note it only happened to me in the browser (Chrome in my case) i.e. not when using the same code in a node process.

It confused me until I hooked up a debugger and then I saw the problem. String.split returns an Array object instance (splitTokens), which has functions on it ("each" etc). The "for (var i in splitTokens)" loop iterates the functions too, so splitTokens[i] was getting back e.g. the each function of the Array instance, which caused things to explode if I tried to call e.g. "trim()" (because the function object doesn't have a function called trim()).

Nephograph

Answer 5

The answer here of Tom Fenelly is also right. Sometimes you may encounter this trim issue in your code although you know that your variable is already a string but somehow used as a reactive variable and regarded by the JS compiler as an object instance and not as string, or something like that. So you make sure that your string variable you are getting trimmed of is a string by wrapping it with String class like this:

String(yourStringVar).trim();

I myself have experienced this trim issue and this solution worked for me, so I am documenting it here.

Rillings