快捷導(dǎo)航

vue實現(xiàn)關(guān)鍵字高亮效果的示例代碼

更新時間：2024年11月28日 09:59:58 作者：叫我+V

這篇文章主要為大家詳細(xì)介紹了如何使用vue實現(xiàn)關(guān)鍵字高亮效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

這是啥子意思呢，就是類似于百度搜索，根據(jù)關(guān)鍵詞搜索結(jié)果，搜索結(jié)果中，與關(guān)鍵詞相同的字顯示紅色，僅此而已，沒有什么大的功能。簡單寫一下demo。

環(huán)境

我使用的是 vue3 + ts 的語法來寫，其實一個樣兒，關(guān)鍵代碼 js、ts 都可以，就一個方法，調(diào)用一下就可以了。

<template>
  <div class="ed-con">
    <el-input v-model="input" style="width: 240px" placeholder="Please input"/>
    <p v-html="txt"></p>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';

const input = ref('');

const txt = ref('在古老的小鎮(zhèn)邊緣，有一間被歲月溫柔撫摸過的木屋，它靜靜地佇立在一片絢爛的野花叢中。屋內(nèi)，住著一位名叫蘇婉的女子，她擁有一雙能洞察人心的眼睛和一頭如夜色般深邃的長發(fā)。每天黃昏，蘇婉都會坐在窗邊，手捧一本泛黃的書，眼神時而凝重，時而溫柔，仿佛在與書中人物進行著跨越時空的對話。\n' +
    '\n' +
    '某天，一陣突如其來的風(fēng)雨打破了小鎮(zhèn)的寧靜，也吹散了蘇婉心中的平靜。一位渾身濕透的青年男子闖入了她的世界，帶著一身未解之謎。蘇婉望著他，眼中閃過一抹不易察覺的光芒，她知道，自己的生活從此將不再平凡。兩人在雨后的木屋里，圍繞著爐火，開始編織起一段關(guān)于尋找、救贖與愛的故事，而窗外的世界，正悄悄地為這段奇遇添上一抹神秘的色彩。')

</script>

<style scoped lang="scss">
.ed-con {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  ::v-deep(.ed-highlight) {
    color: red;
  }
}
</style>

上面的代碼運行起來就是這樣的：

接下來就是怎么實現(xiàn)輸入框輸入數(shù)據(jù)之后，下面的文字中，與關(guān)鍵字相同的文字高亮成紅色的，很簡單，就一個方法：

const highlightText = () => {
  if (!input.value) {
    return txt.value;
  }
  const regex = new RegExp(`(${input.value})`, 'gi');
  const highlightedText = txt.value.replace(regex, '<span class="ed-highlight">$1</span>');
  return highlightedText;
}

然后再調(diào)用一下這個方法就可以了：

<p v-html="highlightText()"></p>

就是把關(guān)鍵字給用標(biāo)簽包裹起來，然后給這個標(biāo)簽設(shè)置一個 class 樣式，然后通過 css 代碼，給這個 class 加上一個紅色的樣式，就這樣：

到此這篇關(guān)于vue實現(xiàn)關(guān)鍵字高亮效果的示例代碼的文章就介紹到這了,更多相關(guān)vue關(guān)鍵字高亮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中
這篇文章主要介紹了vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-12-12
vue3如何解決slot深層透傳問題
這篇文章主要介紹了vue3如何解決slot深層透傳問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
一文帶你了解什么是Vue的前端微服務(wù)架構(gòu)(Micro Frontends)
微前端架構(gòu)是一種將大型前端應(yīng)用拆分為多個小型、獨立的前端應(yīng)用的架構(gòu)風(fēng)格,每個小型前端應(yīng)用都可以獨立部署、獨立開發(fā)和獨立運行,下面我們就來學(xué)習(xí)一下它的相關(guān)使用吧
2023-11-11
Vue實現(xiàn)選中文本彈出彈窗功能的完多種方法
在現(xiàn)代 Web 應(yīng)用中,選中文本后顯示相關(guān)操作或信息是一種常見的交互模式,本文將詳細(xì)介紹如何在 Vue 中實現(xiàn)選中文本后彈出彈窗的功能,包括其工作原理、多種實現(xiàn)方式以及實際項目中的應(yīng)用示例,需要的朋友可以參考下
2025-09-09
Vue項目的表單校驗實戰(zhàn)指南
這篇文章主要介紹了Vue項目表單校驗的相關(guān)資料,前端表單校驗?zāi)軠p少無效請求,保護后端接口,使用ElementPlus表單組件進行校驗,需要準(zhǔn)備表單對象、規(guī)則對象并進行雙向綁定,用戶名、密碼以及協(xié)議勾選等字段都需符合特定規(guī)則,需要的朋友可以參考下
2024-10-10
elementUI彈窗里的表單重置不生效問題解決
本文主要介紹了elementUI彈窗里的表單重置不生效問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式
這篇文章主要介紹了Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue加載天氣組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue加載天氣組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
在Vue3項目中使用Jest配置生成測試報告的示例詳解
在Vue 3項目中使用Jest進行單元測試是一種常見的做法,它可以幫助我們驗證代碼的正確性和穩(wěn)定性,本文將介紹如何在Vue 3項目中配置Jest,以生成測試報告,需要的朋友可以參考下
2023-09-09
vue3.0透傳屬性和事件的使用方式舉例
這篇文章主要給大家介紹了關(guān)于vue3.0透傳屬性和事件使用的相關(guān)資料,透傳attribute指的是傳遞給一個組件,卻沒有被該組件聲明為props或emits的attribute或者v-on事件監(jiān)聽器,需要的朋友可以參考下
2024-01-01