Cómo buscar por texto, independientemente de mayúsculas, minúsculas y tildes

He tenido que acortar el título porque era muy largo, pero lo que te voy a enseñar son dos ejemplos, uno para buscar en cualquier parte dentro string, y otro para buscar en cualquier parte dentro de un array de strings, independientemente de mayúsculas, minúsculas y tildes.

Todo esto es magic, voy a intentar explicarlo lo mejor que pueda.

Primero vamos a normalizar la cadena en Unicode “descompuesta”, porque hay letras que parecen iguales, pero no lo son 👀

Por ejemplo, para “á” podrías tener “\u00E1” (á) o “\u0061\u0301” (a + ´) así que con .normalize('NFD') vamos a separarlo, es decir, si tenemos “\u00E1” lo separamos a “\u0061\u0301” ahora podemos quitar la segunda parte que sería la tilde con .replace(/\p{Diacritic}/gu, ''); (versión más moderna) o .replace(/[\u0300-\u036f]/g, '') si das soporte a navegadores antiguos.

Aquí tenéis una lista de los caracteres que comprenden el rango de 0300 a 036F.

Ahora podemos hacer un .toLowerCase() o .toUpperCase() para igualar las letras a minúsculas o mayúsculas y ya tenemos el otro problema resuelto.

Como extra podemos poner un .trim() para eliminar posibles espacios al principio y al final del string.

Esto se lo aplicaríamos a los dos strings a comparar y utilizamos una expresión regular. En este punto podemos elegir que queremos hacer con la expresión regular, para este ejemplo voy a usar matchAll que nos va a devolver un iterador con las posiciones de lo que ha encontrado, y lo desestructuramos con ..., pero dependiendo para que lo queráis os puede interesar match, matchAll, test…

Nos quedaría algo así:

const paragraph = 'Mi super frase con tilde es lo más, y espero que os sirva de ayuda. Más poco más puedo hacer por vosotros amigos y amigas.';
const search = '  Mas  ';

const paragraphNormalize = paragraph.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase().trim();
const searchNormalize = search.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase().trim();
const regex = new RegExp(searchNormalize, "g");
const result = [...paragraphNormalize.matchAll(regex)];

Ahora vamos a ver como buscar dentro de un array. He puesto un filter por poner un ejemplo, pero puede ser cualquier cosa, un filter, un find, un findIndex, every…

const array = ['Pan', 'Leche', 'leche evaporada', 'lechuga', 'tomates'];
const search = '  lE  ';

const searchNormalize = search.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase().trim();
const result = array.filter(item => {
  const itemNormalize = item.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase().trim();
  return itemNormalize.includes(searchNormalize);
});

Esto es lo típico que siempre tengo que buscar cuando lo quiero implementar, ¿a ti te pasa? Supongo que sí, estás aquí por algo ehhh 👀.

¡Saludos, terrícola! 🖖