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

2024-12-23 23:28:15

网上看到很多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实现点击选中的li高亮的示例代码

虽然只是一个简单的功能,还是记录一下比较好.页面上有很多个li,要实现点击到哪个就哪个高亮.当年用jq的时候,也挺简单的,就是选中的元素给addClass,然后它的兄弟元素removeClass,再写个active的样式就搞定了.那现在用react要实现类似的操作,我想到的就是用一个currentIndex,通过判断currentIndex在哪个元素实现切换. 先上一下效果图: 代码: class Category extends React.Component { constructor(pr
react中实现搜索结果中关键词高亮显示

网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换. react中实现起来似乎更简单一些. 我这里的需求是通过搜索框搜索出新闻列表,在已经获取到新闻列表数据中使用filter函数,获取到每一个新闻的title,并定义关键词正则,返回替换后的样式,react不能直接解析带html标签的字符串,方法如下: render() { const newsList=this.state.newsList; if(this.props.type
Vue中使用highlight.js实现代码高亮显示以及点击复制

目录效果如下第一步安装highlight.js 第二步在main.js中引入第三步创建组件效果如图:点击显示代码第四步: 使用组件第五步实现点击复制代码clipboard.js. 本文主要介绍了Vue中使用highlight.js实现代码高亮显示以及点击复制,具体如下: 效果如下第一步安装highlight.js yarn add highlight.js 第二步在main.js中引入 import hl from 'highlight.js' // 导入代码高亮文件
vue中的搜索关键字实例讲解

目录 vue的搜索关键字 1.定义一个搜索框 2.循环遍历,之前 3.在data中,我们写入如下数据 4.在methods中 5.我们还可以这样写搜索功能及搜索结果关键字高亮首先实现搜索功能通过computed计算属性监听搜索内容的变化下边实现搜索关键字高亮显示 vue的搜索关键字 1.定义一个搜索框 <label> 搜索关键字: <input type="search" name="" id="" va
在 Angular 中实现搜索关键字高亮示例

在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数据展示在页面中. 但是,在有些情况下,比如我们有一个搜索框,希望将搜索的关键字在正文中高亮出来,这时候就会感觉比较吃力了,filter 可以帮助我们处理这种情况. 实际上,很多时候,我们的数据是不能直接输出到 DOM 中的,典型的比如日期,或者货币等等,通常需要将我们内部的数据格式化之后,再输出到页
基于Python正则表达式提取搜索结果中的站点地址

正则表达式对于Python来说并不是独有的,最近在把google搜索的结果中所有的站点地址导出,于是想到用python正则表达式提取搜索结果中的站点地址. 这其中涉及几个需要解决的问题: 1.获取搜索的结果文本为了获得更多的地址,我使用了Google的高级搜索功能,每个页面显示100条结果. 获得显示的结果后,可以查看源码,并保持成文本文件就有了搜索的结果文本 2.分析如何提取站点信息首先需要分析获取的页面,查看以怎样的方式可以提取出站点信息. 我使用IE8自带的开发工具(按F12就会弹出来
Linux中的搜索文件命令

文件搜索命令locate:搜索快,新建文件无法搜索: 命令格式: locate 文件名 //在后台数据库中按文件名搜索,搜索速度快: /var/lib/mlocate : locate命令所搜索的后台数据库命令:updatedb // 更新数据库,默认是一天自动更新: /etc/uodatedb.conf 配置文件中: 1. PRUNE_BIND_MOUNTS = "yes" 开启搜索限制 2. PRINEFS = 搜索时,不搜索的文件系统: 3. P
使用Linux正则表达式灵活搜索文件中的文本

正则表达式是一种符号表示法,用于识别文本模式.Linux处理正则表达式的主要程序是grep.grep搜索与正则表达式匹配的行,并将结果输送至标准输出. 1. grep匹配模式 grep按下述方式接受选项和参数(其中,regex表示正则表达式) 复制代码代码如下: grep [options] regex [files] 其中options主要为下表: 选项含义功能描述 -i ignore case 忽略大小写 -v invert match 不匹配匹配的 -l file-with-matc
iOS中searchBar(搜索框)光标初始位置后移

废话不多说了,直接给大家贴关键代码了,具体代码如下所示: #import <UIKit/UIKit.h> @interface SearchBar : UITextField @property (nonatomic,strong) UIButton *button; + (instancetype)searchBar; @end #import "SearchBar.h" @implementation SearchBar - (id)initWithFrame:(CGR
php中怎么搜索相关联数组键值及获取之

1.搜索关联数组键如果在一个数组中找到一个指定的键,函数array_key_exists()返回TRUE,否则返回FALSE.其形式如下:boolean array_key_exists(mixed key, array array) 下面的例子将在数组键中搜索Ohio,如果找到,将输出这个州加入美国联邦政府的育关信息:$state["Delaware"]="December 7,1787";$state["Pennsylvania"]=&qu
javascript提取URL的搜索字符串中的参数(自定义函数实现)

今天在犀牛书上发现了一个有用的函数 urlArgs(提取URL的搜索字符串中的参数).我们经常会看到有的页面链接地址后面会跟有参数,比如 http://www.xxx.com/?username=yyy&password=zzz 之类的,很多时候我们需要获得这些参数的值(yyy和zzz),那么就可以利用 urlArgs 函数,通过该函数的返回值(返回值是对象)的属性来获取. urlArgs 函数代码: 复制代码代码如下: function urlArgs(){ var args = {}; v

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

相关推荐

随机推荐