vue2 自定义指令 v-highlight 文本高亮显示分享

简单分享一个文本高亮显示的自定义指令,主要分两部分:

1、代码实现:在 main.js 文件中添加一个自定义指令,实现搜索时文本高亮显示,代码如下:

javascript 复制代码
const highlightText = (el, searchText) => {
  const textContent = el.textContent;
  const regex = new RegExp(searchText, 'gi');
  const highlightedText = textContent.replace(regex, (matchedText) => {
    return `<mark style="background-color:#fff;color:#FF6A29">${matchedText}</mark>`;
  });
  el.innerHTML = highlightedText;
};

// 文本高亮的指令
Vue.directive('highlight', {
  // 当绑定元素插入到 DOM 中时
  inserted(el, binding) {
    // 确保传入的表达式是一个字符串
    if (typeof binding.value !== 'string') {
      console.warn(`Expect a string value for v-highlight`);
      return;
    }
    // 调用高亮逻辑
    highlightText(el, binding.value);
  },

  // 当绑定元素所在的组件的 VNode 更新时
  componentUpdated(el, binding) {
    // 调用高亮逻辑,因为文本可能已经改变
    highlightText(el, binding.value);
  },

  // 当你需要清理一些在指令创建时设置的东西时(比如事件监听器)
  unbind(el) {
    // 可选:移除高亮,恢复原始文本
    el.innerHTML = el.textContent;
  }
});

2、使用部分

html 复制代码
<template>
  <div class="demo">
    <div v-highlight="searchKey"
      >·东临碣石,以观沧海。水何澹澹,山岛竦峙。树木丛生,百草丰茂。秋风萧瑟,洪波涌起。日月之行,若出其中;星汉灿烂,若出其里。幸甚至哉,歌以咏志。
      ------ 东汉末年/三国·曹操《观沧海》
      ·神龟虽寿,犹有竟时;腾蛇乘雾,终为土灰。老骥伏枥,志在千里;烈士暮年,壮心不已。盈缩之期,不但在天;养怡之福,可得永年。幸甚至哉,歌以咏志。
      ------ 东汉末年·曹操《龟虽寿》</div
    >
  </div>
</template>

<script>
export default {
  name: 'demo',
  data() {
    return {
      searchKey: '水何澹澹'
    };
  }
};
</script>

2.2 页面效果如下:

相关推荐
XiaoSong19 分钟前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
掘金者阿豪33 分钟前
打通KingbaseES与MyBatis:一篇详尽的Java数据持久化实践指南
前端·后端
RoyLin1 小时前
TypeScript设计模式:原型模式
前端·后端·node.js
我是天龙_绍1 小时前
vue Composables 组合式函数
前端
zjjuejin1 小时前
Maven项目的核心蓝图:POM文件
前端·maven
小气小憩1 小时前
“暗战”百度搜索页:Monica悬浮球被“围剿”,一场AI Agent与传统巨头的流量攻防战
前端·人工智能
前端付豪1 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮1 小时前
js符号(Symbol)
前端·javascript
恋猫de小郭2 小时前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
大怪v2 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法