change styling of certain text characters-CodePudding

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? Thanks in advance.

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 />

CodePudding user response：

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 />

CodePudding user response：

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 />