快捷導(dǎo)航

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

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

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

首先看應(yīng)用場(chǎng)景

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

有如下關(guān)鍵詞

實(shí)現(xiàn)思路

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

uniapp官網(wǎng)v-htlml

vue官網(wǎng)v-html

實(shí)現(xiàn)代碼

//存儲(chǔ)結(jié)果
const introduction_content = ref('')
//定義函數(shù)
const updateColor = function (content: string) {
    let keywords = ['導(dǎo)師:', '關(guān)聯(lián)比賽:', '獲得成就:', '未來發(fā)展:', '獎(jiǎng)金:']
    const result = ref(content) // 初始值為原始內(nèi)容
    //本項(xiàng)目的需求是根據(jù)項(xiàng)目狀態(tài)動(dòng)態(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)'
        : ''
    )
    // 遍歷每個(gè)關(guān)鍵詞并進(jìn)行替換
    keywords.forEach((keyword) => {
      const regex = new RegExp(keyword, 'gi')
      // 每次替換都基于當(dāng)前的 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看一下，結(jié)果如下

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

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

您可能感興趣的文章: