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


Posted in Javascript onJuly 31, 2018

网上看到很多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>

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

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

总结

以上所述是小编给大家介绍的react中实现搜索结果中关键词高亮显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
在JavaScript中使用timer示例
May 08 Javascript
javascript文本模板用法实例
Jul 31 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
node.js文件上传处理示例
Oct 27 Javascript
vue.js的提示组件
Mar 02 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 #Javascript
Node.js log4js日志管理详解
Jul 31 #Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 #jQuery
JS实现移动端触屏拖拽功能
Jul 31 #Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 #Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 #Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 #Javascript
You might like
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
node.js超时timeout详解
2014/11/26 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
layui的table中显示图片方法
2018/08/17 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
初步探究Python程序的执行原理
2015/04/11 Python
Python下的twisted框架入门指引
2015/04/15 Python
Python实现简单登录验证
2016/04/13 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
css3的transition属性详解
2014/12/15 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
C语言编程练习
2012/04/02 面试题
《鞋匠的儿子》教学反思
2014/03/02 职场文书
婚前协议书
2014/04/15 职场文书
房屋出售授权委托书
2014/10/12 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android