react-text-matcher
A React component that matches text using specified rules, supporting string and regular expressions. Developed based on text-matcher.
You can receive the matching results through render-props and have full control over how it renders. If you just want text highlighting, recommend using react-highlight-words, because it provides a simpler API.
Install
npm install @shhhplus/react-text-matcher --saveUsage
Basic
import TextMatcher from '@shhhplus/react-text-matcher';
const Demo = () => {
return (
<TextMatcher
rules="everyone"
text="Welcome everyone to come and join my birthday party."
>
{(nodes) => {
return (
<>
{nodes.map((node, idx) => {
return (
<Fragment key={idx}>
{typeof node === 'string' ? node : <span>{node.text}</span>}
</Fragment>
);
})}
</>
);
}}
</TextMatcher>
);
};RegExp
import TextMatcher from '@shhhplus/react-text-matcher';
const Demo = () => {
return (
<TextMatcher
rules={[new RegExp('food', 'gi'), 'Apple']}
text="AppleTodayFoodAppleHappySunFood"
>
{(nodes) => {
return (
<>
{nodes.map((node, idx) => {
return (
<Fragment key={idx}>
{typeof node === 'string' ? node : <span>{node.text}</span>}
</Fragment>
);
})}
</>
);
}}
</TextMatcher>
);
};