react中实现搜索结果中关键词高亮显示

网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换。

react中实现起来似乎更简单一些。

我这里的需求是通过搜索框搜索出新闻列表,在已经获取到新闻列表数据中使用filter函数,获取到每一个新闻的title,并定义关键词正则,返回替换后的样式,react不能直接解析带html标签的字符串,方法如下:

render() {
        const newsList=this.state.newsList;
        if(this.props.type==='tag'||this.props.type==='search'){
            let keyword=this.props.id; //这里是父组件传过来的关键词
            newsList.filter((value,index) => {  //使用filter函数过滤新闻列表数据
                var re =new RegExp(keyword,"g"); //定义正则
                value.title=value.title.replace(re, `<span class="keyword">${keyword}</span>`); //进行替换,并定义高亮的样式
            })
        }
        
        return (
            <div>
                {newsList.map((value,index) => {
                    return (<NewsListItem news={value} key={index} />)  //把新闻传递给新闻列表的单个新闻组件
                    })
                }
                <div className="btn-more transition" onClick={this.fetchMoreList}>{this.state.loadingText}</div>
            </div>
        );
    }

NewsListItem组件渲染title:

<div className="item-title" dangerouslySetInnerHTML = {{ __html:news.title }}></div>

大功告成。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【面试宝典】Java之线程一如何开启线程

面试官:大四是吧? 小白:是的,学校大四没有课,只有毕业设计,就想着提前出来锻炼锻炼。 面试官:想法很好,那咱们开始吧,知道线程吧! 小白:嗯,线程是CPU执行...

340110
来自专栏柠檬先生

基础(二)

嵌套-伪类嵌套    伪类嵌套和属性嵌套非常类似,只不过他需要借助“&”符号一起配合使用     例如:sass       .clearfix{ ...

20580
来自专栏前端说吧

vue-细节小知识点汇总(更新中...)

13040
来自专栏cloudskyme

在oracle中计算时间差

 计算时间差是oracle data数据类型的一个常见问题。oracle支持日期计算,你可以创建诸如“日期1-日期2”这样的表达式来计算这两个日期之间的时间差。...

37280
来自专栏领域驱动设计DDD实战进阶

01-TypeScript概述

本篇文章向大家介绍新的TypeScript客户端脚本语言,主要涉及两个方面,一是传统JavaScript语言的弱点,二是TypeScript语言的优势。 一.J...

34350
来自专栏CSDN技术头条

应用广泛的语言ECMAScript 2018来了,新特性都在这里

ECMAScript的两项新特性已确定,另外四项正在考虑中。 ? 作为JavaScript的标准规范,ECMAScript有望在6月发布新的版本。 目前为止,已...

20860
来自专栏lhyt前端之路

(VUE!jQuery!插件!)盘点前端群的无脑回答0.前言总结

你是不是在前端群见过很多这种前景:这个怎么做?怎么拿到这些数据?怎么更新整个列表?

19840
来自专栏牛客网

前端实习面经(回馈牛客网)

24330
来自专栏Crossin的编程教室

【我问 Crossin】想转行做后端开发,要多久?

1 sys.argv[] 该如何使用? Crossin: sys.argv 是用来获取命令行参数的,sys.argv[0] 表示代码本身文件路径,所以参数从1开...

29550
来自专栏十月梦想

js三种引用方式

2.行内使用方式,在标签内声明一下,比如a标记herf内嵌套JavaScript:

21320

扫码关注云+社区

领取腾讯云代金券