1. 程式人生 > 其它 >vue 搜尋框高亮

vue 搜尋框高亮

核心程式碼
  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; },