Embolden parts of auto-complete suggestions that don't match the query I made a function to embolden text that doesn't match a string, but it appears to be very performance-heavy. I am certain that there are much better ways to do this, but with what I tried, I ran into a lot of trouble.

As a side note, one of the ways I know this is performance-heavy, is that when I type a few characters, and backspace them all, Chrome starts taking up more and more memory until it crashes.

Yes! I know this is not StackOverflow, so I'm just asking for some pointers on what the issues are with the code.

function Bolden(value, query) {
    var arr = []
    if (!value) return;
    while (value !== "") { // While the value still has work to be done on it
        if (value.toLowerCase().startsWith(query.toLowerCase())) {
            arr.push("&lt;span style='font-weight: normal'&gt;" + value.slice(0, query.length) + "&lt;/span&gt;")
            value = value.slice(query.length, value.length)
        }
        else {
            arr.push(value.slice(0, 1))
            value = value.slice(1, value.length)
        }
    }
    return arr.join('')
}
Based on the current context available, if your query is not to be treated as a regex/custom pattern, I think a simple string.split should be enough. I am not that familiar with conventions in the JS world, but the last time I had worked with it, function names used to be in camelCase.

Also note that I am using the template literals when returning from bolden function; which should actually be named unemphasize (or unbold or normaliser).



function bolden(value, query) {
  if (!value) return;
  let splt = value.split(query)
  return splt.join(`&lt;span style="font-weight:normal"&gt;${query}&lt;/span&gt;`)
}

let tests = new Map([
  ['some', 'e'],
  ['things', 'thi'],
  ['other', 'te'],
  ['looooooooong', 'o']
])

for (let [v, q] of tests)
  console.log(bolden(v, q))