Vue3怎么實(shí)現(xiàn)文章內(nèi)容中多個(gè)關(guān)鍵詞標(biāo)記高亮顯示

本篇內(nèi)容主要講解“Vue3怎么實(shí)現(xiàn)文章內(nèi)容中多個(gè)關(guān)鍵詞標(biāo)記高亮顯示”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue3怎么實(shí)現(xiàn)文章內(nèi)容中多個(gè)關(guān)鍵詞標(biāo)記高亮顯示”吧!

具體實(shí)現(xiàn)過(guò)程

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

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

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

基本使用

它的使用比較簡(jiǎn)單的，直接上代碼：

<template>
  <div>
    <input v-model="searchValue" /> 
    <button @click="search">search</button> 
    <div>搜索到的個(gè)數(shù)：{{result.length}}</div>
    <div>搜索到的內(nèi)容：{{result}}</div>
    <br/>
    <WordHighlighter
      highlightClass="highlight"
      :query="lightQuery"
      :caseSensitive="false"
      :splitBySpace="true"
      @matches="lightEmit">
	<div>
	  我已經(jīng)遠(yuǎn)離了你的河流，絕不是疏遠(yuǎn)，因?yàn)槲乙咽巧砭赢愅痢＿h(yuǎn)遠(yuǎn)地，依然聽(tīng)得到你翻山越嶺、日夜兼程的腳步聲，依然無(wú)比清晰地看得到你的那條灑滿星星的清澈的河流。只要，也只有想起你——故鄉(xiāng)，就是異域的那條河流也會(huì)灑滿故鄉(xiāng)的星星。無(wú)論醒著還是沉睡，都會(huì)重復(fù)著那個(gè)讓人心旌搖曳的畫面，星星都在你的河流里百媚地眨眼。因?yàn)槟菞l灑滿星星的河流途經(jīng)我無(wú)猜的孩童，無(wú)知的少年，迷茫的青春，還要經(jīng)過(guò)可知的未來(lái)，是不是今后還要交付給大海了呢？那樣，大海的那些星星一定是故鄉(xiāng)送給他們的饋贈(zèng)，沒(méi)有故鄉(xiāng)的孕育，大海也會(huì)失去靈氣，因?yàn)榇蠛５脑搭^就在故鄉(xiāng)的這頭……

	  星星的感情，在城市里總是被耽誤。是星星的感情單一，還是城市的濫情呢？如果城市是舞臺(tái)，星星就不是市民，所以也不是演員。如果天空是舞臺(tái)，星星就是居民，所以能成為明星。如果河流是舞臺(tái)，星星就是精靈，她就是大地的靈魂。如今，愛(ài)情在城市里就是一個(gè)錯(cuò)誤，比金錢的質(zhì)量輕百倍，所以比海洛因更危險(xiǎn)。愛(ài)情在鄉(xiāng)村的河流里，就有了星星的光輝，成就的是?？菔癄€的傳奇……

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

          睡得沉沉的夜，呵欠連連，漫長(zhǎng)得沒(méi)有盡頭，無(wú)論夜幾多的黑，可故鄉(xiāng)的河流從也不會(huì)迷路，因?yàn)橛行切沁@明亮的眼睛。你的人生沒(méi)有迷路，你的夢(mèng)沒(méi)有迷失方向，你的未來(lái)總在奔跑的路上，是不是也是借了故鄉(xiāng)河流里的星星做慧眼呢？如果河流看不到星星，那肯定會(huì)落魄的。如果人生看不到那條飄著星星的河流，如果夢(mèng)里沒(méi)有那條飄著星星的河流，如果未來(lái)的路上沒(méi)有那條飄著星星的河流，你是不是都會(huì)驚慌失措呢？陌生人能通過(guò)那條河流找到你的家，如果沒(méi)有了她你的心能到家嗎？
        </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>

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

props

事件

原理過(guò)程

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;
}

到此，相信大家對(duì)“Vue3怎么實(shí)現(xiàn)文章內(nèi)容中多個(gè)關(guān)鍵詞標(biāo)記高亮顯示”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！