Vue.js通过filter实现搜索关键字高亮

概要

在 Vue.js 中实现搜索关键字高亮是一项常见的任务，通过使用正则表达式和字符串替换，我们可以轻松地实现这个功能。本文将向你展示如何在 Vue.js 中实现搜索关键字高亮。

步骤一：创建过滤器

首先，我们需要创建一个过滤器，用于在模板中实现搜索关键字高亮。在你的 Vue.js 组件的任何一个地方，你可以创建一个名为highlight的过滤器，并添加以下代码：

Vue.filter('highlight', function(value, keyword) {
  const pattern = new RegExp(keyword, 'gi');
  return value.replace(pattern, '<span class="highlight">$&</span>');
});

在上面的代码中，我们创建了一个名为highlight的过滤器。该过滤器接受两个参数：value是需要进行高亮的文本内容，keyword是搜索关键字。我们使用正则表达式创建了一个全局不区分大小写的匹配模式，并将匹配的部分用<span class="highlight">标签包裹起来，以实现高亮效果。

步骤二：在模板中应用过滤器

一旦我们创建了过滤器，我们就可以在 Vue 组件的模板中应用这个过滤器了。在你的模板中，你可以像下面这样使用highlight过滤器：

<template>
  <div>
    <input v-model="searchKeyword" type="text" placeholder="搜索关键字">
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        <span v-html="item.content | highlight(searchKeyword)"></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      list: [
        { id: 1, content: '这是一段包含关键字的文本内容' },
        { id: 2, content: '另一段文本，也包含关键字' },
        // 更多数据...
      ],
    };
  },
  computed: {
    filteredList() {
      if (this.searchKeyword) {
        const pattern = new RegExp(this.searchKeyword, 'gi');
        return this.list.filter(item => {
          return pattern.test(item.content);
        });
      } else {
        return this.list;
      }
    },
  },
};
</script>

在上面的代码中，我们首先在模板中创建了一个输入框，用于输入搜索关键字。然后，我们使用v-for指令遍历一个名为list的数组，并使用v-html指令在文本内容中应用highlight过滤器。

在filteredList计算属性中，我们检查searchKeyword是否存在。如果存在，我们使用RegExp创建一个正则表达式模式，并使用test方法来检查每个item的内容是否与关键字匹配。如果匹配成功，该项将被保留在filteredList中。

步骤三：添加样式

最后，我们可以通过 CSS 来添加高亮的样式。在你的样式文件中，你可以添加以下样式：

.highlight {
  background-color: yellow;
}

在上面的样式中，我们使用黄色作为背景颜色来突出显示高亮部分。你可以根据需要自定义高亮的样式。

小结

通过本文，学会了如何在 Vue.js 中实现搜索关键字高亮的功能。使用过滤器和正则表达式，我们可以轻松地实现这个功能，并增强用户体验。