I have an input and when user types in it, it loop through an array and check if the value exists and display the value in a p tag. This currently partially works. What I'm trying to do is apply a styling to the characters that match with the input value. The method I tried bellow fails on certain array elements. How can I achieve this to work on any array element?
To understand the question better enter a couple of characters that are included in the array and look at them being displayed.
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 />split on the search term, then join back up (adding span to it)
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 />Your
$('body').append(`<p>${myArray[i].split(searchString)[0]}<span>${searchString}</span>${myArray[i].split(searchString).pop()}</p>`)
splits the phrase bank phrase by the input value - but if the input value is present in more than one place in the phrase, you'll be losing some information in the rendered text. I don't see the split doing anything here other than causing problems. Starting with the phrase and replacing the matching characters with a highlighted span seems better.
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 />