Web前端JavaScript笔记（2）字符串
字符串：
字符串的声明方式：
1. 通过new运算符声明字符串 // 声明的是对象
2. 省略new运算符
3. 字符串常量赋值
<script>
var str1 = new String(2323);
var str2 = String(3234);
var str3 = "4234";
alert(str1);
alert(str2);
alert(str3);
</script>中文编码：
utf-8: 三个字符长度表示一个汉字
gbk: 两个字符长度表示一个汉字
但是在计数的时候，一个汉字当作一个字符来计数
字符串方法：
.length() : 字符串长度
.charAt() : 访问字符串中的字符，也可以按照访问数组元素的方法进行访问。
字符串是只读的，就是一旦字符串被创建不能改变他的值。
<script>
var str1 = "hello脚本";
str1[4] = "X";
alert(str1); // 字符串不能被修改
</script>字符串方法：
1. 字符串格式相关的方法，这些方法必须配合document.write方法进行使用
big() : 用大号字体显示字符串
blink()：显示闪动字符串
bold()：使用粗体显示字符串
fixed()：以打字机文本显示字符串
strike()：使用删除线来显示字符串
fontcolor(): 使用指定颜色来显示字符串
link()：将字符串显示为链接
sub() / sup：把字符串显示为上\下标
<script>
document.write("hello".big() + "world");
</script>字符串查找方法：
1. indexOf(str, start) : 查找某一个字符串在目标字符串中第一次出现的位置，start表示开始查找的位置，缺省值为0
返回值：-1表示没有查找到
<script>
var str = "feichang";
var res = str.indexOf("cha", 0);
if(res === -1){
alert("Not Found");
}
else
{
alert("Find it" + res);
}
</script>2. lastIndexOf(str): 查找某一个字符串在目标字符串中最后一次出现的位置
<script>
var str = "feichang";
var res = str.lastIndexOf("cha");
if(res === -1){
alert("Not Found");
}
else
{
alert("Find it" + res);
}
</script>3. search(str)：与indexOf()的功能相似，查找某一个字符串在目标字符串中第一次出现的位置，但是不能指定开始查找的位置。但是他的参数既可以是字符串，又可以是正则表达式。返回值：-1表示没有查找到。
<script>
var str = "feichang";
var res = str.search("cha");
if(res === -1){
alert("Not Found");
}
else
{
alert("Find it" + res);
}
</script>字符串提取方法：
1. substring(start，end)：提取出源字符串中[start，end）区间的字符串，生成一个新的字符。
<script>
var str = "feichang";
var res = str.substring(2, 5);
alert(res);
</script>2. substr(start，length)：提取出源字符串中start开始，长度为length的字符串，生成一个新的字符串。
<script>
var str = "feichang";
var res = str.substr(2, 5);
alert(res);
</script>3. slice(start, end): 功能与substring()功能一致：
<script>
var str = "feichang";
var res = str.slice(2, 4);
alert(res);
</script>4. str.replace(oldStr, newStr)：利用新的字符串对旧字符串进行替换（只能替换第一个，若要替换所有的，需要将参数改为正则表达式（全局匹配））。结果会生成新的字符串，而原字符串不会发生改变。
<script>
var str = "how are you";
var res = str.replace("are", "old"); /*返回新的字符串*/
alert(res);
</script>5. split(sep, length)：字符串分割,sep表示分隔符，length控制返回数组的长度，一般会省略这个参数，返回值为分割后的数组。当sep为""的时候，是将字符串中的每一个字符分割为数组。
<script>
var str = "how are you";
var res = str.split(" "); /*返回新的字符串*/
alert(res);
</script>6. 大小写转换： toLowerCase, toUpperCase()
字符串验证码：
1. 纯数字验证码
2. 数字和字符组成的验证码
<script>
alert(numberCode(6));
alert(TestCode(6));
function numberCode(n) {
let num = [];
for (let i=0; i<n; i++)
{
let temp = Math.random()*10;
num.push(Math.round(temp));
}
return num.join("");
}
function TestCode(n)
{
var arr = [];
for (let i=0; i<n; i++)
{
let temp = Math.random();
if(temp>0.5)
{
// 生成数字
let random_num = Math.random() * 10;
arr.push(Math.round(random_num));
}
else{
// 生成字母
let start = 0;
let end = 0;
if(Math.random() > 0.5)
{
// 大写字母
start = "A".charCodeAt(0);
end = "Z".charCodeAt(0);
}
else
{
// 小写字母
start = "a".charCodeAt(0);
end = "z".charCodeAt(0);
}
let random_num = start + Math.floor((end-start)*Math.random()) + 1;
arr.push(String.fromCharCode(random_num));
}
}
return arr.join("");
}
</script>通过按钮获取验证码:
事件驱动函数：点击按钮之后，做出动作， onclick， innerHtml方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function numberCode(n) {
let num = [];
for (let i=0; i<n; i++)
{
let temp = Math.random()*10;
num.push(Math.round(temp));
}
return num.join("");
}
function TestCode(n)
{
var arr = [];
for (let i=0; i<n; i++)
{
let temp = Math.random();
if(temp>0.5)
{
// 生成数字
let random_num = Math.random() * 10;
arr.push(Math.round(random_num));
}
else{
// 生成字母
let start = 0;
let end = 0;
if(Math.random() > 0.5)
{
// 大写字母
start = "A".charCodeAt(0);
end = "Z".charCodeAt(0);
}
else
{
// 小写字母
start = "a".charCodeAt(0);
end = "z".charCodeAt(0);
}
let random_num = start + Math.floor((end-start)*Math.random()) + 1;
if(random_num < start){
random_num = start;
}
if(random_num > end){
random_num = end;
}
arr.push(String.fromCharCode(random_num));
}
}
return arr.join("");
}
function btnClick() {
//获取div标签, 获取节点
var test_code = TestCode(6); // 生成六位的随机验证码
document.getElementById("box").innerHTML = test_code;
}
</script>
</head>
<body>
<div id="box">000000</div>
<!--点击按钮-->
<button οnclick="btnClick()">获取验证码</button>
</body>
</html>效果如下所示：
敏感词过滤：
所有的表单元素需要获取里面的值，需要通过.value来获取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function filterContent(info) {
var bad_word = [/靠/ig, /tmd/ig, /nm/ig, /fuck/ig]; // 正则表达式
for (let i=0; i<bad_word.length; i++)
{
info = info.replace(bad_word[i], "***");
}
return info;
}
function btnClick() {
var text = document.getElementById("text");
var text_content = text.value;
var new_text_content = filterContent(text_content);
var msg = document.getElementById("msg");
msg.innerHTML = new_text_content;
}
</script>
<style>
#msg{
width: 200px;
height: 200px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<button οnclick="btnClick()">发布</button>
<div id="msg"></div>
</body>
</html>效果如下所示：
表单验证：
// 在输入框失去焦点的时候进行表单验证；οnblur="函数()"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function formValid() {
// 表单验证
let username = document.getElementById("username");
let username_span = document.getElementById("username-span");
let username_content = username.value;
// 邮箱格式
let index = username_content.indexOf("@");
if(index === -1)
{
username_span.innerHTML = "Invalid Email Address";
}
// 英文字母开头
let first_alpha = username_content.substr(0, 1);
if(!((first_alpha.charCodeAt(0)>"a".charCodeAt(0) && first_alpha.charCodeAt(0)<"z".charCodeAt(0))||(
first_alpha.charCodeAt(0)>"A".charCodeAt(0) && first_alpha.charCodeAt(0)<"Z".charCodeAt(0)
))){
username_span.innerHTML = "Invalid username, must start with alpha";
}
}
</script>
<style>
#form{
width: 300px;
height: 200px;
margin: 20px auto;
border: 1px solid black;
background: #66c5b4;
text-align: center;
}
#form #username{
margin: 40px 5px 10px 5px;
}
#username-span{
display: block;
font-size: 10px;
height: 16px;
line-height: 16px;
color: gray;
}
#passwd{
margin: 10px 0 0 0;
}
</style>
</head>
<body>
<div id="form">
<input id="username" type="text" placeholder="邮箱" οnblur="formValid()">
<span id="username-span">字母，数字，下划线，长度6~18</span>
<input id="passwd" type="password" placeholder="密码">
</div>
</body>
</html>效果如下所示：
