JavaScript 字符串扩展与修复实现详解
本文详细解析JavaScript中字符串的扩展与修复技术,涵盖repeat方法的两种实现、字节长度计算、驼峰与下划线风格互转、HTML标签及脚本过滤、实体字符转换以及trim函数的兼容性问题处理,提供实用的代码示例与原理说明。
字符串重复方法 repeat 的实现
1. repeat方法:将一个字符串重复自身n次。例如:repeat("chaojidan", 2) 的结果为 chaojidanchaojidan。
实现方式一:
代码如下:
function repeat(str,n){
return Array.prototype.join.call({length:n+1},str);
//在类数组{length:n+1}上下文下执行join方法,并传入str。也就是用str来分隔类数组的选项,类数组是空,所以就有n个str分隔n+1个"",得到的结果就是n个str连接。
}
实现方式二:
代码如下:
function repeat(str,n){
var s = str ,total = "";
while(n>0){
//假设n是5,n%2后,等于1,因此total = str.s=strstr。n=2.第二次循环:s=strstrstrstr,n=1.第三次循环total = strstrstrstrstr,break,跳出循环,返回total,刚好是str重复了5次的字符串
if(n%2 ==1){
total + =s; //这里是2的0次方,也就是1,所有的正整数,都可以使用1,2,4,8....进行组合。比如:3=1+2,5=1+4,7=1+2+4.
}
if(n==1) break;
s+=s; //这里利用的是2的幂次方,2,4,8.....
n = n>>1;
}
return total ;
}
字符串长度、格式转换与标签处理
2. 计算字符串所有字节的长度:若 str.charCodeAt(i) > 255,则将 str 的长度加一即可。
3. 转换为驼峰风格:使用 str.replace(/[-_][^-_]/g, function(match){return match.charAt(1).toUpperCase();})。
//-_在[]中,不需要使用\,并且^在[]中是代表反的意思,就是遇到-a或_a,就被替换成A(match就是正则匹配的字符串_a,然后取a,并且大写)
4. 转换为下划线风格:str.replace(/([a-z\d])([A-Z])/g,'$1_$2').replace(/\-/g,'_').toLowerCase();
//第一个replace,匹配cA,或者4A的字符串,然后用c_A或4_A替换。$1代表第一个子表达式。第二个replace就是使用_替换-。由于-不在[]中,所以需要加\。
5. 去掉字符串中的html标签:str.replace(/<[^>]+>/g,''),这里面会把script标签去掉,但是不会去掉script中的js脚本。
6. 去掉script标签,并且移除里面的js脚本:str.replace(/<script[^>]*>(\S\s)*?)<\/script>/img,'')。
/需要用\,防止转义。
//(\S\s)*?)尽可能少的匹配,非贪婪匹配。举个例子:<script>aaa</script>dddd<script>bbbb</script>,会先匹配<script>aaa</script>,再匹配<script>bbbb</script>,如果没加?,将是贪婪匹配,将会把<script>aaa</script>dddd<script>bbbb</script>全部匹配掉,连字符串dddd都去掉了。
HTML转义、实体字符转换与trim处理
7. 将字符串经过html转义,得到适合在页面中显示的内容。
str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');
8. 将字符串的html实体字符换成对应字符:
跟7相反,只是多了一个replace(/&#([\d]+);/g,function($0,$1){ return String.fromCharCode(parseInt($1,10)) }) //$1就是第一个子表达式匹配项。
9. trim: str.replace(/^\s+ | \s+$/g,'') ,IE或早期的标准浏览器,把许多本属于空白的字符没有列为\s中,因此会有bug。不过,又何必执着兼容淘汰的浏览器呢。
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
