React实现模糊搜索和关键字高亮的示例代码

 更新时间:2023年11月18日 13:56:18   作者:某哈压力大  
这篇文章主要为大家详细介绍了React如何实现模糊搜索和关键字高亮的效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

背景

公司需要一个可视化页面,作为Redis查询展示的工具,方便同事进行快速检索。

要求将后端返回的报文,完整展现在识图中,并且可以提供关键词检索和关键词点亮的功能,以便快速定位关键词。

整体效果预览:

主要功能

点击搜索:返回的大字符串形式报文被组装成JSON的格式,点击搜索匹配相应字段, 并高亮显示

点击区分大小写:模糊匹配 OR 精确匹配

查找下一个:被选中的字段,往下移动一个,下一个的背景颜色切换为另一高亮色

解决

  • 匹配到的文本,动态插入样式
  • 使用正则解决匹配问题
  • 点击下一个时,动态切换类名和背景色

代码实现

仅仅贴出主要代码

DOM

...
<Input 
    value={this.state.txt}
    placeholder="请输入检索内容"
    onChange={e => this.setState({txt: e.target.value})}
></Input>
<Button onClick={this.dispatchHighLightText}>
    搜索
</Button>
...
<CheckBos 
    checked={this.state.isCheck}
    onChange={e => this.setState({isCheck: e.target.checked})}
>
	区分大小写
</CheckBos>
...
<Button
    onClick={this.searchToNext}
>
    查找下一个
</Button>

...
<pre
    dangerouslySetInnerHTML={{__html: this.state.information}}
    contentEditable
>
    {/*动态插入html的容器*/}
</pre>

CSS

// 每个匹配到的都有的类名
.highLight{
    background-color: #a9a9a9;
}
// 点击下一个时的类名,默认为第一个
.current{
    background-color: #32aaf8;
}

JS

点击搜索时

colorIndex = 0; // 初始化高亮标记
_information = ''; // 文本备份
dispatchHighLightText = () => {
    const {txt} = this.state; // 检索内容
    if(!txt){
        message.warning("请先输入查询条件"); 
        return;
    }
    // 重置高亮标记
    colorIndex = 0;
    const regex = new RegExp(txt, this.state.isCheck ? 'g' : 'gi'); // 不勾选 => 模糊匹配
    // 由于每次插入样式都会污染文本,所以每次都需要从备份文本中重新渲染
    const newInformation = _information;
    const hightLightTxt = newInformation.replace(regex, (match,index) => `<span class="highLight"> ${match} </span>`);
    this.setState({infomation: hightLightTxt}, () => {
        // 视图更新渲染然后,获取到dom
        let highLightEle = document.querySelectorAll('.highLight');
        this.updateHeight(highLightEle)
    }); // render
}

// 点亮目标关键字
updateHeight = (highLightEle) => {
    highLightEle.forEach((element, index) => {
        if(index === colorIndex){
            element.classList.add('current');
            element.scrollIntoView({ behavior: 'smooth', block: 'center'});
        }else{
            element.classList.remove('current');
        }
    })
}

点击 “下一个”

searchToNext = () => {
    let highLightEle = document.querySelectorAll('.highLight');
    if(heighLightEle.length){
        colrIndex = (colorIndex + 1 + highLightEle.length) % highLightEle.length;
        this.updateHeight(highLightEle)
    }
}

反思

  • 本来想用偏移量window.getSelection 和 document.createRange 以及相关api模拟富文本实现光标跳转定位的,可是发现偏移量不好确定(小菜鸡)
  • 每次渲染的时候需要拿新的备份的文本进行替换,不要用脏数据
  • pre标签可以很好的保留文本原来的样式,不能用textarea
  • dangerouslySetInnerHTML接收的是一个对象

以上就是React实现模糊搜索和关键字高亮的示例代码的详细内容,更多关于React模糊搜索和关键字高亮的资料请关注脚本之家其它相关文章!

相关文章

  • React项目中使用Redux的 react-redux

    React项目中使用Redux的 react-redux

    这篇文章主要介绍了React项目中使用Redux的 react-redux,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • react中使用swiper的具体方法

    react中使用swiper的具体方法

    本篇文章主要介绍了react中使用swiper的具体方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • React如何解决样式污染问题

    React如何解决样式污染问题

    这篇文章主要介绍了React如何解决样式污染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 详解react-redux插件入门

    详解react-redux插件入门

    这篇文章主要介绍了详解react-redux插件入门,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React Hooks常用钩子及基本原理解读

    React Hooks常用钩子及基本原理解读

    这篇文章主要介绍了React Hooks常用钩子及基本原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 一文教会你用redux实现computed计算属性

    一文教会你用redux实现computed计算属性

    在computed中,可以定义一些属性,即计算属性,下面这篇文章主要给大家介绍了关于如何利用redux实现computed计算属性的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • react实现复选框全选和反选组件效果

    react实现复选框全选和反选组件效果

    这篇文章主要为大家详细介绍了react实现复选框全选和反选组件效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • React.js中常用的ES6写法总结(推荐)

    React.js中常用的ES6写法总结(推荐)

    本篇文章中主要介绍了React.js中常用的ES6写法总结(推荐),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

    D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

    散点图(Scatter Chart),通常是一横一竖两个坐标轴,数据是一组二维坐标,分别对应两个坐标轴,与坐标轴对应的地方打上点。由此可以猜到,需要的元素包括circle(圆)和axis(坐标轴),接下来通过本文大家分享D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本) ,一起看看
    2019-05-05
  • React 的调和算法Diffing 算法策略详解

    React 的调和算法Diffing 算法策略详解

    React的调和算法,主要发生在render阶段,调和算法并不是一个特定的算法函数,而是指在调和过程中,为提高构建workInProcess树的性能,以及Dom树更新的性能,而采用的一种策略,又称diffing算法
    2021-12-12

最新评论