Javascript Regex: How to bold specific words with regex?

Question

Given a needle and a haystack... I want to put bold tags around the needle. So what regex expression would I use with replace()? I want SPACE to be the delimeter and I want the search to be case insensitive

so say the needle is "cow" and the haystack is

cows at www.cows.com, milk some COWS

would turn into

<b>cows</b> at www.cows.com, milk some <b>COWS</b>

also keywords should be able to have spaces in it so if the keyword is "who is mgmt"...

great band. who is mgmt btw?

would turn into

great band. <b>who is mgmt</b> btw?

Thanks

score 16 · Accepted Answer · edited Apr 26 '15 at 22:10

16

Here is a regex to do what you're looking for:

(^|\s)(cows)(\s|$)

In JS, replacement is like so:

myString.replace(/(^|\s)(cows)(\s|$)/ig, '$1<b>$2</b>$3');

Wrapped up neatly in a reusable function:

function updateHaystack(input, needle) {
    return input.replace(new RegExp('(^|\\s)(' + needle + ')(\\s|$)','ig'), '$1<b>$2</b>$3');
}

var markup = document.getElementById('somediv').innerHTML;
var output = updateHaystack(markup, 'cows');
document.getElementById('somediv').innerHTML = output;

edited Apr 26 '15 at 22:10

David

3,166
2
30
51

answered Aug 04 '09 at 23:49

Rex M

142,167
33
283
313

is there a typo? function boldKeywords(keywords, haystack) { for (var c = 0; c < keywords.length; c++) { haystack = haystack.replace(new RegExp('(^|\s)(' + keywords[c] + ')(\s|$)','ig'), '$1$2$3'); } return haystack; } for some reason that code doesn't bold anything. thanks – rawrrrrrrrr Aug 05 '09 at 01:17
updateHaystack('cows at www.cows.com, milk some COWS', 'cows'); doesn't bold anything, but updateHaystack('cows at www.cows.com, milk some COWS', 'cow'); changes cows to cows – rawrrrrrrrr Aug 05 '09 at 01:21
@inktri good spot. Of course 'cow'/'cows' is an example here. I did not escape my \s - that's fixed. – Rex M Aug 05 '09 at 01:41

score 12 · Answer 2 · edited Nov 11 '11 at 13:10

12

For those who don't want SPACE as the delimiter, simply don't use \s.

function updateHaystack(input, needle) 
{
 return input.replace(new RegExp('(^|)(' + needle + ')(|$)','ig'), '$1<b>$2</b>$3');
}

Worked for me.

edited Nov 11 '11 at 13:10

sth

222,467
53
283
367

answered Oct 20 '11 at 09:51

Mohd Sulaiman

121
1
2

Amber · Answer 3 · 2009-08-04T23:51:35.513

1

findstring: /(^|\s)(cows)(\s|$)/ig
newstring: '$1<b>$2</b>$3'

The \b markers are for "word boundaries"; the /ig flags are for case-ignoring and global matching, respectively.

The usage of the () captures and then $1/$2/$3 in the new string text is so that the capitalization and spacing of whatever was matched will be preserved.

edited Aug 04 '09 at 23:51

answered Aug 04 '09 at 23:39

Amber

507,862
82
626
550

Robert Swisher · Answer 4 · 2009-08-04T23:57:02.320

-1

var needle = 'cows';

var regexp = new RegExp('(^|\s)('+needle+')(\s|$)', 'ig');

var old_string = 'cows at www.cows.com, milk some COWs';

var new_string = old_string.replace(regexp, '<b>$1$2$3</b>');

edited Aug 04 '09 at 23:57

answered Aug 04 '09 at 23:42

Robert Swisher

1,300
11
12

Your example won't work, because it requires a space to both precede and follow the needle, which isn't the case for any of the instances of 'cows' in your old_string. – Amber Aug 04 '09 at 23:44
He said he wanted space as the delimiter. To make it work with start and end of strings it could be '(^|\s)'+needle+'(\s|$)' not tested but I think that should work – Robert Swisher Aug 04 '09 at 23:48

Javascript Regex: How to bold specific words with regex?

4 Answers4

Linked