vue实现搜索关键词高亮的详细教程

下面是“vue实现搜索关键词高亮的详细教程”的完整攻略。

一、需求分析

我们需要实现一个搜索功能，在用户搜索关键词后，将页面中匹配到的关键词高亮显示。

二、实现过程

1. HTML结构

首先，我们需要在HTML中准备好需要搜索的容器，并且将搜索结果渲染到容器中。

<div class="search-container">
  <!-- 用于显示搜索结果的容器 -->
  <ul class="search-ul">
    <li v-for="(result, index) in searchResults" :key="index">
      <!-- 高亮显示关键词的地方 -->
      <span v-html="result.highlight"></span>
    </li>
  </ul>

  <!-- 搜索框 -->
  <input type="text" v-model="keyword" @keyup="searchKeyword" placeholder="请输入搜索关键词" />
</div>

在上述HTML结构中，我们准备了一个包含搜索结果和搜索框的容器。搜索结果由一个ul列表表示，我们使用v-for指令将搜索结果渲染到列表中。在每个搜索结果li元素中，我们使用v-html指令来显示高亮的搜索关键词。

2. 数据结构定义

接下来，我们需要定义搜索结果的数据结构。我们使用关键词keyword来匹配数据，匹配成功后将搜索结果保存在searchResults数组中。每个搜索结果对象包含一个原始文本和一个高亮显示的文本。

data() {
  return {
    keyword: '', // 搜索关键词
    searchResults: [] // 搜索结果
  }
}

3. 搜索方法实现

现在我们需要实现searchKeyword方法，这个方法将在用户输入关键词后触发，将搜索结果保存在searchResults数组中。

methods: {
  searchKeyword() {
    // 清空之前的搜索结果
    this.searchResults = []

    // 如果关键词为空，则不进行搜索
    if (!this.keyword.trim()) {
      return
    }

    // 定义正则表达式，进行匹配
    const regEx = new RegExp(this.keyword, 'gi')

    // 遍历数据，匹配关键词
    this.dataList.forEach(originalData => {
      const result = {}

      if (originalData.title.match(regEx)) {
        result.title = originalData.title.replace(regEx, '<b class="highlight">$&</b>')
      } else {
        result.title = originalData.title
      }

      if (originalData.content.match(regEx)) {
        result.content = originalData.content.replace(regEx, '<b class="highlight">$&</b>')
      } else {
        result.content = originalData.content
      }

      this.searchResults.push(result)
    })
  }
}

在上述代码中，我们先清空searchResults数组，然后检查搜索关键词是否非空。接着，使用RegExp对象定义一个正则表达式，进行关键词匹配。遍历数据列表，使用match方法进行匹配，将匹配到的关键词用html标签高亮显示。最后，将搜索结果保存在searchResults数组中。

4. CSS样式设置

最后，我们需要对高亮的关键词进行CSS样式的设置，使其明显突出。

.highlight {
  color: red;
}

三、示例

下面我们来看两个示例，分别是实现搜索歌曲和搜索文章的功能。

示例1：搜索歌曲

假设我们有一个歌曲列表，列表中包含歌曲名称和歌手名称。用户可以搜索歌曲或歌手名称，将匹配到的歌曲名称和歌手名称高亮显示。

HTML结构

<div class="search-container">
  <!-- 用于显示搜索结果的容器 -->
  <ul class="search-ul">
    <li v-for="(result, index) in searchResults" :key="index">
      <!-- 高亮显示歌曲名称的地方 -->
      <span v-html="result.songNameHighlight"></span>
      -
      <!-- 高亮显示歌手名称的地方 -->
      <span v-html="result.singerNameHighlight"></span>
    </li>
  </ul>

  <!-- 搜索框 -->
  <input type="text" v-model="keyword" @keyup="searchKeyword" placeholder="请输入搜索关键词" />
</div>

数据结构定义

data() {
  return {
    keyword: '', // 搜索关键词
    searchResults: [], // 搜索结果
    dataList: [ // 歌曲列表数据
      { songName: '稻香', singerName: '周杰伦' },
      { songName: '听妈妈的话', singerName: '周杰伦' },
      { songName: '晴天', singerName: '周杰伦' },
      { songName: '七里香', singerName: '周杰伦' },
      { songName: '告白气球', singerName: '周杰伦' },
      { songName: '爱情转移', singerName: '陈奕迅' },
      { songName: '一路向北', singerName: '周杰伦' },
      { songName: '以父之名', singerName: '周杰伦' },
      { songName: '牛仔很忙', singerName: '周杰伦' },
      { songName: '青花瓷', singerName: '周杰伦' }
    ]
  }
}

搜索方法实现

methods: {
  searchKeyword() {
    // 清空之前的搜索结果
    this.searchResults = []

    // 如果关键词为空，则不进行搜索
    if (!this.keyword.trim()) {
      return
    }

    // 定义正则表达式，进行匹配
    const regEx = new RegExp(this.keyword, 'gi')

    // 遍历数据，匹配关键词
    this.dataList.forEach(data => {
      const result = {}

      if (data.songName.match(regEx)) {
        // 高亮歌曲名称
        result.songNameHighlight = data.songName.replace(regEx, '<b class="highlight">$&</b>')
      } else {
        result.songNameHighlight = data.songName
      }

      if (data.singerName.match(regEx)) {
        // 高亮歌手名称
        result.singerNameHighlight = data.singerName.replace(regEx, '<b class="highlight">$&</b>')
      } else {
        result.singerNameHighlight = data.singerName
      }

      this.searchResults.push(result)
    })
  }
}

CSS样式设置

.highlight {
  color: red;
}

示例2：搜索文章

假设我们有一个博客文章列表，列表中包含文章标题和文章内容。用户可以搜索文章标题或文章内容，将匹配到的标题和内容高亮显示。

HTML结构

<div class="search-container">
  <!-- 用于显示搜索结果的容器 -->
  <ul class="search-ul">
    <li v-for="(result, index) in searchResults" :key="index">
      <!-- 高亮显示文章标题的地方 -->
      <span v-html="result.titleHighlight"></span>
      <br />
      <!-- 高亮显示文章内容的地方 -->
      <span v-html="result.contentHighlight"></span>
    </li>
  </ul>

  <!-- 搜索框 -->
  <input type="text" v-model="keyword" @keyup="searchKeyword" placeholder="请输入搜索关键词" />
</div>

数据结构定义

data() {
  return {
    keyword: '', // 搜索关键词
    searchResults: [], // 搜索结果
    dataList: [ // 文章列表数据
      { title: '如何学习JavaScript', content: 'JavaScript是一门动态、弱类型的编程语言...' },
      { title: 'Vue.js教程', content: 'Vue.js是一款渐进式JavaScript框架...' },
      { title: 'React教程', content: 'React是由Facebook开发的一款JavaScript库...' },
      { title: 'JavaScript基础知识', content: 'JavaScript是一门动态、弱类型的编程语言...' },
      { title: '前端工程化实践', content: '前端工程化是指将开发中的业务逻辑和功能，...' },
      { title: 'Node.js基础知识', content: 'Node.js是一个基于Chrome V8引擎的JavaScript运行环境...' }
    ]
  }
}

搜索方法实现

methods: {
  searchKeyword() {
    // 清空之前的搜索结果
    this.searchResults = []

    // 如果关键词为空，则不进行搜索
    if (!this.keyword.trim()) {
      return
    }

    // 定义正则表达式，进行匹配
    const regEx = new RegExp(this.keyword, 'gi')

    // 遍历数据，匹配关键词
    this.dataList.forEach(data => {
      const result = {}

      if (data.title.match(regEx)) {
        // 高亮文章标题
        result.titleHighlight = data.title.replace(regEx, '<b class="highlight">$&</b>')
      } else {
        result.titleHighlight = data.title
      }

      if (data.content.match(regEx)) {
        // 高亮文章内容
        result.contentHighlight = data.content.replace(regEx, '<b class="highlight">$&</b>')
      } else {
        result.contentHighlight = data.content
      }

      this.searchResults.push(result)
    })
  }
}