vue2实现搜索结果中的搜索关键字高亮的代码

具体代码如下所示：

// 筛选变色
brightenKeyword(val, keyword) {
  val = val + '';
  if (val.indexOf(keyword) !== -1 && keyword !== '') {
    return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')
  } else {
   return val
  }
}
// 或者用正则表达式
brightenKeyword(val, keyword) {
  const Reg = new RegExp(keyword, 'i');
  if (val) {
    return val.replace(Reg, `<span style="color: #409EFF;">${keyword}</span>`);
  }
}
// 使用方法
<el-table-column label="维护内容">
  <template slot-scope="scope">
   <span v-html="brightenKeyword(scope.row.strContent, filters.strContent)" ></span>
  </template>
</el-table-column>

开源项目地址： github.com/alex-0407/v…

效果演示

总结

以上所述是小编给大家介绍的vue2实现搜索结果中的搜索关键字高亮的代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue+Element实现搜索关键字高亮功能

    最近做了一个日志搜索的需求,要在页面上实现海量日志的关键字搜索.为了搜索更清晰,我最终实现了多条件搜索,且搜索结果的记录中的关键字全部高亮. 一.实现思路 1 实时监控表格,实现关键字的定位: 2 点击搜索按钮以后,实现记录中关键字的样式变化(即高亮). 二.实现过程 1 搜索条件表单 了解了实现思路,就让我们一起来看一下实现过程(关键位置均给了注释) <el-form :inline="true" :model="formQuery" > <el

  • Vue实现搜索结果高亮显示关键字

    本文实例为大家分享了Vue实现搜索结果高亮显示关键字的具体代码,供大家参考,具体内容如下 1. 需要解决的问题 父组件将搜索的字段传到子组件 子组件接受数据,正则匹配,并替换字段 2. 具体代码 父组件代码 <template> <div> <div v-if="showMe"> <div class="re_search"> <svg @click="$router.go(-1)">

  • vue+elementUI实现表格关键字筛选高亮

    vue+elementUI实现表格关键字筛选高亮

    本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码,供大家参考,具体内容如下 代码: <template> <div class=""> <div class="top"> <!-- 筛选 --> <div class="screen"> <div style="width:30%">筛选:</div> <el-i

  • 基于Vue实现关键词实时搜索高亮显示关键词

    最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github上,可以clone下来直接看代码 https://github.com/IT0315/real-time-search.git 下面是demo运行的效果图 好了闲话不多说直接上代码 实时搜索 实时搜索通过触发input事件和定时器来实现 <input v-model="keyWords&quo

  • vue2实现搜索结果中的搜索关键字高亮的代码

    vue2实现搜索结果中的搜索关键字高亮的代码

    具体代码如下所示: // 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>') } else { return val } } // 或者用

  • angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例

    angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例

    本篇angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例,分享给大家,具体如下: 添加一个pipe: import { Pipe, Injectable, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'keyword' }) @Injectable() export class KeywordPipe im

  • 在 Angular 中实现搜索关键字高亮示例

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

  • vue中的搜索关键字实例讲解

    vue中的搜索关键字实例讲解

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

  • js实现搜索框关键字智能匹配代码

    js实现搜索框关键字智能匹配代码

    只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

  • 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

  • Angular搜索场景中使用rxjs的操作符处理思路

    在有input输入框的搜索/过滤业务中,总会考虑如何减少发起请求频率,尽量使每次的请求都是有效的.节流和防抖是比较常见的做法,这类函数的实现方式也不难,不过终归还是需要自己封装.rxjs提供了各种操作符 , 可以很快捷高效的实现这些功能. 栗子 现在有一个查询场景,可以通过城市.类型.关键字来多维度过滤结果,如下图: 处理思路: 1.通过ngModel将select和input的值绑定到模型中的过滤条件对象 2.监听select输入框的change事件和input输入框的input事件来触发 发

  • 前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来

    做项目的时候有这么一个需求,客户信息显示出来后我要搜索查找相关的客户,并把相关的客户信息全部显示出来,因为一个客户全部信息我写在一个div里面  所以显示的时候就是显示整个div.先看看实现的效果: 当我输入瓦窑村  就把相关带瓦窑的客户信息显示出来并把瓦窑村字体设置红色, 其他的就不显示:下面看html代码: <body> <div class="bar bar-header-secondary" style="top:0"> <di

  • android实现搜索功能并将搜索结果保存到SQLite中(实例代码)

    运行结果: 涉及要点: ListView+EditText+ScrollView实现搜索效果显示 监听软键盘回车执行搜索 使用TextWatcher( )实时筛选 将搜索内容存储到SQLite中(可清空历史记录) 监听EditText的焦点,获得焦点弹出软键盘同时显示搜索历史,失去焦点隐藏软件盘和ListView. 实现过程比较简单,都是常用的,这里就不讲解了.代码可直接复制使用. 实现过程: MainActivity.java public class MainActivity extends

随机推荐