Vue3 关键字高亮：实现思路与实践

前端

2023-07-01 23:00:43

在 Vue3 中实现高亮：提升用户搜索体验

关键字高亮的原理

想象一下，你在网上搜索一篇关于“意大利美食”的文章。当你开始在搜索栏中输入“意”字时，你会注意到文章中的“意大利”一词立即变得醒目。这种效果称为关键字高亮。

关键字高亮背后原理很简单：

获取用户输入的关键字。
将其与文本中的单词进行匹配。
突出显示匹配的单词。

Vue3 中的关键字高亮实现

数据准备

首先，我们需要准备好待高亮的文本。通常，这些文本是存储在数据库中的文章、文档等。我们需要提取这些内容以便后续处理。

用户输入监测

接下来，我们需要实时监听用户在搜索框中的输入。可以使用 Vue3 的 v-model 指令或 input 事件侦听器实现。

关键字匹配

当用户输入内容发生变化时，需要将输入内容与准备好的文本内容进行匹配，找出匹配的关键字。正则表达式或字符串比较等方法可用于此目的。

关键字标记

找到匹配的关键字后，需要对它们进行标记，以便在页面中突出显示。HTML 标签（如 <mark> 标签）或 CSS 样式（如 background-color 属性）可用于实现此目的。

代码示例

以下是一个 Vue3 关键字高亮功能的代码示例：

<template>
  <input type="text" v-model="query">
  <div v-html="highlightedText"></div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const query = ref('')
    const text = ref('This is a sample text to be highlighted.')
    const highlightedText = computed(() => {
      const regex = new RegExp(query.value, 'gi')
      return text.value.replace(regex, `<mark>${query.value}</mark>`)
    })

    return { query, highlightedText }
  }
}
</script>