keywordhighlight
v1.0.6
Published
一个可以把文本多个关键字高亮的react组件
Downloads
29
Readme
KeywordsHighLight
多关键字高亮的 react 组件,正则关键字也能高亮 npm address keywordhighlight
How To Use
npm install -S keywordhighlight
import React from 'react';
import { render } from 'react-dom';
import KeywordsHighlight from 'keywordhighlight';
render(
<KeywordsHighlight
str="321字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。replacement 可以是字符串,也可以是函数。如果它是字符串,那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示,它说明从模式匹配得到的字符串将用于替换。123"
keywords={[
/stringObject/,
'替换',
['查找', text => <span style={{ color: 'yellow' }}>{text}</span>],
[/replacement|匹配/, text => <span style={{ color: 'gray' }}>{text}</span>],
['regexp', 'green'],
['$', { fontWeight: 700, color: 'red' }],
[/\d+/, 'orange'],
]}
/>,
document.getElementById('app'),
);
params
* str:为输入文本
* keywords:是一个数组,数组元素可以是如下4种类型
1 string|RegExp:要高亮的关键字或正则表达式。
2 [string|RegExp,string]:第一个元素为要高亮的关键字或正则表达式,第二个元素为高亮颜色。
3 [string|RegExp,object]:第一个元素为要高亮的关键字或正则表达式,第二个元素为高亮元素的style。
4 [string|RegExp,fun]:第一个元素为要高亮的关键字或正则表达式,第二个元素高亮元素的render函数。
* highlightClassName:高亮元素的全局类名。
* normalClassName: 不高亮元素的全局类名。
* highlightColor: 高亮元素的全局颜色。
* normalColor: 不高亮元素的全局颜色。
* regExpOption: 正则表达式的flags,默认gi。
> 注意:RegExp不支持flags参数。