说来惭愧 菜鸡一枚 在此记录一下心得
<div id="box">qqqqqqqq啊啊WWWWWWWWWWWQQ啊<p>啊Q</p> QQwwwwQQQasdadqq</div>
var str = document.querySelector("#box").innerHTML;
var heights = str => `<span style="color:red;">${str}</span>`;
function fun(text,val){
var a = new RegExp(val,'gi');
return text.replace(a,function(num){
return heights(num)
})
}
document.querySelector("#box").innerHTML = fun(str,'q')
今天重点看了一下replace函数，往日只知是个字符串替换的方法，没深入研究，导致最近俩日冥思苦想，
参数1：字符串或正则
参数2 ：要替换的 字符串 或函数
函数里有三个参数，不明白的童鞋可以console.log在控制台查看
通过arguments来访问，我看完后顿时恍然大悟
这个需求是一个朋友问的我，有点挂不住老脸，居然没解决，
匹配字符串无论大小写高亮显示
当时写的 toLocaleLowerCase 转换大小写， 但是这样无疑会更改页面原油的大写字母，不算实现需求，后经妹子委托她‘男友’ 我同学，写出另一种方法，问题得以解决，哈哈
function bind(input, text) {
/**
@param {Object} 绑定的input框
@param {text} 绑定的字段
*/
let oldHtml = text.html()
input.bind('input propertychange', function(a){
let inpVal = a.target.value;
let texts = oldHtml;
if (inpVal) {
let allVal = oldHtml.match(new RegExp(inpVal, 'ig'));
if (allVal) {
for (var j = 0; j < allVal.length; j ++) {
texts = texts.replace(allVal[j], '[*' + j + '*]');
// console.log(allVal[j],'[*' + j + '*]',texts)
}
for (var i = 0; i < allVal.length; i ++) {
texts = texts.replace('[*' + i + '*]', '<span class="highlight">' + allVal[i] + '</span>');
}
}
}
text.html(texts);
});
}
bind($('#input'), $('#div'))
这家伙是真滴6，我都没想到这种方法，惭愧惭愧，当时我想的是先把匹配的到的保存在变量，然后逐一赋值给texts，双层for循环太对了，
还有一种不知可行不可行，实现到一半，看到这种想到最上面的方法，果断弃之。（使用indexOf查找下标，whie循环全字段保存下标，然后循环数组下标值，使用splice前后加标签，包裹，不过，splice会改变原有数组，废了半天劲 无用功，这特么的就是我想到方法！！）
老子想静静。
以上两种方法都不失为好的解决办法，多写多想，加油加油！努力
