JavaScript replace之字符串的方法与indexOf的用法 详解

目录

replace方法

1. 作用1：替换字符串

2. 替换多个字符

3. 穿插indexOf的用法

3.1. 一个参数的作用

3.2.两个参数时的作用

3.3. 替换所有字符

3.4. 打印字符出现的索引

3. replace正则表达式与函数的结合 

---

replace方法

1. 作用1：替换字符串

str.replace

参数1是要替换的字符

参数2是要用谁替换这个字符

只能替换碰到的第一个

        var str = '121156';
        str1 = str.replace('1', 'a');
        console.log(str1); // a21156 只会替换第一个字符

        //有无办法，结合replace，替换多个字符？

2. 替换多个字符

        // 2. replace 与 indexOf 的结合
        var str2 = '焦迈奇帅帅帅帅帅';
        console.log(str2);
        while (str2.indexOf('帅') !== -1) {
            str2 = str2.replace('帅', '酷');
        }
        console.log(str2); // 焦迈奇酷酷酷酷酷

思路：

如果indexOf能够查找到一个字符串里面一个字符，就会返回对应的索引，并往后移动一个位置；查不到，返回值是-1

只要查找到的值不是-1，就会一直循环，里面的循环体就会一直替换

---

3. 穿插indexOf的用法

3.1. 一个参数的作用

查找到第一个值，就会停止查找。

参数：要查找的字符

返回：该字符在原字符的位置

        // 1. 一个参数
        var str = '好好学前端好不好';
        console.log(str.indexOf('好')); // 0

3.2.两个参数时的作用

参数1：要查找的字符

参数2：从索引为几的字符开始查找

返回：参数1在原字符当中的位置

         // 2. 两个参数
        var str1 = '好好学前端好不好';
        console.log(str1.indexOf('好', 2)); // 

3.3. 替换所有字符

        // 1. 不断的替换字符
        // 逻辑是只要能够在str1字符里面查找到帅这个字符，就不断进行替换
        var str1 = '焦迈奇帅帅帅';
        console.log(str1.indexOf('帅'));
        while (str1.indexOf('帅') !== -1) {
            str1 = str1.replace('帅', '可');
        }
        console.log(str1); // 焦迈奇可可可

3.4. 打印字符出现的索引

        // // 2. 打印出'帅'这个字出现了几次，并且在哪几个位置出现
        var str = '焦迈奇帅帅帅';
        var index = str.indexOf('帅');
        var num = 0;
        while (index !== -1) {
            num++;
            console.log('帅出现的索引是' + index);
            console.log('帅出现的第' + num + '次');
            index = str.indexOf('帅', index + 1);

        }
        // while (str.indexOf('帅') !== -1) {
            //num++;
            //console.log('帅出现的索引是' + index);
            //console.log('帅出现的第' + num + '次');
            //index = str.indexOf('帅', index + 1);
        // }

思考为什么注释的代码会出现死循环？我原来也犯了这个错误

因为，str.indexOf()你会发现，这个语句只能判断字符串里面有没有‘帅’这个字符，肯定有，那么就会一直while循环，就是死循环。

如果用index变量去判断，如果说查不到这个'帅'字，就会停止循环。

---

3. replace正则表达式与函数的结合 

需求：把html标签转化为字符

参数1：正则表达式

参数2：函数

执行思路：

• 如果第一个参数是正则表达式，且为全局匹配【g表示全局匹配】，
• 第二个参数就会被调用多次，
• 第一个参数查找到的值作为形参传递到函数里，并用返回值替换。

// 3. replace方法 
        // 参数1：正则表达式 
        // 参数2：函数
        // 3.1 作用：把html标签转义为字符
        // 3.2 执行思路: 如果第一个参数是正则表达式，且为全局匹配，第二个参数就会被调用多次，第一个参数查找到的值作为形参传递到函数里，并用返回值替换
        // 要替换的字符串
        var str = '<strong><a href="#">123</a></strong>';
        // 正则表达式
        var reg = /<|>|&|"/g;
        function htmlEscape(dataStr) {
            // 记得return 添加返回值，不然就会没有输入
            return dataStr.replace(reg, function (match) {
                switch (match) {
                    case '<':
                        return '&lt';
                    case '>':
                        return '&gt';
                    case '&':
                        return '&amp';
                    case '"':
                        return '&quot';
                }
            })
        }
        console.log(htmlEscape(str)); // &ltstrong&gt&lta href =& quot# & quot & gt123 & lt / a & gt & lt / strong & gt

如上字符串str被成功的替换。

• 为什么要进行如上替换？

        这个场景常用在表单获取用户的数据上面，如果用户输入的是一个链接跳转，且跳转到一个不好的网站上，那么是一件很危险的事情。所以表单很多时候不能输入这些数据。

结尾：

学习id： 201903090124-21

现在是大三学生，学习到了前后端交互的express阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。