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

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

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

const highlightText = (el, searchText) => {
  const textContent = el.textContent;
  const regex = new RegExp(searchText, 'gi');
  const highlightedText = textContent.replace(regex, (matchedText) => {
    return `${matchedText}`;
  });
  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、使用部分

2.2 页面效果如下：