Case insensitive tag wrap

by Julien Etienne

HTML

<input />
<ul></ul>

CSS

span{
  background: yellow
}

JavaScript

const names = ['Pasty Friberg',
  'Eugenio Rodda',
  'Danika Cleveland',
  'Lashon Hensen',
  'Larue Ciesielski',
  'Nannette Stoneking',
  'Velma Almond',
  'Irwin Nolen',
  'Theodora Cryer Guice',
  'Serafina Guice',
  'Geoffrey EmlGuiceing',
  'Saundra Kennon',
  'Santana Nicolai',
  'Vanessa Kollar',
  'Rhiannon Regina',
  'Mauro Deford',
  'Meagan Visitacion',
  'Georgann Bohanan',
  'Ami Racicot',
  'Rosaria Lindberg',
  'ROSARIA LINDBERG',
  'ROSARIA LINDBERG',
  'john smith John JOHn Smitherson smith gojohn'
];

function wrap(match, offset, string) {
    return `<span>${match}</span>`
  }


const input = document.querySelector('input');
const results = document.querySelector('ul');

input.addEventListener('input', ({
  target
}) => {
  const value = target.value || '';
  const term = value.toLocaleLowerCase();
 
  results.innerHTML = names.filter(name => {
      const nameLower = name.toLocaleLowerCase();
      return nameLower.includes(term)
    })
    .map(name => {
      const nameLower = name.toLocaleLowerCase();
      const termPattern = new RegExp('\\b' + term, 'ig')
 		  console.log('term', term, term.length )     
      const test = name.replace(termPattern , wrap);
      console.log('test', test)
      return `<li>${test}<li>`;
    })
    .filter(Boolean)
    .join('');
})