目录
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 '<';
case '>':
return '>';
case '&':
return '&';
case '"':
return '"';
}
})
}
console.log(htmlEscape(str)); // <strong><a href =& quot# & quot & gt123 & lt / a & gt & lt / strong & gt
如上字符串str被成功的替换。
- 为什么要进行如上替换?
这个场景常用在表单获取用户的数据上面,如果用户输入的是一个链接跳转,且跳转到一个不好的网站上,那么是一件很危险的事情。所以表单很多时候不能输入这些数据。
结尾:
学习id: 201903090124-21
现在是大三学生,学习到了前后端交互的express阶段,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处。