实现场景: 文本框渲染控制【关键词高亮,忽略关键词大小写】
jsonData = JSONbig.stringify(jsonData, null, 2).replace(/\\/g, ''); // 将转译符号\滤掉
if (!keywords.trim()) {
// 搜索字符未输入或者输入空字符,无需过滤
return <pre>{jsonData}</pre>;
}
const keys = keywords.trim().replace(/(\[|\*|\.|\?|\+|\$|\^|\(|\)|\{|\}|\||\\|\/|\])/g, '\\$1'); // 需要将特殊字符进行转译,否则引起报错 : [ * . ? + $ ^ ( ) { } | \ / ]
const reg = new RegExp(keys, 'gi');
const pres = [];
let left = 0;
let right = 0;
let match;
// eslint-disable-next-line no-cond-assign
while (!_.isEmpty((match = reg.exec(jsonData)))) {
right = match.index;
pres.push(<pre key={match.index}>{jsonData.slice(left, right)}</pre>);
pres.push(
<pre className='keywordBg' key={`${match.index}lignt`}>
{match[0]}
</pre>,
);
left = reg.lastIndex;
}
if (right !== jsonData.length - 1) {
// 最后一次截取后剩余若还有数据,push到数组
pres.push(<pre key={left}>{jsonData.slice(left, jsonData.length)}</pre>);
}