Remove empty or whitespace strings from array - Javascript
filter
works, but you need the right predicate function, which Boolean
isn't (for this purpose):
// Example 1 - Using String#trim (added in ES2015, needs polyfilling in outdated// environments like IE)arr = arr.filter(function(entry) { return entry.trim() != ''; });
or
// Example 2 - Using a regular expression instead of String#trimarr = arr.filter(function(entry) { return /\S/.test(entry); });
(\S
means "a non-whitespace character," so /\S/.test(...)
checks if a string contains at least one non-whitespace char.)
or (perhaps a bit overboard and harder to read)
// Example 3var rex = /\S/;arr = arr.filter(rex.test.bind(rex));
With an ES2015 (aka ES6) arrow function, that's even more concise:
// Example 4arr = arr.filter(entry => entry.trim() != '');
or
// Example 5arr = arr.filter(entry => /\S/.test(entry));
Live Examples -- The ES5 and earlier ones:
...and the ES2015 (ES6) ones (won't work if your browser doesn't support arrow functions yet):
You can take advantage of empty string as falsy value.
You can use Array#filter
with String#trim
.
Using ES6 Arrow function:
arr = arr.filter(e => String(e).trim());
Using ES5 anonymous function:
arr = arr.filter(function(e) { return String(e).trim();});
Based on this MDN reference:
\s
Matches a single white space character, including space, tab, form feed, line feed and other Unicode spaces. Equivalent to[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]
.
And on ECMA 262 reference, saying \s
should match "White Space" like \u0009
(Tab, <TAB>
), \u000B
(Vertical Tab, <VT>
), \u000C
(Form Feed, <FF>
), \u0020
(Space, <SP>
), \u00A0
(No-break space, <NBSP>
), \uFEFF
(Byte Order Mark, <BOM>
), and other category “Zs” (<USP>
), and also "line terminators" like \u000A
(Line Feed, <LF>
), \u000D
(Carriage Return, <CR>
), \u2028
(Line separator, <LS>
) and \u2029
(Paragraph separator, <PS>
), you can use the following code to remove elements that are either empty or whitespace only if trim()
is not natively available:
var arr = ['Apple', ' ', 'Mango', '', 'Banana', ' ', 'Strawberry'];arr = arr.filter(s => s.replace(/\s+/g, '').length !== 0);// Or for ES5// arr = arr.filter(function (el) { return el.replace(/\s+/g, '').length !== 0; });console.log(arr);
In case some old browsers behave differently with \s
, replace it with [ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]
character class:
arr = arr.filter(function (el) { return el.replace(/[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]+/g, '').length !== 0; });
And you can also customize it further to include new Unicode spaces to come.