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>
大功告成。
react中实现搜索结果中关键词高亮显示的更多相关文章
- IDEA中解决Edit Configurations中没有tomcat Server选项的问题(附配置Tomcat)
1.点击File-->settings(Ctrl+Alt+S) 2.在弹出的窗口中的搜索框中输入appliation,然后选择下方的Plugins,再然后勾选左侧Installed中的如图所示的 ...
- C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例
C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...
- 百度搜索URL中的参数都是什么
最近,点石排名更新了一个新功能——站内搜索.其实理解起来也很简单,就是通过URL限定搜索结果为某个网站,从而参与点击(例如:https://www.baidu.com/s?wd=SEO&si= ...
- WPF实用指南一:在WPF窗体的边框中添加搜索框和按钮
原文:WPF实用指南一:在WPF窗体的边框中添加搜索框和按钮 在边框中加入一些元素,在应用程序的界面设计中,已经开始流行起来.特别是在浏览器(Crome,IE,Firefox,Opera)中都有应用. ...
- SAP CRM 在Web UI中创建搜索帮助
多数情况下,在Web UI为一个特定的字段提供搜索帮助需要在事务SE11中创建搜索帮助. (注:也可以通过在SE24中创建一个类并实现实现IF_BSP_WD_CUSTOM_F4_CALLBACK接口来 ...
- 第七章 人工智能,7.6 DNN在搜索场景中的应用(作者:仁重)
7.6 DNN在搜索场景中的应用 1. 背景 搜索排序的特征分大量的使用了LR,GBDT,SVM等模型及其变种.我们主要在特征工程,建模的场景,目标采样等方面做了很细致的工作.但这些模型的瓶颈也非常的 ...
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
- 详细解读Android中的搜索框—— SearchView
以前总是自己写的 今天看看别人做的 本篇讲的是如何用searchView实现搜索框,其实原理和之前的没啥差别,也算是个复习吧. 一.Manifest.xml 这里我用一个activity进行信息的输入 ...
- 在eclipse的maven插件中搜寻本地仓库中的jar搜索不到的解决方案
在eclipse的maven插件中搜寻本地仓库中的jar搜索不到的解决方案 之前,用过maven管理项目的童鞋都知道本地会有一个${User_Home}.m2/repository仓库 是用来存放ja ...
随机推荐
- ios真机调试错误解决:Installation of apps is prohibited by a policy on the device
该问题的出现原因是手机中的访问权限被关闭了,打开方法如下: 设置->通用->访问限制->安装应用程序
- 喵哈哈村的魔法考试 Round #19 (Div.2) 题解
题解: 喵哈哈村的魔力源泉(1) 题解:签到题. 代码: #include<bits/stdc++.h> using namespace std; int main(){ long lon ...
- 一个成功的Git分支模型
原文: http://www.juvenxu.com/2010/11/28/a-successful-git-branching-model/ 本文中我会展示一种开发模型,一年前该模型就已经被我用在所 ...
- Unity Shader-后处理:简单均值模糊
一.简介 今天来学习一下后处理中比较常用的一种效果,屏幕模糊效果.模糊效果,在图像处理中经常用到,Photoshop中也有类似的滤镜.我们在游戏中也会经常用到.因为屏幕模糊效果是一些高级后处理效果 ...
- [leetcode]Largest Rectangle in Histogram @ Python
原题地址:https://oj.leetcode.com/problems/largest-rectangle-in-histogram/ 题意: Given n non-negative integ ...
- pytorch中检测分割模型中图像预处理探究
Object Detection and Classification using R-CNNs 目标检测:数据增强(Numpy+Pytorch) - 主要探究检测分割模型数据增强操作有哪些? - 检 ...
- art.template 循环里面分组。
后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...
- eclipse里面使用Maven搭建web工程
一.建立Maven项目 使用Eclipse的maven构建一个web项目,以构建SpringMVC项目为例: 1.1 选择建立Maven Project 选择File -> New -> ...
- SQL列类型
列类型的几种基本规则 M:表示最大显示宽度,最大有效显示宽度255 D:适用于浮点和定点类型,表示小数点后面的位数 方括号: [],表示可选部分 如果为一个数值列指定ZEROFILL,MySQL自动为 ...
- ffmpag总结_android_to_ios视频转换
项目需求: 需要android和ios拍的视频在两个平台上都能播放. ffmpag很早以前就安装好了,忘了是如何装了. 一直无法将android同事的视频转成mp4在ios上播放. 后来发现ffmpa ...