Vue3使用v-html實現(xiàn)文本關鍵詞變色處理

更新時間：2024年06月26日 09:30:52 作者：劍亦未配妥

遍歷文本內(nèi)容,找到關鍵詞,并使用某種方法更改其字體樣式,經(jīng)過搜尋資料決定采用v-html實現(xiàn),但是v-html本身并不安全,有安全性風險且影響性能,所以謹慎使用,本文給大家介紹了Vue3使用v-html實現(xiàn)文本關鍵詞變色處理,需要的朋友可以參考下

首先看應用場景

這有一段文本內(nèi)容，是項目的簡介，想要實現(xiàn)將文本中的關鍵詞進行變色處理

有如下關鍵詞

實現(xiàn)思路

遍歷文本內(nèi)容，找到關鍵詞，并使用某種方法更改其字體樣式。經(jīng)過搜尋資料決定采用v-html實現(xiàn)，但是v-html本身并不安全，有安全性風險且影響性能，所以謹慎使用。
想詳細了解的同學的同學可以看一下官網(wǎng)的介紹

uniapp官網(wǎng)v-htlml

vue官網(wǎng)v-html

實現(xiàn)代碼

//存儲結果
const introduction_content = ref('')
//定義函數(shù)
const updateColor = function (content: string) {
    let keywords = ['導師:', '關聯(lián)比賽:', '獲得成就:', '未來發(fā)展:', '獎金:']
    const result = ref(content) // 初始值為原始內(nèi)容
    //本項目的需求是根據(jù)項目狀態(tài)動態(tài)變更顏色
    const color = ref(
      detailData.value!.status == 0
        ? 'rgba(7, 193, 96, 1)'
        : detailData.value!.status == 1
        ? 'rgba(250, 157, 59, 1)'
        : detailData.value!.status == 2
        ? 'rgba(250, 81, 81, 0.5)'
        : ''
    )
    // 遍歷每個關鍵詞并進行替換
    keywords.forEach((keyword) => {
      const regex = new RegExp(keyword, 'gi')
      // 每次替換都基于當前的 result.value
      result.value = result.value.replace(
        regex,
        `<span style="color: ${color.value};font-size:15px;">${keyword}</span>`
      )
    })
    introduction_content.value = result.value
}

需要注意的是，如果需要更改字體大小，不能使用rpx等，需要使用px

可以輸出introduction_content看一下，結果如下

xx項目簡介
<span style="color: rgba(7, 193, 96, 1);font-size:15px;">導師:</span>?xxx
<span style="color: rgba(7, 193, 96, 1);font-size:15px;">關聯(lián)比賽:</span>?建模
<span style="color: rgba(7, 193, 96, 1);font-size:15px;">獎金:</span>?100

到此這篇關于Vue3使用v-html實現(xiàn)文本關鍵詞變色處理的文章就介紹到這了,更多相關Vue3 v-html關鍵詞變色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: