快捷導(dǎo)航

vue實現(xiàn)文字檢索時候?qū)⑺阉鲀?nèi)容標紅功能

更新時間：2023年08月19日 10:06:44 作者：slom_fxt

這篇文章主要介紹了vue中實現(xiàn)文字檢索時候?qū)⑺阉鲀?nèi)容標紅,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

實現(xiàn)結(jié)果

html：

 <div class="searchBox">
        <span class="bt">標&#8195&#8195題</span>
        <div class="search">
            <div class="shuru">
                <!-- <span class="title">生產(chǎn)經(jīng)營</span> -->
                <input type="請輸入要查詢的內(nèi)容" v-model="searchText" @@keydown.enter="getSearch('btn')">
            </div>
            <div class="btn" @click="getSearch('btn')">
                <img src="../../assets/wyc/search.png" alt="">
            </div>
        </div>
    </div> 
<span v-html="brightenKeyword(el.filename,searchText)"></span>

搜索框樣式：

.searchBox {
    height: 70px;
    display: flex;
    align-items: center;
    .bt {
        font-family: 'pf';
        font-size: 18px;
        color: #000;
        font-weight: 400;
        margin-right: 45px;
    }
    .search {
        width: 756px;
        height: 46px;
        display: flex;
        position: relative;
        .shuru {
            width: 680px;
            height: 46px;
            background: #FFFFFF;
            border: 1px solid rgba(12, 174, 149, 1);
            border-radius: 8px 0px 0px 8px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            .bt {
                white-space: nowrap;
                display: inline-block;
            }
            .title {
                font-family: 'pf';
                font-size: 16px;
                color: #333333;
                font-weight: 400;
                padding-right: 7px;
                white-space: nowrap;
                border-right: 1px solid #D8D8D8;
                margin-right: 12px;
            }
            input {
                width: 99%;
                height: 34px;
                box-sizing: border-box;
                border: none;
                outline: none;
                font-family: 'pf';
                font-size: 16px;
                color: #333333;
                font-weight: 400;
                white-space: nowrap;
            }
        }
        .btn {
            width: 78px;
            height: 46px;
            background: #0CAE95;
            border-radius: 0px 8px 8px 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                width: 22px;
                height: 22px;
            }
        }
        .tips {
            width: 274px;
            display: flex;
            // align-items: center;
            position: absolute;
            right: -280px;
            top: 50%;
            transform: translateY(-50%);
            img {
                width: 18px;
                height: 18px;
            }
            span {
                font-family: 'pf';
                font-size: 12px;
                color: #7a7a7a;
                font-weight: 400;
                white-space: wrap;
                margin-left: 3px;
                display: none;
            }
            &:hover {
                span {
                    display: block;
                }
            }
        }
    }
}

JavaScript：

    data: () => ({
        searchText: '',
    }),

        //搜索內(nèi)容的數(shù)據(jù)
        async getSearch(val) {
            console.log(val, this.searchText);
            this.$nextTick(()=>{
                this.getIsmDatas()
            })
        },
        //獲取需要標紅的文字
        getRedWords(contentText, keyword) {
            let keywordArray = keyword.split(" ");
            console.log(keywordArray, '有空格的字...');
            let wordsArray = [];
            for (let key of keywordArray) {
                if (contentText.includes(key)) {
                    wordsArray.push(key)
                }
            }
            // this.changeRedText(contentText,wordsArray)
            return wordsArray;
        },
        //將文字標紅
        brightenKeyword(contentText, keyword) {
            // debugger
            var res = contentText
            // keyword = keyword.replace("+",'')
            var judgeFn = new RegExp(/\s+/g); //空格的正則
            //有加號的時候
            if (keyword.includes('+')) {
                //    const Reg = new RegExp("+", 'g');
                keyword = keyword.replace("+", '')
            }
            //有空格的時候
            else if (judgeFn.test(keyword)) {
                console.log(keyword, "【結(jié)果】：內(nèi)容包含有空格!");
                let wordsArray = this.getRedWords(contentText, keyword);
                for (let word of wordsArray) {
                    if (word != "") {
                        // 設(shè)定需要檢索的模式
                        const Reg = new RegExp(word, 'g');
                        //替換每一個相同字
                        res = res.replace(Reg, `<span style="color: red; font-family: 'pfm';">${word}</span>`);
                    }
                }
                return res
            }
            // 判斷標題中是否包含關(guān)鍵字
            if (contentText.includes(keyword)) {
                const Reg = new RegExp(keyword, 'g');
                res = res.replace(Reg, `<span style="color: red; font-family: 'pfm';">${keyword}</span>`);
            }
            return res; //此時的res里已經(jīng)將需要標紅的字體帶上了格式（<span style="color:red"></span>）
        },
        //獲取表格數(shù)據(jù)
        async getIsmDatas() {
            let res = await this.$http.get(`/ctrl/ismStudy/getIsmDatas?unitType=${this.unitType}&jobnature=${this.tabOption['code_value']}&jobnatureText=${this.tabOption['code_name']}&page=${this.PageInfo.pagenum}&limit=${this.PageInfo.pagesize}`)
            if (res && res.status == 200) {
                this.tableData.tbody = res.data.data.data
                this.PageInfo.total = res.data.data.count
            }
        },

到此這篇關(guān)于vue中實現(xiàn)文字檢索時候?qū)⑺阉鲀?nèi)容標紅的文章就介紹到這了,更多相關(guān)vue搜索內(nèi)容標紅內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: