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; },