Although 'abc'.match(/\b\w/) equals ['a'] in JavaScript, react-highlighter acts as if it equals ['a', 'b', 'c'] instead. That is, the JSX element
<Highlight search={/\b\w/}>
abc
</Highlight>
renders as abc instead of abc. (To verify that individual letters are being matched, rather than the entire string of all three letters, alter the matchClass prop so that it draws a border around matches instead of emboldening them.) Strangely, no problems arise with the expressions /\w\b/ and /\b\w\b/.
A similar problem occurs with anchors: substituting /^\w/ for /\b\w/ in the JSX element displayed above renders abc instead of abc, whereas /\w$/ and /^\w$/ behave as expected.
Although
'abc'.match(/\b\w/)equals['a']in JavaScript,react-highlighteracts as if it equals['a', 'b', 'c']instead. That is, the JSX elementrenders as abc instead of abc. (To verify that individual letters are being matched, rather than the entire string of all three letters, alter the
matchClassprop so that it draws a border around matches instead of emboldening them.) Strangely, no problems arise with the expressions/\w\b/and/\b\w\b/.A similar problem occurs with anchors: substituting
/^\w/for/\b\w/in the JSX element displayed above renders abc instead of abc, whereas/\w$/and/^\w$/behave as expected.