JS不区分大小写匹配字符串高亮模拟浏览器Ctrl+F

说来惭愧 菜鸡一枚 在此记录一下心得

<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会改变原有数组，废了半天劲 无用功，这特么的就是我想到方法！！）

老子想静静。

以上两种方法都不失为好的解决办法，多写多想，加油加油！努力