web-dev-qa-db-fra.com

Supprimer les chaînes vides ou espaces blancs du tableau - Javascript

J'ai trouvé this belle méthode pour supprimer les chaînes vides - arr = arr.filter(Boolean).

Mais cela ne semble pas fonctionner sur les chaînes d'espaces.

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

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

Existe-t-il un bon moyen d'étendre cette méthode pour supprimer également les espaces blancs ou dois-je couper les espaces blancs en itérant d'abord le tableau?

javascriptarraysregexstringfilter
13
Daniel

filter fonctionne, mais vous avez besoin de la bonne fonction de prédicat, ce que Boolean n'est pas (à cet effet):

// Example 1 - Using String#trim (added in ES2015, needs polyfilling in outdated
// environments like IE)
arr = arr.filter(function(entry) { return entry.trim() != ''; });

ou

// Example 2 - Using a regular expression instead of String#trim
arr = arr.filter(function(entry) { return /\S/.test(entry); });

(\S Signifie "un caractère non blanc", donc /\S/.test(...) vérifie si une chaîne contient au moins un caractère non blanc.)

ou (peut-être un peu par-dessus bord et plus difficile à lire)

// Example 3
var rex = /\S/;
arr = arr.filter(rex.test.bind(rex));

Avec une fonction de flèche ES2015 (aka ES6), c'est encore plus concis:

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

ou

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

Exemples en direct - L'ES5 et les versions antérieures:

var arr = ['Apple', '  ', 'Mango', '', 'Banana', ' ', 'Strawberry'];
snippet.log("Example 1: " + JSON.stringify(arr.filter(function(entry) { return entry.trim() != ''; })));
snippet.log("Example 2: " + JSON.stringify(arr.filter(function(entry) { return /\S/.test(entry); })));
var rex = /\S/;
snippet.log("Example 3: " + JSON.stringify(arr.filter(rex.test.bind(rex))));
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

... et ceux ES2015 (ES6) (ne fonctionnera pas si votre navigateur ne prend pas encore en charge les fonctions flèches) :

var arr = ['Apple', '  ', 'Mango', '', 'Banana', ' ', 'Strawberry'];
snippet.log("Example 4: " + JSON.stringify(arr.filter(entry => !entry.trim() == '')));
snippet.log("Example 5: " + JSON.stringify(arr.filter(entry => /\S/.test(entry))));
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
31
T.J. Crowder

Vous pouvez profiter de la chaîne vide comme valeur falsifiée.

Vous pouvez utiliser Array#filter avec String#trim .

Utilisation de la fonction Flèche ES6:

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>

Utilisation de la fonction anonyme ES5:

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>
7
Tushar

Basé sur cette référence MDN :

\s
Correspond à un seul caractère d'espace blanc, y compris l'espace, la tabulation, le saut de page, le saut de ligne et d'autres espaces Unicode. Équivalent à [ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000\ufeff].

Et sur référence ECMA 262 , en disant que \s Devrait correspondre "Espace blanc" comme \u0009 (Tab, <TAB>) , \u000B (Onglet vertical, <VT>), \u000C (Saut de page, <FF>), \u0020 (Espace, <SP>), \u00A0 (Espace sans interruption, <NBSP>), \uFEFF (Marque d'ordre des octets, <BOM>), Et autres catégories "Z" ( <USP>), Ainsi que "terminateurs de ligne" comme \u000A (Saut de ligne, <LF>), \u000D (Retour chariot, <CR>), \u2028 (Séparateur de ligne, <LS>) Et \u2029 (Séparateur de paragraphe, <PS>), Vous pouvez utiliser le code suivant pour supprimer les éléments qui sont soit vides, soit des espaces uniquement si trim() n'est pas nativement disponible:

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

Si certains anciens navigateurs se comportent différemment avec \s, Remplacez-le par la classe de caractères [ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000\ufeff]:

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

Et vous pouvez également le personnaliser davantage pour inclure de nouveaux espaces Unicode à venir.

3
Wiktor Stribiżew

Vous pouvez essayer ceci approche . J'ai trouvé ce processus simple et cela fonctionne pour moi.

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>
0
Atit More