本文内容
1、控制太输出带有颜色的信息
2、字符串去除前、后空格
3、文本框只能输入数字
4、密码强度实时验证
5、字符串敏感词过滤
6、图片放大镜效果
一、控制太输出带有颜色的信息
/*输出带有颜色的log*/
log(des: 描述信息, value: 需要高亮显示的值){
console.log("%c%s",
"color: red; background: yellow; font-size: 24px;",
value,'(',des,')');
}
click(){
this.log('输出的信息为：','高亮值！');
}
二、字符串去除前、后空格
const str = ' bcdefg ';
const str1 = str.replace(/(^\s*)|(\s*$)/g, '');
this.log('去除字符串前后的空格',str1);
const str2 = str.replace(/(^\s*)/g,"");
this.log('去除字符串前面的空格',str2);
const str3 = str.replace(/(\s*$)/g,"");
this.log('去除字符串后面的空格',str3);
二
三、文本框只能输入数字
{
this.setState({
textInputNumber: text.replace(/\D/g, ''),
})
}}
/>
四、密码强度实时验证
字母、数字、特殊符号都有固定的权重，遍历密码字符串，得到总得权重的值，根据权重的范围判断密码的强弱
/*计算字符权重*/
charStrength(char){
//字符的 ASCII 码
if (char >= 48 && char <= 57){ // 数字
return 1;
}
if (char >= 97 && char <= 122){ // 小写字母
return 2;
}
return 3; // 其他字符
}
/*密码强度检查*/
passwordStrength(text){
/*
* 字符权重
* 数字 1、字母 2、其他字符 3 (更具体的可以分为大写、小写字母的权重，此处将字符串转成小写，判断权重)
* 当密码长度小于6时，不符合标准
* 长度>=6，强度<10，强度：弱
* 长度>6，强度>=10 且 强度<15，强度：中
* 长度>6，强度>=15，强度：强
* */
const strength = ['密码太短', '弱', '中', '强'];
const color = ['red', 'puple', 'orange', 'green'];
if (text.length < 6){
this.setState({
psdStrength: strength[0],
psdStrengthColor: color[0],
})
}else {
let strStrength = 0;
for (let i = 0; i < text.length; i++){
strStrength += this.charStrength(text.toLocaleLowerCase().charCodeAt(i)); // 遍历字符串，转成小写,转成ASCII
}
this.log('强度',strStrength);
if (strStrength < 10){
this.setState({
psdStrength: strength[1],
psdStrengthColor: color[1],
})
}else if(strStrength >= 10 && strStrength < 15){
this.setState({
psdStrength: strength[2],
psdStrengthColor: color[3],
})
}else {
this.setState({
psdStrength: strength[3],
psdStrengthColor: color[3],
})
}
}
}
{
this.passwordStrength(text);
this.setState({
textInputPsd: text,
})
}}
/>
{this.state.psdStrength}
1C340D38-CBDF-443A-A934-A15A5AAEE091.png
五、字符串敏感词过滤
根据敏感词的数组，循环，进行字符串的替换，将敏感词汇替换成***
const keyWords = ['外挂', '性感', '色情', '爆炸', '死'];
let string = '大家好，我很喜欢玩游戏，但是碰到很多人使用外挂，就不喜欢玩了，我还喜欢美女，特别是性感的美女，昨天上午发生爆炸了，好多人都死了，好恐怖';
for (let i = 0; i < keyWords.length; i++) {
string = string.replace(keyWords[i],'***');
}
this.log('过滤后的字符串',string);
4208C5A5-5C53-41FD-B2BC-89CCA822C975.png
六、图片放大镜效果
淘宝网为了让买家更加了解产品的细节，当买家将鼠标指针移动到产品图片上时，会有一个局部放大的效果。
本质是：一张小图一张等比例的大图，当鼠标在小图上移动时，计算出对应的大图应该显示的位置及宽、高
放大镜的大小为100 x 100
小图的大小为400 x 400
大图的大小为2000 x 2000，
大图的容器大小为1000 x 1000
例如：
放大镜的位置在 {0，0，100，100}
这大图显示的位置{0、0、500、500}
放大镜的位置在 {50，80，100，100}
这大图显示的位置{250、4000、500、500}
小图等比例放大5倍后的位置，就是大图要显示的位置