从数组中删除空字符串或空格字符串 - Javascript

Question

I've found this beautiful method for removing empty strings - arr = arr.filter(Boolean) .

But it doesn't seem to work on whitespace strings.

var arr = ['Apple', '  ', 'Mango', '', 'Banana', ' ', 'Strawberry'];
arr = arr.filter(Boolean);
// ["Apple", "  ", "Mango", "Banana", " ", "Strawberry"]

// should be ["Apple", "Mango", "Banana", "Strawberry"]

Is there a nice way to expand this method to removing whitespaces as well or should i trim the whitespaces by iterating the array first?

Answer 1

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#trim
arr = 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 3
var rex = /\S/;
arr = arr.filter(rex.test.bind(rex));

---

With an ES2015 (aka ES6) arrow function, that's even more concise:

// Example 4
arr = arr.filter(entry => entry.trim() != '');

or

// Example 5
arr = arr.filter(entry => /\S/.test(entry));

---

Live Examples -- The ES5 and earlier ones:

 var arr = ['Apple', ' ', 'Mango', '', 'Banana', ' ', 'Strawberry']; console.log("Example 1: " + JSON.stringify(arr.filter(function(entry) { return entry.trim() != ''; }))); console.log("Example 2: " + JSON.stringify(arr.filter(function(entry) { return /\\S/.test(entry); }))); var rex = /\\S/; console.log("Example 3: " + JSON.stringify(arr.filter(rex.test.bind(rex))));

...and the ES2015 (ES6) ones (won't work if your browser doesn't support arrow functions yet) :

 var arr = ['Apple', ' ', 'Mango', '', 'Banana', ' ', 'Strawberry']; console.log("Example 4: " + JSON.stringify(arr.filter(entry => !entry.trim() == ''))); console.log("Example 5: " + JSON.stringify(arr.filter(entry => /\\S/.test(entry))));

Answer 2

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());

 var arr = ['Apple', ' ', 'Mango', '', 'Banana', ' ', 'Strawberry']; var nonEmpty = arr.filter(e => String(e).trim()); document.getElementById('result').innerHTML = JSON.stringify(nonEmpty, 0, 4);

 <pre id="result"></pre>

Using ES5 anonymous function:

arr = arr.filter(function(e) {
    return String(e).trim();
});

 var arr = ['Apple', ' ', 'Mango', '', 'Banana', ' ', 'Strawberry']; var nonEmpty = arr.filter(function(e) { return String(e).trim(); }); document.getElementById('result').innerHTML = JSON.stringify(nonEmpty, 0, 4);

 <pre id="result"></pre>

Answer 3

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​\ \ ​\᠎\ ​-\ ​\
\
\ \ ​\　\] .

And on ECMA 262 reference , saying \\s should match "White Space" like \ (Tab, <TAB> ), \ (Vertical Tab, <VT> ), \ (Form Feed, <FF> ), \ (Space, <SP> ), \  (No-break space, <NBSP> ), \ (Byte Order Mark, <BOM> ), and other category “Zs” ( <USP> ), and also "line terminators" like \ (Line Feed, <LF> ), \ (Carriage Return, <CR> ), \
 (Line separator, <LS> ) and \
 (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​\ \ ​\᠎\ ​-\ ​\
\
\ \ ​\　\] 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.

Answer 4

You Can try this approach . I found this process simple and it work for me.

 let arrayEle = ["abc", " "," ", "def", "xyz", " "]; arrayEle = arrayEle.filter((element) => { return /\\S/.test(element); }); console.log(arrayEle);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

Answer 5

const fruits = ['Apple', undefined, ' ', 'Mango', '', 'Banana', ' ', 'Strawberry'];

fruits.filter(fruit => fruit && fruit.trim())

Output: ["Apple", "Mango", "Banana", "Strawberry"]

Filter condition: fruit && fruit.trim()

prefix - will remove all the falsy value
suffix - will trim and then remove all the falsy values

Answer 6

A one-line solution written in ES6 for quick use:

const filterArray=a=>a.filter(x=>typeof x!=='string'||!!x.trim())

Some advantages of this are that it ignores anything that is not a string.

Without ES6:

function filterArray(a) {
  return a.filter(function(x) {
    return typeof x !== 'string' || !!x.trim()
  })
}

Example:

 const filterArray=a=>a.filter(x=>typeof x!=='string'||!!x.trim()) console.log(filterArray([1, 2, 4, '', '']))

Or if your browser doesn't support ES6 (which it probably does):

 function filterArray(a) { return a.filter(function(x) { return typeof x !== 'string' || !!x.trim() }) } console.log(filterArray([1, 2, 4, '', '']))

Answer 7

I used filter and checking if element length is not equal to zero. It worked for me, and this solution is short:

 const arr = ['Apple', '', 'Mango', '', 'Banana', '', 'Strawberry'] const arr2 = arr.filter(item => item.length !== 0) console.log(arr2)

Answer 8

function clearSpace(arr){
    for (var key in arr) {
        if (arr[key] == "") {
            arr.splice(key, 1)
            clearSpace(arr)
        }
    }
}
var arr = ["","a","b","",""]
clearSpace(arr)
console.log(arr)

//I hope this helps you!!
//Vu Tien Luong - 3GTEL

Answer 9

Could use Array.protype.join() , String.prototype.split() with parameter RegExp /\\s|,/ followed by .filter(Boolean)

 var arr = ['Apple', ' ', 'Mango', '', 'Banana', ' ', 'Strawberry']; arr = arr.join().split(/\\s|,/).filter(Boolean); console.log(arr)