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

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

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

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

環(huán)境

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

<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)邊緣，有一間被歲月溫柔撫摸過的木屋，它靜靜地佇立在一片絢爛的野花叢中。屋內，住著一位名叫蘇婉的女子，她擁有一雙能洞察人心的眼睛和一頭如夜色般深邃的長發(fā)。每天黃昏，蘇婉都會坐在窗邊，手捧一本泛黃的書，眼神時而凝重，時而溫柔，仿佛在與書中人物進行著跨越時空的對話。\n' +
    '\n' +
    '某天，一陣突如其來的風雨打破了小鎮(zhè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ù)之后，下面的文字中，與關鍵字相同的文字高亮成紅色的，很簡單，就一個方法：

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

然后再調用一下這個方法就可以了：