El caso de uso: tengo una entrada de búsqueda que permite a los usuarios ingresar palabras separadas por espacios para buscar en una lista de entradas. Solo quiero mostrar coincidencias que coincidan con cualquiera de las palabras proporcionadas y resaltar aquellas partes de las entradas que coincidan.
Dada esta serie de montones de heno:
const haystacks = [ { value: 'Hello World', visible: true }, { value: 'I was here', visible: true }, { value: 'tell me your name', visible: true } ];y este arreglo de agujas
const needles = ['el', 'rl', 'em']; ¿Cómo puedo envolver todas las partes coincidentes de las cadenas en <em></em> , y para aquellas que no tienen un conjunto de coincidencias visible: false :
// expected result [ { value: 'H<em>el</em>lo Wo<em>rl</em>d', visible: true }, { value: 'I was here', visible: false }, { value: 't<em>el</em>l me your name', visible: true } ]He comprobado ¿Cómo comparar una cadena con una matriz de palabras y resaltar palabras en una cadena que coincidan? pero ese solo resalta palabras que cumplen completamente con las agujas, no coincidencias parciales.
Esto es lo que he probado, lo que me da
[ { value: "H<<em>em</em>>el</<em>em</em>>lo Wo<<em>em</em>>rl</<em>em</em>>d", visible: true }, { value: "I was here", visible: false }, { value: "t<<em>em</em>>el</<em>em</em>>l th<em>em</em> your name", "visible": true } ] const haystacks = [{ value: 'Hello World', visible: true }, { value: 'I was here', visible: true }, { value: 'tell them your name', visible: true }]; const needles = ['el', 'rl', 'em']; for (const haystack of haystacks) { for (const needle of needles) { const isMatchingOption = haystack.value.toLowerCase().includes(needle); haystack.visible = isMatchingOption; if (isMatchingOption) { const re = new RegExp(needle.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'gi'); haystack.value = haystack.value.replace(re, '<em>$&</em>'); } } } console.log(haystacks);Debe apuntar a crear solo una expresión regular integral, no una por aguja:
const regEscape = s => s.replace(/[.*+?^${}()|[\\]/g, "\\$&"); function highlight(haystacks, needles) { // Sort needles by descending length (in a copy) needles = [...needles].sort((a, b) => b.length - a.length); const regex = RegExp(needles.map(regEscape).join("|"), "gi"); return haystacks.map(({value}) => ({ value: value.replace(regex, `<em>$&</em>`), visible: regex.test(value) })); } // Example run: const haystacks = [ { value: 'Hello World' }, { value: 'I was here' }, { value: 'tell me your name' } ]; const needles = ['el', 'rl', 'em']; console.log(highlight(haystacks, needles));Las agujas se clasifican por longitud descendente, de modo que si una es una subcadena de la otra, la más larga tiene prioridad para el reemplazo.