- 高亮筛选词

63 阅读1分钟

实现场景: 文本框渲染控制【关键词高亮,忽略关键词大小写】

        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>);
        }

image.png