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继承方式实例
Oct 29 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
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 引用(&amp;)详解
2009/11/20 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
详谈js模块化规范
2017/07/07 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
Python代码需要缩进吗
2020/07/01 Python
容易被忽略的Python内置类型
2020/09/03 Python
python解包用法详解
2021/02/17 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
.NET面试问题集
2015/12/08 面试题
数字天堂软件测试面试题
2012/12/23 面试题
护理学中专毕业生求职信
2013/11/11 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
八项规定对照检查材料
2014/08/31 职场文书
初级党校心得体会
2014/09/11 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
python 字典和列表嵌套用法详解
2021/06/29 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python