Filter array of mixed values to different array

user_6440372 0
Viewed 841

i have array,

arr = [1, 2, "a", "a1", "3", "qw7", "b", "4", "xyz", "abcd"]

i like to filter it to according to its content iterate over each find out whether its alphabet character or number, filter out alphanumeric values to separate array, numeric to separate and alphabets to separate,

out1 = [1, 2, 3, 4]
out2= ["a", "b", "x", "y", "z", "c", "d"]
out3= ["a1", "qw7"]

i can do for out1, cant for out2 and out3

out1 = arr.filter(Number) // to get required output, [1, 2, 3, 4]

i tried using,

arr.map( i=>{
   if (i typeof string){
      out2.push(i);
   }
})
arrays javascript
8 Answers

const arr = [1, 2, "a", "a1", "3", "qw7", "b", "4", "xyz", "abcd"]

const filterNumeric = (arr = []) =>
  arr.filter(e => /^[0-9]+$/.test(e));
const filterAlphabetic = (arr = []) =>
  new Set([...
    arr.filter(e => /^[A-Za-z]+$/.test(e)).flatMap(str => str.split(''))
  ]);
const filterAlphaNumeric = (arr = []) =>
  arr.filter(e => /^[A-Za-z]+[0-9]+$/.test(e));
  
console.log("numeric: ",      ...filterNumeric(arr));
console.log("alphabetic: ",   ...filterAlphabetic(arr));
console.log("alpa-numeric: ", ...filterAlphaNumeric(arr));

user_74863130

You can try the following way:

var arr = [1, 2, "a", "a1", "3", "qw7", "b", "4", "xyz", "abcd"]

// use map() to convert the string number to number
var out1 = arr.filter(Number).map(c => Number(c));
console.log(out1);

// use flatMap() and split() with filter, regex test() and set
var out2 = [...new Set(arr.filter(i => /^[a-zA-Z]+$/.test(i)).flatMap(c => c.split('')))];
console.log(out2);

// use filter with rezex test()
var out3 = arr.filter(i => /^[a-zA-Z]+\d+$/.test(i));
console.log(out3);

user_74613810

To filter out alpha characters you can use:

const out2= ["a", "b", "x", "y", "z", "c", "d", 1]

console.log(out2.filter(a => a.toString().match(/^[A-Za-z]/)))

user_3606740

You can group your array based on regex for number, character and alphanumeric.

const arr = [1, 2, "a", "a1", "3", "qw7", "b", "4", "xyz", "abcd"],
      result = arr.reduce((r,v) => {
        if(String(v).match(/^\d+$/)) {
          r.number.push(v);
        } else if(v.length === 1 && v.match(/[a-z]/i)) {
          r.character.push(v);
        } else {
          r.alphaNumeric.push(v);
        }
        return r;
      },{number: [], character: [], alphaNumeric: []});
console.log(result);

user_47584940

You could check the type and push to the wanted array.

const
    array = [1, 2, "a", "a1", "3", "qw7", "b", "4", "xyz", "abcd"],
    result = array.reduce((r, v) => {
        switch (true) {
            case isFinite(v): 
                r.numbers.push(+v);
                break;
            case /^[a-z]+$/i.test(v.toString()):
                [...v.toString()].forEach(c => {
                    if (!r.alphabet.includes(c)) r.alphabet.push(c);
                });
                break;
            default:
                r.misc.push(v);
        }
        return r;
    }, { numbers: [], alphabet: [], misc: [] });

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

user_14476750

You could solve the issue with a single loop, doing something like this:

function splitByType(arr) {
  const allChars = []
  const allStrings = []
  const allNums = []

  arr.forEach(item => {
    if (typeof item === 'number' || /^[0-9]+$/.test(item)) {
      const n = typeof item === 'number' ? item : Number(item);
      allNums.push(n);
    } else if (/^[A-Za-z]+$/.test(item)) {
      allChars.push(...item.split(''));
    } else {
      allStrings.push(item)
    }
  });

  return {
    chars: [...new Set(allChars)],
    strings: [...new Set(allStrings)],
    nums: [...new Set(allNums)]
  }
}

//test
const input = [1, 2, "a", "a1", "3", "qw7", "b", "4", "xyz", "abcd"];

const { chars, strings, nums } = splitByType(input);

console.log('input:', input);
console.log('chars:', chars);
console.log('nums:', nums)
console.log('strings:', strings)

user_142015280

This should account for all the cases you're looking for. A few notes on each case here:

  1. out1 :: In your first case, to convert any numerical strings to numbers, you will also need to use the array map method, but you can exclude that if you don't mind leaving some of the numbers as strings.
  2. out2 :: For your second case, in order to get all letters separated for your out2, we will need to join and then re-split the strings. To remove any duplicates, we use a filter method, though you could also use this more ES6 Set method if you like: [...new Set(arr)]
  3. out3 :: For your third and final case, we can use a very similar filter to the one we used for out2 but instead of checking that every character is NOT a number, we check to make sure that some are numbers. We also remove the join and split we used, as the desired result for out3 are multi-character strings.

Here are my functions:

const arr = [1, 2, "a", "a1", "3", "qw7", "b", "4", "xyz", "abcd"]

const out1 = arr.filter(Number).map(Number)
// -> [1, 2, 3, 4]

const out2 = arr.filter(e => !Number(e) && e.split('').every(f => !Number(f))).join('').split('').filter((e,i,a) => a.indexOf(e) === i)
// -> ["a", "b", "x", "y", "z", "c", "d"]

const out3 = arr.filter(e => !Number(e) && e.split('').some(f => Number(f))).filter((e,i,a) => a.indexOf(e) === i)
// -> ["a1", "qw7"]

Feel free to test any of these methods in the demo I've set up below. Adjust the input array however you like and then select the method using the select box:

const filter1 = arr => arr.filter(Number).map(Number);
const filter2 = arr => arr.filter(e => !Number(e) && e.split('').every(f => !Number(f))).join('').split('').filter((e,i,a) => a.indexOf(e) === i);
const filter3 = arr => arr.filter(e => !Number(e) && e.split('').some(f => Number(f))).filter((e,i,a) => a.indexOf(e) === i);

arrFilters = {
  filter1: arr => filter1(arr),
  filter2: arr => filter2(arr),
  filter3: arr => filter3(arr)
};

const input = document.getElementById('input');
const filter = document.getElementById('filter');
const output = document.getElementById('output');

const processInput = () => {
  try {
    output.value = JSON.stringify(arrFilters[filter.value](JSON.parse(input.value)));
    console.log(`${filter.value} output: ${JSON.stringify(arrFilters[filter.value](JSON.parse(input.value)))}`);
  } catch (e) {
    output.value = "";
  }
}
processInput();

input.addEventListener('input', processInput);
filter.addEventListener('change', processInput);
body {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  padding-bottom: 200px;
}
input, select {
  margin-top: 5px;
  padding: 2px 4px;
  box-sizing: border-box;
}
input:not(:last-child), select:not(:last-child) {
  margin-bottom: 10px;
}
#input {
  width: 100%;
}
Input Array
<input id="input" value='[1, 2, "a", "a1", "3", "qw7", "b", "4", "xyz", "abcd"]'>

Filter Method
<select id="filter">
  <option value="filter1">Filter #1 - Retrieve Numeric</option>
  <option value="filter2">Filter #1 - Retrieve Alphabetical</option>
  <option value="filter3">Filter #1 - Retrieve Alpha-Numeric</option>
</select>

Output Array
<input id="output" readonly="readonly">

user_38242490

Another option to get 3 arrays with unique values is to use a Set.

You can loop though the array and check for numbers or alpha using a pattern [a-z] using a case insensitive match with the /i flag.

To check for only alphanumeric, you can use a pattern ^(?=[a-z\d]*[a-z])[a-z\d]*\d[a-z\d]*$ to check that the string contains at least a char a-z and a digit

const num = new Set(),
  alpha = new Set(),
  alNum = new Set();
const arr = [1, 2, "a", "a1", "3", "qw7", "b", "4", "xyz", "abcd"];

for (let i = 0; i < arr.length; i++) {

  const item = arr[i];

  if (isFinite(item)) {
    num.add(+item);
    continue;
  }
  if (/^[a-z]+$/i.test(item)) {
    item.split('').forEach(alpha.add, alpha);
    continue;
  }
  if (/^(?=[a-z\d]*[a-z])[a-z\d]*\d[a-z\d]*$/i.test(item)) {
    alNum.add(item)
  }
}

console.log(Array.from(num));
console.log(Array.from(alpha));
console.log(Array.from(alNum));

user_54249880
Related