Make search string bold, but only from start of word

Question

I'm trying to implement a search where I only match and bold the start of the word in Javascript.

So, if you search for "choc", "chocolate" would appear, but if you search for "late", Chocolate wouldn't appear.

I've got:

if( queryString.match(new RegExp('/\b'+inputField.val()+'/', 'gi')) )

And then to highlight the word:

var tempName = queryString.replace(new RegExp('(^|\b)(' + inputField.val() + ')(|$)','ig'), '$1<strong>$2</strong>$3');

But nothing is working the way I had hoped. Any ideas?

Can your `inputField.val()` contain (or rather start/end with) a non-word character (i.e. `:`, or even `Я`)? — Wiktor Stribiżew, May 27 '16 at 07:07
If so, you will have to [escape it first](http://stackoverflow.com/a/6969486/3894981). — dude, May 27 '16 at 07:10
@julmot: No, if the value can start with non-word char, `\b` won't work, and `(^|\s)` will only match before a whitespace or at the start of the string. Escaping is a must anyway, yes. — Wiktor Stribiżew, May 27 '16 at 07:37

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

Example match:

RegExp:

/(^|\s)(late)/gmi

or

/\b(late)/gmi

This will match:

Chocolate latechoco

Example replacement:

var search = "Chocolate latechoco";
document.write(search.replace(/\b(late)/gmi, "<strong>$1</strong>"));

Also note that your search string inputField.val() should always be escaped. See this answer to learn how.

edited May 23 '17 at 11:58

Community

answered May 27 '16 at 07:01

dude

1 Answers1