JavaScript字符串连接方式及正则替换高亮不改变原文本大小写

包括:连接符(+)、反引号(`)、join()、concat()。教程地址

/**

*ES6中新增的字符串方法,可以配合反单引号完成拼接字符串的功能

*反单引号怎么打出来:将输入法调整为英文输入法,单击键盘上数字键1左边的按键。 

*用法:

*1: 定义需要拼接进去的字符串变量

*2: 将字符串变量用${}包起来,再写到需要拼接的地方

*注意:反单引号:` ;单引号:' 。不要用错了哟~

*/

例子:JS使用正则实现不区分字母大小写的高亮效果(不改变原文本的大小写)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体高亮显示</title>
    <style>
        .red_t{
            color: #f00;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        let dom = document.querySelector('#container');
        let str = '小写ab混合大小写aB大写AB';
        let strKeyWord = 'Ab'; //需要匹配的关键词
        //i代表忽略大小写,g代表全局匹配,不加g可以理解为str.replace('Ab'),加g为replaceAll('Ab'),此处'Ab'不区分大小写(正则不能放在replaceAll中)
        var oRegExp = new RegExp('('+strKeyWord+')',"ig");
        //$1代表正则中第一个小括号"()"本次的匹配结果,$2为第二个,以此类推;
        str = str.replace(oRegExp,`<font>$1</font>`);
        dom.innerHTML = str;
        console.log(str);
    </script>
</body>
</html>