一个可以把文本中多个关键字高亮显示的react组件

多关键字高亮的 react 组件，正则关键字也能高亮 npm address keywordhighlight

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参数。 run effect