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 转换大小写， 但是这样无疑会更改页面原有的大写字母，不算实现需求; houlai ,写出另一种方法，问题得以解决

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'))

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