vue 搜尋框高亮
阿新 • • 發佈:2022-12-09
核心程式碼
keySign(title) { let s = this.text; // 搜尋框的值(您要標紅的關鍵字) var str = title; // 列表標題(原文字) // 去除中間空格且字元之間用逗號隔開 let inputvalue = s.replace(/\ +/g, ","); // 把空格分開的字串轉換成以逗號分割 let keyWordArr2 = inputvalue.split(","); // 把字串分割轉換成陣列(方便擷取) // 判斷文字段落(原文字)是否為空 if (str && str != "") {// 遍歷分割後的字串 keyWordArr2.forEach((e) => { let regStr = "" + `(${e})`; let reg = new RegExp(regStr, "g"); // 如果匹配成功則丟擲關鍵字DOM // TIPS: 這塊您可以自定義標籤可根據您的需求自定義樣式 str = str.replace( reg, '<span style="color:#fff;font-weight: bold;background-color: red;">' + e+ "</span>" ); // 改變搜尋關鍵字顏色為紅色 }); } return str; }, keySign(title) { let s = this.value; // 搜尋框的值(您要標紅的關鍵字) var str = title; // 列表標題(原文字) // 去除中間空格且字元之間用逗號隔開 let inputvalue = s.replace(/\ +/g, ","); // 把空格分開的字串轉換成以逗號分割 let keyWordArr2 = inputvalue.split(","); //把字串分割轉換成陣列(方便擷取) // 判斷文字段落(原文字)是否為空 if (str && str != "") { // 遍歷分割後的字串 keyWordArr2.forEach((e) => { let regStr = "" + `(${e})`; let reg = new RegExp(regStr, "g"); // 如果匹配成功則丟擲關鍵字DOM // TIPS: 這塊您可以自定義標籤可根據您的需求自定義樣式 str = str.replace( reg, '<span style="color:#fff;font-weight: bold;background-color: red;">' + e + "</span>" ); // 改變搜尋關鍵字顏色為紅色 }); } return str; },