Vue3怎么實現文章內容中多個關鍵詞標記高亮顯示

本篇內容主要講解“Vue3怎么實現文章內容中多個關鍵詞標記高亮顯示”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue3怎么實現文章內容中多個關鍵詞標記高亮顯示”吧!

具體實現過程

vue-word-highlighter 是一個小眾的包，并不出名，Github 上也只會百星出頭，不過能用能跑就行，合適才是最好的，小編最近信奉一句話"程序和你一個能跑就行"。

vue-word-highlighter 支持 Vue3 和 Vue2，不過 Vue2 版本是通過 vue-demi 構建的，對 vue-demi 不熟悉的小伙伴還是別用吧(?ω?)，咱有一說一，用 Vue2 來完成該需求，有其他很多包可以推薦。

至于為什么，正如它文檔介紹的：

基本使用

它的使用比較簡單的，直接上代碼：

<template>
  <div>
    <input v-model="searchValue" /> 
    <button @click="search">search</button> 
    <div>搜索到的個數：{{result.length}}</div>
    <div>搜索到的內容：{{result}}</div>
    <br/>
    <WordHighlighter
      highlightClass="highlight"
      :query="lightQuery"
      :caseSensitive="false"
      :splitBySpace="true"
      @matches="lightEmit">
	<div>
	  我已經遠離了你的河流，絕不是疏遠，因為我已是身居異土。遠遠地，依然聽得到你翻山越嶺、日夜兼程的腳步聲，依然無比清晰地看得到你的那條灑滿星星的清澈的河流。只要，也只有想起你——故鄉，就是異域的那條河流也會灑滿故鄉的星星。無論醒著還是沉睡，都會重復著那個讓人心旌搖曳的畫面，星星都在你的河流里百媚地眨眼。因為那條灑滿星星的河流途經我無猜的孩童，無知的少年，迷茫的青春，還要經過可知的未來，是不是今后還要交付給大海了呢？那樣，大海的那些星星一定是故鄉送給他們的饋贈，沒有故鄉的孕育，大海也會失去靈氣，因為大海的源頭就在故鄉的這頭……

	  星星的感情，在城市里總是被耽誤。是星星的感情單一，還是城市的濫情呢？如果城市是舞臺，星星就不是市民，所以也不是演員。如果天空是舞臺，星星就是居民，所以能成為明星。如果河流是舞臺，星星就是精靈，她就是大地的靈魂。如今，愛情在城市里就是一個錯誤，比金錢的質量輕百倍，所以比海洛因更危險。愛情在鄉村的河流里，就有了星星的光輝，成就的是海枯石爛的傳奇……

	  晴空萬里的白晝，總愛涂脂抹粉打扮一番。這樣的時候，只有清泉敢從濃妝艷抹的云端踏過，只有披著滿身星星的魚兒敢從藍天穿過，將自滿表現的太陽戲弄一番。漿洗的女人們總愛把笑聲拋在河面上，拍打著棒槌當爵士樂的節拍，委婉的歌聲隨著幸福的河水流淌，斑斕的衣服在白云間飄舞成了彩虹。我聽到了大地與天空的竊語，徹底悟出了薩頂頂唱的《萬物生》里的深刻與凝重：我看見山鷹在寂寞兩條魚上飛 ，兩條魚兒穿過海一樣咸的河水， 一片河水落下來遇見人們破碎 ，人們在行走，身上落滿山鷹的灰……

          睡得沉沉的夜，呵欠連連，漫長得沒有盡頭，無論夜幾多的黑，可故鄉的河流從也不會迷路，因為有星星這明亮的眼睛。你的人生沒有迷路，你的夢沒有迷失方向，你的未來總在奔跑的路上，是不是也是借了故鄉河流里的星星做慧眼呢？如果河流看不到星星，那肯定會落魄的。如果人生看不到那條飄著星星的河流，如果夢里沒有那條飄著星星的河流，如果未來的路上沒有那條飄著星星的河流，你是不是都會驚慌失措呢？陌生人能通過那條河流找到你的家，如果沒有了她你的心能到家嗎？
        </div>
     </WordHighlighter>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import WordHighlighter from "vue-word-highlighter";

export default defineComponent({
  name: "App",
  components: {
    WordHighlighter,
  },
  setup() {
    const searchValue = ref<string>();
    const lightQuery = ref<string>();
    const result = ref<Array<string>>([]);

    const search = () => {
      lightQuery.value = searchValue.value;
    };

    const lightEmit = (e: Array<string>) => {
      result.value = e
    }

    return {
        searchValue,
        lightQuery,
        result,
        search,
        lightEmit
    };
  },
});
</script>

<style>
.highlight{
  background-color: transparent;
  color: red;
  font-weight: bold;
}
</style>

是不是超簡單，下面貼一下它支持的一些 props 與事件，就又可以愉快的摸魚了。

props

事件

原理過程

function fn(content, keywordArray) {
  if(keywordArray.length === 0) return;

  keywordArray.forEach(keyword => {
    if(keyword && content.indexOf(keyword) !== -1) {
      content = content.replace(new RegExp(keyword, 'g'), `<mark>${keyword}</mark>`);
    }
  });

  return content;
}

到此，相信大家對“Vue3怎么實現文章內容中多個關鍵詞標記高亮顯示”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！