Nuxt3でのキーワードに一致する部分にハイライトをつける

検索機能でよく使用される、検索キーワードに一致する部分の背景色が黄色くなっているものを実装していきます

実装例

使用パッケージ

https://www.npmjs.com/package/vue-highlight-words

パッケージインストール

npm i --save vue-highlight-words

実装コード

//app.vue
<template>
  <div id="app">
    <div>
      <input type="text" v-model="words">
    </div>
    
    <Highlighter
      class="my-highlight"
      :style="{ color: 'blue' }"
      highlightClassName="highlight"
      :searchWords="keywords"
      :autoEscape="true"
      :textToHighlight="text"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import Highlighter from 'vue-highlight-words'

const text = ref('The dog is chasing the cat. Or perhaps they\'re just playing?')
const words = ref('')

const keywords = computed(() => {
  return words.value.split(/\s+/)
})
</script>

コードの解説

下記のコードがパッケージを使用してハイライトを実装している部分になります

<Highlighter
    class="my-highlight"
    :style="{ color: 'blue' }"
    highlightClassName="highlight"
    :searchWords="keywords"
    :textToHighlight="text"
/>

各要素の説明

class, style

classとstyleはハイライトを適用する文章全体の要素に対しての設定になります
こちらは普段のHTML, CSSの部分になりますので詳細は省きます

highligntClassName

こちらは検索キーワードに一致するハイライトの部分に対するクラス名を設定できる
例えばhighligntClassNameにhighlightを設定して下記のコードを追加するとハイライトの色が茶色になります

<style>
.highlight{
  background-color: brown;
}
</style>

searchWords

こちらはハイライトをつけたいキーワードを配列で渡すと複数のキーワードでも一致する部分にハイライトをつけてくれます
inputタグで入力した内容を下記のコードで空白（全角/半角）で分割し、keywordsに格納してsearchWordsに設定しています

// keywordsの中身の例　[ "dog", "cat" ]
const keywords = computed(() => {
  return words.value.split(/\s+/)
})

textToHighlight

こちらにはハイライトの検索をかけたい文章などのデータを渡します