3

A ver, explico: se crea un array con cada una de las palabras escritas en el input, ejemplo:

const arr = ['se', 'crea', 'un', 'array', 'con', 'cada', 'una', 'de', 'las', 'palabras', 'escritas', 'en', 'el', 'input']

Ahora, de este array quiero buscar en este string:

Las palabras de los input son muy importantes para los array

Las palabras que coincidan con cada elemento del array y colocarlo en negrita quedando así: Las palabras de los input son muy importantes para los array

Tomando en cuenta que las palabras que aparecen y están en el array son ['las', 'palabras', 'de', 'input', 'array']

Lo he intentado con el siguiente código pero solo se coloca en negrita el último elemento:

     input.addEventListener('keyup', (e) => {
         let boxSearch = input.parentElement.parentElement.querySelector('.search-match')
         boxSearch.innerHTML = ''
         let text = e.target.value.toLowerCase();
         for (let item of dataAutocomplete) {
                let name = item.name.toLowerCase();
                let nameFilter = name.replace(text, `<strong>${ text }</strong>`)
                var filterLettering = text.split(' ');
                var yes = 0;
                let filterText;
                for (var filter of filterLettering) {
                    if (name.indexOf(filter) > -1) {
                        yes++;
                        filterText = name.replaceAll(filter, `<strong>${ filter }</strong>`)
                    }
                }

                if (yes === filterLettering.length) {
                    boxSearch.innerHTML += /*html*/ ` 
                    <div class="item-match">
                        <span style="text-transform: capitalize;"> 
                        ${ filterText }
                        </span>
                    </div>` 
                }
          }
     })

¿Alguno me podría ayudar por favor?

5 respuestas 5

7

Más sencillo, puedes hacer lo siguiente:

  • Capturas al valor de tu input y a la etiqueta span:

    const texto = document.getElementById('texto').value;
    const resultado = document.getElementById('resultado');
    
  • En tu span hacemos un innerHTML lo siguiente:

    • Al texto (el valor del input) hacemos un split(), usando al espacio como separador, devolviendo un array, y cada palabra del input como los elementos del array.

      resultado.innerHTML = texto.split(' ')
      
    • Luego mapeamos a los elementos del array y en cada elemento verificamos si cumple la instrucción arr.includes(palabra.toLowerCase()), es decir, si la palabra se encuentra en el array arr. Si cumple, retornamos la palabra en negrita (con las etiquetas <strong>), si no cumple, retornamos la misma palabra.

      resultado.innerHTML = texto.split(' ').map(palabra => arr.includes(palabra.toLowerCase()) ? `<strong>${palabra}</strong>` : palabra)
      
    • Por último, juntamos todos los elementos del array en cadena con join(' ').

       resultado.innerHTML = texto.split(' ').map(palabra => arr.includes(palabra.toLowerCase()) ? `<strong>${palabra}</strong>` : palabra).join(' ');
      

Ejemplo:

const arr = ['se', 'crea', 'un', 'array', 'con', 'cada', 'una', 'de', 'las', 'palabras', 'escritas', 'en', 'el', 'input'];

function textoEnNegrita() {
  const texto = document.getElementById('texto').value;
  const resultado = document.getElementById('resultado');
  resultado.innerHTML = texto
    .split(' ')
    .map(palabra => arr.includes(palabra.toLowerCase()) ? `<strong>${palabra}</strong>` : palabra)
    .join(' ');
}
<input type="text" id="texto" oninput="textoEnNegrita()" />
<br><br>
<span id="resultado"></span>

2

Puedes recorrer la lista de palabras clave y reemplazar cada palabra por lo que quieras:

const palabrasClave = ["esto", "es", "primera", "prueba"];

function ponerNegrillas(texto) {
  return texto.split(" ").map(word => palabrasClave.includes(word) ? `<strong>${word}</strong>` : word).join(" ");
}

document.write(ponerNegrillas("Esta es la primera prueba que hago de esto"));

2

Simplemente usar replaceAll, para esto juntamos el array separando cada palabra con | para crear la expresión regular

const arr = ['se', 'crea', 'un', 'array', 'con', 'cada', 'una', 'de', 'las', 'palabras', 'escritas', 'en', 'el', 'input'];

const patron = new RegExp(arr.map(a=> `\\b${a}\\b`).join('|'),"gi" ); //juntamos el array en un string, separando las palabras con |

const getOracionNegritas = oracion =>
 oracion.replaceAll(patron, a => `<strong>${a}</strong>`);

const o = "creación Las palabras de los input son muy importantes para los array creación crea";
document.write(getOracionNegritas(o) );

2
  • Hola Yuseff, la solución está incompleta, si una palabra de la oración es por ejemplo "creacion", le aplicaría el strong a parte de la palabra "crea", cuando no debería aplicale nada.
    – Pipe
    el 11 jul. a las 18:37
  • @Pipe muchas gracias por comentario, lo he corregido
    – Yussef
    el 11 jul. a las 20:02
1

El error es que estás reemplazando la variable filterText en cada iteración del bucle, por lo que solo se guarda el resultado del último elemento coincidente. Para solucionarlo, puedes utilizar un array para almacenar todas las palabras coincidentes y luego unir ese array en un solo string para asignarlo a filterText.

La forma correcta de hacerlo:

Creamos un array filterWords para almacenar las palabras coincidentes. Si una palabra coincide, la envolvemos en etiquetas <strong> y la agregamos al array. Si no coincide, simplemente agregamos la palabra sin modificar al array.

Luego, unimos todas las palabras del array en un solo string utilizando el método join(' '), para formar filterText, que contendrá las palabras coincidentes con las etiquetas <strong> correspondientes.

Finalmente, asignamos filterText al contenido HTML del elemento boxSearch.innerHTML, dentro del bucle for que recorre los elementos de dataAutocomplete.

input.addEventListener('keyup', (e) => {
    let boxSearch = input.parentElement.parentElement.querySelector('.search-match');
    boxSearch.innerHTML = '';

    let text = e.target.value.toLowerCase();
    let filterWords = [];

    for (let item of dataAutocomplete) {
        let name = item.name.toLowerCase();

        if (name.includes(text)) {
            let words = name.split(' ');

            for (let word of words) {
                if (text.includes(word)) {
                    filterWords.push(`<strong>${word}</strong>`);
                } else {
                    filterWords.push(word);
                }
            }

            let filterText = filterWords.join(' ');

            boxSearch.innerHTML += /*html*/ `
                <div class="item-match">
                    <span style="text-transform: capitalize;"> 
                        ${filterText}
                    </span>
                </div>`;
        }
    }
});
1

podemos separar este problema en 2 partes:

1.- Identificar palabras en un array

2.- Poner palabras en negritas en HTMl.

vamos con un caso a la vez.

Para el primer caso, podemos utilizar filter en el array para filtrar elementos, de la siguiente forma:

const arr = ['se', 'crea', 'un', 'array', 'con', 'cada', 'una', 'de', 'las', 'palabras', 'escritas', 'en', 'el', 'input'];
const textToSearch = 'Las palabras de los input son muy importantes para los array';
const filterWords = arr.filter((element) => textToSearch.includes(element) === true);
console.log(filterWords); //["array", "de", "palabras", "input"]

Filter, lo que hace, es filtrar en un array según un criterio de búsqueda. En esta caso, utilizamos includes() para pedirle al filtro que, incluya sólo los elementos del array que estén dentro del texto a buscar. Como includes() devuelve un booleano, nos aseguramos que el resultado del método sea true.

Ahora, para las negritas, podemos recorrer el array generado para hacer el html deseado:

filterWords.forEach((word)=> {
  document.getElementById('body').innerHTML+= '<b>'+ word +'</b><br>'
});

<b> es un tag html que proporciona negritas.

<br> es un tag que se encarga de hacer un salto de línea.

Espero que mi respuesta pueda ayudarte. ¡Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.