Gfrktyl

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("<span style='font-weight: normal'>" + value.slice(0, query.length) + "</span>")

            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(`<span style="font-weight:normal">${query}</span>`)

}



let tests = new Map([

  ['some', 'e'],

  ['things', 'thi'],

  ['other', 'te'],

  ['looooooooong', 'o']

])



for (let [v, q] of tests)

  console.log(bolden(v, q))