- 在做一个前端需求时(我是后端)555。高亮显示输入框的值,后端返回数据这些都不说了,前端高亮网上基本都是做一个正则表达式,获取输入的值在返回的值里面替换对应的字段,再在字段前后加上字体颜色样式。
- 提供下高亮的函数:
searchKeyword(val,keyword){ if(keyword){ let str = this.escAddFun(keyword); let reg = new RegExp(str) val = val.replace(reg,function(text){ return '<font color="red">'+text+'</font>' }) } return val }
正则表达式中对字符是一些要求,比如[最为参数传入时,需要加\\两根斜线,是的是两根。所以对[来说入参时必须为\\[,所以这里的escAddFun函数就是专门给字符加\\的,你自己写也可以,这里也提供一个。
escAddFun(value){
// 先对拿到的字符进行分割(分割完之后是一个数组)
let valueSplit = value.split("")
// 创建一个自定义的数组用于存放特殊字符的坐标
let valueSplitIndex = []
// 遍历分割完的字符数组,把特殊字符的坐标存放在自定义的数组中
for (var i = 0; i < valueSplit.length; i++) {
if (valueSplit[i] == "\\") {
valueSplitIndex.push(i)
}
}
// 遍历坐标数组
for (let i = 0; i < valueSplitIndex.length; i++) {
// 这里把对应特殊字符的值替换成 \\+字符
valueSplit.[valueSplitIndex[i]] = "\\" + valueSplit.[valueSplitIndex[i]];
}
// 对字符数组进行拼接获得新字符串(此时就为给\加上转义符的字符串了)
let newValue = valueSplit.join("")
return newValue;
}
这样匹配高亮的函数就不会报错了