Regex to make search suggestion bold like Google or Amazon

Question

I'm looking for solution to make text bold, like Google and Amazon search suggesters do it.

I know how to make it the opposite way (if I type "ne"), e.g. Newton with function like this:

    highlight(value, input): string {
    return value.replace(new RegExp('(^|)(' + input + ')(|$)', 'ig'), '$1<b>$2</b>$3');
}

But how should this regex look to achieve this; for example, if I type "ne" I should get:

1. new car
2. Super new computer
3. Newton

Answer 1

If the Regex you're using here covers all of your use cases, a simple solution would be to leave it (almost) exactly as it is, and modify the CSS for the desired effect:

.search-suggestion { font-weight: bold; }
.search-suggestion > span { font-weight: normal; }

Put your search suggestion in an element that has the search-suggestion class, and modify your Regex to wrap the search text in a <span> instead of a <b> element.