示例:

  •  利用字符串的 split 方法,通过搜索的关键字分割成数组

  •  在利用数组的 join 方法拼接成字符串

我是利用mock的省份

 1 <template>
2 <div class="home">
3 <input type="text" v-model.trim="SerachValue">
4 <button @click="serach">点击搜索</button>
5 <ul>
6 <li v-for="(item, index) in cityMEList" :key="index">
7 <span v-html="item"></span>
8 </li>
9 </ul>
10 </div>
11 </template>
12
13 <script>
14 import axios from 'axios'
15 export default {
16 components: {
17 },
18 data() {
19 return {
20 SerachValue: '',
21 cityMEList: []
22 };
23 },
24 created() {
25
26 },
27 methods: {
28 serach() {
29 if(!this.SerachValue) {
30 return
31 }
32 this.cityMEList = []
33 axios.get("/cityMeunList").then(res => {
34 const { list } = res.data
35
36 list.forEach(item => {
37 if(item.province.includes(this.SerachValue)) {
38 let data = JSON.parse(JSON.stringify(item))
39 let dataARr = data.province.split(this.SerachValue) //字符串的方法先转成数组
40 let str = dataARr.join('<span style="color:red;">' + this.SerachValue + '</span>') // 在转成字符串
41 this.cityMEList.push(str)
42 }
43 });
44 console.log(list)
45 })
46 }
47 }
48 }

JS 实现关键字文本搜索 高亮显示的更多相关文章

  1. MySQL(十)操纵表及全文本搜索

    一.创建表 MySQL不仅用于表数据操作,还可以用来执行数据库和表的所有操作,包括表本身的创建和处理. 创建表一般有如下两种方式: ①使用具有交互式创建和管理表的工具: ②直接使用MySQL语句操纵表 ...

  2. js中input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  3. mysql 文本搜索

    全文本搜索 MySQL支持几种基本的数据库引擎,但并非所有的引擎都支持全文本搜索.两个最常使用的引擎为MyISAM和InnoDB,前者支持全文本搜索,后者就不支持. 理解全文本搜索 在前面的学习中,我 ...

  4. grep文本搜索工具详解

    ############grep命令############这个命令属于文本处理三大命令之一,强大的文本搜索工具(贪婪模式)全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它能使用正则表达 ...

  5. 【转】MYSQL入门学习之三:全文本搜索

    转载地址:http://www.2cto.com/database/201212/173873.html 一.理解全文本搜索   www.2cto.com   1.MyISAM支持全文本搜索,而Inn ...

  6. 整理grep实战文本搜索过滤技巧

    一:grep的简介: 文本搜索工具,根据用户指定的文本模式对目标文件进行逐行搜索,显示能够被模式所匹配到的行.配合正则表达式的使用可以实现强大的文本处理.下面一一说明正则的例子. 二:文本处理工具分类 ...

  7. FlexPaper二次开发问题及搜索高亮显示

    原文:FlexPaper二次开发问题及搜索高亮显示 最近有个需求,做一个IT知识库,类似于文库,说到文库肯定会用到在线浏览文档了,所有在网上翻阅了一下类似豆丁的在线浏览器插件的资料,将其进行了二次开发 ...

  8. 基于文本图形(ncurses)的文本搜索工具 ncgrep

    背景 作为一个VIM党,日常工作开发中,会经常利用grep进行关键词搜索,以快速定位到文件.如图: 利用grep进行文本搜索 但是,这一过程会有两个效率问题: 展示的结果无法进行直接交互,需要手动粘贴 ...

  9. js 判断一个文本框是否获得焦点

    1.js 判断一个文本框是否获得焦点 // 可以用document.activeElement判断 // document.activeElement表示当前活动的元素   // 查找你要判断的文本框 ...

  10. [linux] grep 文本搜索工具

    grep [option] pattern file Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.grep全称是Global Regular ...

随机推荐

  1. [C#]索引指示器

    参考代码: using System; namespace IndexerDemo { class StuInfo { public string Name; public string[] CouN ...

  2. 2020/5/14-笔记:Oracle数据库新建用户与给用户授权

  3. jxg项目Day2-git

    申请了我自己的gitee账号,建了我的仓库,在idea中点这个,然后就算漫长的自动下载的过程.. 对分支和冲突的理解:每个人都有自己的develop分支,可以commit到本地的分支,可以push到远 ...

  4. Centos 7 .Net core后台守护进程Supervisor教程

    ASP.NET Core应用程序发布linux在shell中运行是正常的.可一但shell关闭网站也就关闭了,所以要配置守护进程, 用的是Supervisor,本文主要记录配置的过程和过程遇到的问题 ...

  5. 如何获取obs视频帧的二进制数据

    前面几篇文章梳理了obs的录屏和推流流程,几条纵线整理下来,算是基本理清了obs的工作流程. 现在回到第一个目标:捕捉桌面的帧数据,用rendertarget显示并输出到UE5材质. 那么,帧数据到底 ...

  6. 最简单的for循环语句

    前言 在前面的文章中,壹哥给大家讲解了顺序结构.分支结构,接下来我们就来学习Java里的循环结构.Java里的循环结构,可以通过while.do-while.for.foreach等方式进行实现,今天 ...

  7. git初始化流程

    1. 添加 SSH key 一台主机仅需要设置一次 1.1 检查主机是否已经有 SSH key 只需要检查~/.ssh下是否存在 id_rsa.pub 或 id_dsa.pub.若已存在,跳转至步骤3 ...

  8. 解密Prompt系列4. 升级Instruction Tuning:Flan/T0/InstructGPT/TKInstruct

    这一章我们聊聊指令微调,指令微调和前3章介绍的prompt有什么关系呢?哈哈只要你细品,你就会发现大家对prompt和instruction的定义存在些出入,部分认为instruction是promp ...

  9. 一个.Net简单、易用的配置文件操作库

    在我们日常项目开发中,操作INI/CFG配置文件,往往会通过调用WinAPI来实现,WinAPI接口参数只支持字符串,而我们项目中,往往数据类型是多种多样的,在保存和获取配置值,我们就要进行类型的转换 ...

  10. 遗传算法(启发式算法)—R实现

    遗传算法 遗传算法(Genetic Algorithm,GA)最早是由美国的 John holland于20世纪70年代提出,该算法是根据大自然中生物体进化规律而设计提出的.是模拟达尔文生物进化论的自 ...