• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

197
Vistas
How to filter input value when a specific value is typed

I need to listen to an input and get its value dynamically,when a specific "flag" happens to be typed,get whatever is typed next until a flag appears again.

let me explain :

lets say i have an array of "flags"

let flags = ['foo','bar','baz']

and i have an input to listen which gives me the following string (dynamically,character by character):

let input = "whateveridontneedthatfoodavidbarjennifer-andrew-billbazericfoojohnbarchristen"

*foo and bar appear twice and baz once

i want somehow to create,maybe an object like this :

{
foo: ["david","john"],
bar: ["jennifer-andrew-bill","christen"],
baz: ["eric"]
}

or 3 separate arrays,i dont really care about the structure as long i filter the value properly

about 3 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Good answer from @Apple BS, I just want to propose this syntax:

const flags = ['foo', 'bar', 'baz']
const str = 'whateveridontneedthatfoodavidbarjennifer-andrew-billbazericfoojohnbarchristen'
const strSplit = str.split(new RegExp(`(${flags.join('|')})`, 'g'))
const obj = Object.fromEntries(flags.map(f => [f, []]))

strSplit.forEach((el, i) => {
  if (flags.includes(el)) obj[el].push(strSplit[i + 1])
})

console.log(obj)

EDIT:

There is an other version using regex capture groups.

const str = 'whateveridontneedthatfoodavidbarjennifer-andrew-billbazericfoojohnbarchristen'
const flags = ['foo', 'bar', 'baz'], flagsJoin = flags.join('|')
const obj = Object.fromEntries(flags.map(f => [f, []]))
const regex = new RegExp(`(${flagsJoin})(.*?)(?=${flagsJoin}|$)`, 'g')

for (const [, flag, sub] of str.matchAll(regex)) obj[flag].push(sub)

console.log(obj)

about 3 years ago · Santiago Trujillo Denunciar

0

First, construct a regex:

let regex = '('; // parenthesis is added for capturing groups, which means the flags will be captured too
for (f of flags) regex += f + '|';
regex = new RegExp(regex.substring(0, regex.length - 1) + ')', 'g'); // construct the regex with global flag
// regex = /(foo|bar|baz)/g

Then, split the string:

s = s.split(regex) // ["whateveridontneedthat", "foo", "david", "bar", "jennifer-andrew-bill", "baz", "eric", "foo", "john", "bar", "christen"]

Finally, loop through the splitted string and add them to the object.

Below is the full example:

let flags = ['foo', 'bar', 'baz'];
let s = "whateveridontneedthatfoodavidbarjennifer-andrew-billbazericfoojohnbarchristen";
let regex = '(';
let obj = {};
for (f of flags)  regex += f + '|';
regex = new RegExp(regex.substring(0, regex.length - 1) + ')', 'g');
s = s.split(regex);

for (let i = 0; i < s.length; i++) {
  for (let j = 0; j < flags.length; j++) { // checking for flags
    if (s[i] == flags[j]) { // found the flag
      if (flags[j] in obj) obj[flags[j]].push(s[i + 1]); // array exist in object
      else obj[flags[j]] = [s[i + 1]]; // create array in object
      i++; // skip next s[i]
      break; // s[i] can only be one of the flag
    }
  }
}
console.log(obj);

about 3 years ago · Santiago Trujillo Denunciar

0

On top of @AppleBS's and @Jean Will's answer,

Just simplify the for loop.

const flags = ["foo", "bar", "baz"];
const str =
    "whateveridontneedthatfoodavidbarjennifer-andrew-billbazericfoojohnbarchristen";
const strSplit = str.split(new RegExp(`(${flags.join("|")})`, "g"));

const output = strSplit.reduce((carry, item, idx, arr) => {
    if (idx !== 0) {
        if (idx % 2 === 0) carry[arr[idx - 1]].push(item);
        else if (!carry[item]) carry[item] = [];
    }
    return carry;
}, {});

console.log(output);

about 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda