Tengo una entrada y cuando el usuario la escribe, recorre una matriz y verifica si el valor existe y muestra el valor en la etiqueta ap. Esto actualmente funciona parcialmente. Lo que intento hacer es aplicar un estilo a los caracteres que coincidan con el valor de entrada. El método que probé a continuación falla en ciertos elementos de la matriz. ¿Cómo puedo lograr que esto funcione en cualquier elemento de matriz?
Para comprender mejor la pregunta, ingrese un par de caracteres que están incluidos en la matriz y observe cómo se muestran.
const myArray = ['test', 'ball', 'cat', 'dog', 'orange', 'the massive theory'] //fails when inputed 'the' should have shown 'the massive theory but shows 'theory' $('input').on('input', function() { const searchString = $(this).val() $('p').remove() for (var i = 0; i < myArray.length; i++) { if (myArray[i].includes(searchString)) { $('body').append(`<p>${myArray[i].split(searchString)[0]}<span>${searchString}</span>${myArray[i].split(searchString).pop()}</p>`) } } }); $('input').keyup(function(e) { if (e.keyCode == 8) { if ($(this).val() == "" || $(this).val() == null) { $('p').remove() } } }) p span { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input />divida en el término de búsqueda, luego vuelva a unirlo (agregándole espacio)
const myArray = ['test', 'ball', 'cat', 'dog', 'orange', 'the massive theory'] //fails when inputed 'the' should have shown 'the massive theory but shows 'theory' $('input').on('input', function() { const searchString = $(this).val() $('p').remove() for (var i = 0; i < myArray.length; i++) { if (myArray[i].includes(searchString)) { var str = myArray[i].split(searchString).join("<span>" + searchString + "</span>") $('body').append(`<p>${str}</p>`) } } }); $('input').keyup(function(e) { if (e.keyCode == 8) { if ($(this).val() == "" || $(this).val() == null) { $('p').remove() } } }) p span { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input />Su
$('body').append(`<p>${myArray[i].split(searchString)[0]}<span>${searchString}</span>${myArray[i].split(searchString).pop()}</p>`) divide la frase del banco de frases por el valor de entrada, pero si el valor de entrada está presente en más de un lugar en la frase, perderá información en el texto representado. No veo que la split haga nada más que causar problemas. Comenzar con la frase y reemplazar los caracteres coincidentes con un lapso resaltado parece mejor.
for (const phrase of myArray) { if (!phrase.includes(searchString)) continue; const withSpan = phrase.replace(searchString, '<span>$&</span>'); $('body').append(`<p>${withSpan}</p>`); } const myArray = ['test', 'ball', 'cat', 'dog', 'orange', 'the massive theory'] $('input').on('input', function() { const searchString = $(this).val() $('p').remove() for (const phrase of myArray) { if (!phrase.includes(searchString)) continue; const withSpan = phrase.replace(searchString, '<span>$&</span>'); $('body').append(`<p>${withSpan}</p>`); } }); $('input').keyup(function(e) { if (e.keyCode == 8) { if ($(this).val() == "" || $(this).val() == null) { $('p').remove() } } }) p span { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input />