vue使用v-html实现一段字符串中关键字(词)高亮效果

简介: vue使用v-html实现一段字符串中关键字(词)高亮效果

问题描述

需求:我们搜索某个关键字,后端返回给我们一个字符串,这个字符串中包含我们搜索的关键字,我们需要把这个字符串中的关键字部分加上高亮效果(类似于百度搜索关键字高亮的效果)。我们先看一下,大致类似的效果图:

snipaste_20210316_000836.png

如上图所示,需求很简单,就是关键字高亮。

思路分析

解决方式有两种,第一种就是进行字符串的切割,把关键字切出来,加上一个颜色。这种方式上一篇文章关于字符串的方法整理的文章已经说过了,不赘述,详情可点击链接跳转瞅瞅。

附上地址吧: https://juejin.cn/post/6940274572390301732

接下来我们说第二种方式,使用v-html指令加上字符串的替换方法,话不多说,上代码。

<template>
  <div id="app">
    <div>
      <span v-html="highLight(title)">{{title}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title:"五百年前孙悟空大闹天宫",
      searchWord:"孙悟空"
    };
  },
  methods: {
    highLight(title){
      // 如果标题中包含,关键字就替换一下
      if(title.includes(this.searchWord)){
        title = title.replace(
            this.searchWord, 
            // 这里是替换成html格式的数据,最好再加一个样式权重,保险一点
            '<font style="color:red!important;">'+ this.searchWord +'</font>'
        )
        return title
      }
      // 不包含的话还用这个
      else{
        return title
      }
    }
  },
};
</script>

代码效果图:

image.png

DOM元素审查

image.png

总结

v-html好像平常不怎么用到这个vue的指令,不过实际上在某些场景下,使用v-html能够很好的解决问题

相关文章
|
27天前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
12 2
|
1月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
99 0
|
2月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
94 0
react字符串转为dom标签,类似于Vue中的v-html
|
2月前
|
C++
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
|
3月前
|
资源调度 JavaScript 应用服务中间件
HTML、WebStrom和Vue使用
HTML、WebStrom和Vue使用
26 3
|
3月前
|
JavaScript 前端开发
基于Vue实现具有固定表头、合并单元格的Html表格
本文介绍了如何在Vue框架中创建一个具有固定表头和合并单元格功能的HTML表格,通过CSS的`position: sticky`属性实现表头固定,并通过设置`rowspan`和`colspan`属性来实现单元格合并。
81 0
基于Vue实现具有固定表头、合并单元格的Html表格
|
3月前
|
JavaScript 前端开发 数据库
vue+elementUi实现将数字转化为 对应的字符串内容
该博客文章介绍了如何在Vue框架结合Element UI组件库中,将数字状态字段转换为具体的字符串描述,并通过`el-table-column`展示在表格中。
vue+elementUi实现将数字转化为 对应的字符串内容
|
4月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
4月前
|
JavaScript
【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
578 0
|
4月前
|
JavaScript 前端开发
文本,粘贴事件如何实现,先实现一个小目标,如何存入图片,从本地生成源码,先转成base64,ctrl + v这张图片就显示出来了怎样实现的,Vue可以有方法可以获取粘贴的所有元素,转base64字符串
文本,粘贴事件如何实现,先实现一个小目标,如何存入图片,从本地生成源码,先转成base64,ctrl + v这张图片就显示出来了怎样实现的,Vue可以有方法可以获取粘贴的所有元素,转base64字符串