Vue自定义指令：无需绑定key实现文本节点关键词高亮

我完全理解你的诉求——不想让使用者额外关注:key的绑定，希望自定义指令能自己处理数据更新后的高亮逻辑，而不是依赖强制组件重新挂载。咱们先拆解下问题根源，再给出修复方案：

问题根源 #

你之前的实现直接把原始文本节点替换成了包含<strong>的<span>，但Vue的虚拟DOM diff算法是基于它自身维护的节点结构来做更新的。当手动修改DOM后，实际DOM和Vue的虚拟DOM就不匹配了，后续数据更新时，Vue没法正确识别需要重新渲染的内容，自然也就无法重新应用高亮。案例2的:key之所以有效，是因为它强制组件销毁后重新挂载，相当于每次都生成了全新的、未被手动修改过的DOM。

解决方案：重置DOM后再重新高亮 #

我们需要在每次执行高亮逻辑前，先把之前手动修改的DOM还原成Vue渲染后的原始状态，然后再重新应用高亮。具体步骤如下：

修改后的完整代码 #

JavaScript

Vue.config.productionTip = false

function removeKeywords(el, keyword) {
  if (!keyword) return

  // 第一步：重置之前的高亮DOM——把我们添加的span还原成文本节点
  const highlightWrappers = el.querySelectorAll('.keyword-highlight-wrap')
  highlightWrappers.forEach(wrapper => {
    // 创建文本节点，内容为span内的原始文本（去掉strong标签）
    const textNode = document.createTextNode(wrapper.textContent)
    // 用文本节点替换掉高亮span
    wrapper.parentNode.replaceChild(textNode, wrapper)
  })

  // 第二步：重新遍历文本节点并应用高亮
  let n = null
  const founds = []
  const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false)
  while (n = walk.nextNode()) {
    if (n.textContent.trim().length < 1) continue
    founds.push(n)
  }

  founds.forEach(item => {
    // 用全局正则匹配所有关键词，避免只替换一次
    const regex = new RegExp(`(${keyword})`, 'ig')
    if (regex.test(item.textContent)) {
      const kNode = document.createElement('span')
      // 给span加专属类名，方便后续重置识别
      kNode.className = 'keyword-highlight-wrap'
      kNode.innerHTML = item.textContent.replace(regex, '<strong>$1</strong>')
      item.parentNode.insertBefore(kNode, item)
      item.parentNode.removeChild(item)
    }
  })
}

const myDirective = {}
myDirective.install = function install(Vue) {
  const timeoutIDs = {}
  Vue.directive('keyword-highlight', {
    bind(el, binding) {
      clearTimeout(timeoutIDs[binding.value.id])
      if (!binding.value?.keyword) return
      timeoutIDs[binding.value.id] = setTimeout(() => {
        removeKeywords(el, binding.value.keyword)
      }, 500)
    },
    componentUpdated(el, binding) {
      clearTimeout(timeoutIDs[binding.value.id])
      if (!binding.value?.keyword) return
      timeoutIDs[binding.value.id] = setTimeout(() => {
        removeKeywords(el, binding.value.keyword)
      }, 500)
    }
  })
}

Vue.use(myDirective)

const app = new Vue({
  el: "#app",
  data: {
    keyword: 'abc',
    keyword1: 'xyz'
  }
})

CSS

.header {
  background-color: red;
}
strong {
  background-color: yellow;
}
/* 可选：给高亮包裹span加样式，方便调试 */
.keyword-highlight-wrap {
  /* outline: 1px solid #eee; */
}

HTML

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <input v-model="keyword">
  <input v-model="keyword1">
  <h1>Test Case 1: now works without :key</h1>
  <div v-keyword-highlight="{keyword:keyword, id:1}">
    <p>Test1<span>Test2</span>Test3<span>{{keyword}}{{keyword1}}</span></p>
  </div>
  <h1>Test Case 2 (still works)</h1>
  <div :key="keyword+keyword1" v-keyword-highlight="{keyword:keyword, id:2}">
    <p>Test1<span>Test2</span>Test3<span>{{keyword}}{{keyword1}}</span></p>
  </div>
</div>

关键改动说明 #

1. 添加DOM重置逻辑：在removeKeywords开头，通过专属类名.keyword-highlight-wrap找到之前添加的高亮容器，把它们还原成原始文本节点，确保每次高亮前都是干净的、Vue刚渲染好的DOM。
2. 优化正则表达式：把原来的(.*?)(cx)(.*?)改成(${keyword})全局匹配，这样能一次性替换文本节点内所有的关键词，避免遗漏。
3. 增加类名标识：给高亮容器span添加类名，方便后续精准定位和重置，避免误操作其他用户自定义的span。
4. 健壮性处理：增加binding.value?.keyword的可选链判断，避免传入无效值时报错。

现在你可以测试案例1，不需要绑定:key，修改输入框内容后，高亮会自动更新，和案例2的效果一致。

内容的提问来源于stack exchange，提问作者Sphinx