JS笔记
字符串声明
- 通过new运算符去声明字符串
var str1 = new String(100); alert(str1 + 20);//10020 alert(typeof str1);//object
- 省略new声明字符串
var str12= String(100); alert(str2 + 20);//10020 alert(typeof str2);//string
- 字符串常量赋值
var str3 = "hello"; alert(str3);//hello alert(typeof str3);//string
【注】字符串是只读,一旦被声明就不能被修改;在JS中,字符串既是基本类型,又是复合数据类型
属性
字符串.length
,访问字符串中字符的个数【注】中文:utf-8(三个字符表示一个汉字),gbk(两个字符表示一个汉字),在计数的时候都是当成一个汉字计数
var str = "hello北京";
alert(str.length);//7
字符串.charAt(下标);
,访问字符串中单个字符,下标从0开始
var str = "hello北京";
alert(str.charAt(4));//o,访问此元素也可以写成:alert(str[4]);
字符串遍历
var str = "hello北京";
for(var i = 0;i < str.length;i++){
document.write(str[i] + "<br/>);
}
字符串方法
一、了解。在document.write()
中使用,用特殊样式输出字符串
big() 用大号字体显示字符串
blink() 显示闪动字符串
bold() 使用粗体显示字符串
fixed() 以打印机文本显示字符串
strike() 使用删除线来显示字符串
fontcolor() 使用指定颜色来显示字符串
fontsize() 使用指定尺寸来显示字符串
link() 将字符串显示为链接
sub() 把字符串显示为下标
sup() 把字符串显示为上标
二、重点
- charCodeAt()
格式:字符串.charCodeAt(下标)
功能:访问字符串中对应下标字符的ASCII码值
var str = "hello";
alert(str.charCodeAt(1));//101
- String.fromCharCode()
格式:String.fromCharCode(码值1,码值2,…)
功能:将传入的ASCII码值转成对应的字符串
返回值:组成的字符串
var str = String.fromCharCode(97,98,99,100);
alert(str);//abcd
字符串查找
- indexOf()
格式:supStr.indexOf(subStr,start);
参数:subStr指查找的字符串;start从哪个下标开始查找,如果不传入,默认从0开始
功能:在supStr中查找subStr第一次出现的位置,从start这个位置开始查找
返回值:-1,说明没有查找到
var supStr = "abcabcabc";
var subStr = "abc";
var index = supStr.indexOf(subStr);
alert(index);//0
var supStr = "abcabcabc";
var subStr = "abc";
var index = supStr.indexOf(subStr,1);
alert(index);//3
- lastIndexOf()
格式:supStr.lastIndexOf(subStr);
参数:第二个参数是开始查找的位置,查找的下标从右往左数
功能:在subStr中查找subStr最后一次出现的位置
返回值:-1 没有查到
var supStr = "abcabcabc";
var subStr = "abc";
var index = supStr.lastindexOf(subStr);
alert(index);//6
- search()
格式:supStr.search(subStr);
参数:字符串/正则表达式(修饰符:i忽略大小写;g全局匹配)
功能:在supStr中查找subStr第一次出现的位置
返回值:-1,没有查找到
var supStr = "abcabcabc";
var subStr = "abc";
var index = supStr.search(subStr);
alert(index);//0
var supStr = "Abcabcabc";
var subStr = /abc/i;
var index = supStr.search(subStr);
alert(index);//0
字符串提取
- substring
格式:字符串.substring(start,end);
功能:将字符串中[start,end)这部分字符串提取出来,生成新的字符串
返回值:最新生成的字符串
var str = "hello";
var newStr = str.substring(1,4);
alert(newStr);//ell
alert(str);hello
- substr
格式:字符串.substr(start,length);
返回值:新生成的字符串
var str = "hello";
var newStr = str.substr(1,3);
alert(newStr);//ell
alert(str);//hello
- slice(数组)
格式:字符串.slice(start,end);
var str = "hello";
var newStr = str.slice(1,4);
alert(newStr);//ell
alert(str);//hello
- replace()
格式:supStr.replace(oldStr,newStr);
参数:第一个参数传入的字符串只能替换一次(解决:第一个参数改为正则)
功能:用newStr将oldStr替换掉,生成新的字符串
返回值:替换成的新字符串
var str = "how are you";
var newStr = str.replace("are","old are");
alert(newStr);//how old are you
alert(str);//how are you
var str = "how are are are you";
var newStr = str.replace(/are/g,"old are");//全局匹配
alert(newStr);//how old are old are old are you
alert(str);//how are are are you
- split()字符串分割
格式:字符串.split(分割符,length)
参数:第一个参数,用这个分割符对原字符串进行分割;第二个参数,控制返回的数组元素的个数,一般不用
功能:用分割符对原有字符串分割
返回值:数组
【注】相邻的两个分割符,会产生空字符串;分割符是空字符串"",直接将每一个字符,单独分割成子串,放在数组中返回
var str = "how are you";
var arr = str.split(" ");
alert(arr);//how,are,you
//var arr = str.split(" ",2);
//alert(arr);//how,are
alert(str);//how are you
var str = "how are you";
var arr = str.split("");
alert(arr);//h,o,w, ,a,r,e, ,y,o,u
- toLowerCase() 转成全小写
- toUpperCase() 转成全大写
var arr = "helloWORLD";
alert(toLowerCase(arr));//helloworld
alert(toUppercase(arr));//HELLOWORLD
- concat() 字符串拼接
var str = "hello";
var newStr = str.concat("world",100);
//var newStr = str + "world" + 100;
alert(newStr);//helloworld100
验证码
//n位纯数字验证码,每一个数组范围0-9,parseInt(Math.random()*10);
function numTestCode(n){
var arr = [];//存储生成的数字
for(var i = 0;i < n;i++){
var num = parseInt(Math.random()*10);
arr.push(num);
}
return arr.join("");
}
alert(numTestCode(6));
//n位数组+字母组成的验证码,0-9,a-z(97-122),A-Z(65-90)
function testCode(n){
var arr = [];
for(var i = 0;i < n;i++){
var num = parseInt(Math.random()*123);
if(num >= 0 && num <= 9){
arr.push(num);
}else if(num >= 97 && num <= 122 || num >= 65 && num <=90){
arr.push(String.fromCharCode(num));
}else{
i--;
}
}
return arr.join("");
}
alert(testCode(6));
获取验证码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="testcode.js"></script>
<script>
//事情驱动函数
function btnClick() {
var oDiv = document.getElementById("div1");
oDiv.innerHTML = testCode(6);
}
</script>
</head>
<body>
<div id="div1">000000</div>
<button onclick="btnClick();">获取验证码</button>
</body>
</html>
敏感词过滤
//表单元素获取其内容,通过.value的属性;双标签节点,通过innerHTML获取标签间内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#msg{width:400px;height:400px;border:1px solid black}
</style>
<script>
//敏感词都过滤(正则);将敏感词替换成*(replace)
var arr = [/nm/ig,/cao/ig];
function btnClick(){
var oTxt = document.getElementById("txt");
var oMsg = document.getElementById("msg");
var oValue = oTxt.value;
for(var i = 0;i < arr.length;i++){
oValue = oValue.replace(arr[i],"*");//替换掉原来的
}
oMsg.innerHTML = oValue;//将提交的内容赋值给div的innerHTML
oTxt.value = '';//清除
}
</script>
</head>
<body>
<textarea name="" id="txt" cols="30" rows="30"></textarea>
<button onclick='btnClick();'>Submit</button>
<div id='msg'></div>
</body>
</html>
表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单验证</title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: lightblue;
border: 1px solid black;
text-align: center;
padding: 50px;
margin: 100px auto;
}
#div1 input {
width: 200px;
height: 30px;
font-size: 18px;
margin-top: 10px;
}
#div1 span {
font-size: 14px;
color: red;
}
</style>
<script>
function func(){
var oUsername = document.getElementById("username");
var oUsernameSpan = document.getElementById("username_span");
//1.拿到输入框的内容
var oValue = oUsername.value;
//2.判断
if(oValue.length < 6 || oValue.length > 18){//用户名长度是否符合要求
oUsernameSpan.innerHTML = "!长度应为6-18字符";
}else if(!isABC(oValue[0])){//首字符是否是字母
oUsernameSpan.innerHTML = "!必须以英文字母开头";
}else{//是否由数字、字母、下划线组成
var isYes = true;//假设符合要求
for(var i = 0;i < oValue.length;i++){
if(!isDEF(oValue[i])){
isYes = false;
break;
}
}
if(isYes){
oUsernameSpan.innerHTML = "√恭喜,可以注册";
}else{
oUsernameSpan.innerHTML = "!必须由字母、数字、下划线组成";
}
}
}
//判断单个字符是否是字母
function isABC(charStr) {
if ((charStr >= "a" && charStr <= "z") || (charStr >= "A" && charStr <= "Z")) {
return true;
} else {
return false;
}
}
//判断单个字符是否有数字字母下划线符号
function isDEF(charStr) {
if (
(charStr >= "a" && charStr <= "z") ||
(charStr >= "A" && charStr <= "Z") ||
(charStr >= "0" && charStr <= "9") ||
charStr == "_"
) {
return true;
} else {
return false;
}
}
</script>
</head>
<body>
<div id="div1">
<input id="username" type="text" placeholder="请输入用户名" onblur="func();"/>
<span id="username_span">6~18个字符,可使用字母、数字、下划线,需以字母开头</span>
<input type="text" placeholder="请输入密码" />
</div>
</body>
</html>
字符串练习
/*
将字符串str = “When I was young, I love a girl in neighbor class.”中,
从young提取到girl生成新字符串。但是不许数
*/
var str = "When I was young, I love a girl in neighbor class.";
var start = str.indexOf("young");
var end = str.indexOf("girl") + "girl".length;
var newStr = str.substring(start, end);
alert(newStr); //young, I love a girl
/*
将字符中单词用空格隔开
已知传入的字符串中只有字母,每个单词的首字母大写,请将每个单词用空格隔开,只保留一个单词的首字母大写
传入:”HelloMyWorld”
返回:”Hello my world”
【思路】1.字符串转成数组 split("") 2.数组转成字符串 join("")
*/
function wordOfStr(str) {
var arr = str.split("");
for (var i = 1; i < arr.length; i++) {
//判断
if (arr[i] >= "A" && arr[i] <= "Z") {
//1.将大写字符转成小写 2.插入一个空格
arr[i] = arr[i].toLowerCase();
arr.splice(i, 0, " ");
}
}
//alert(arr);//H,e,l,l,o, ,m,y, ,w,o,r,l,d
return arr.join("");
}
var str = wordOfStr("HelloMyWorld");
alert(str); //Hello my world
/*
将字符串按照单词进行逆序,空格作为划分单词的唯一条件
传入:”Welome to Beijing”改为 “Beijing to Welcome”
*/
function reverseStr(str) {
var arr = str.split(" ");
arr.reverse();
return arr.join(" ");
}
alert(reverseStr("Welome to Beijing")); //Beijing to Welome
/* 对称数组
传入一个数组,元素类型与个数皆未知,返回新数组,由原数组的元素正序反序拼接而成。
传入 [“One”, “Two”,”Three”]
返回 [“One”, “Two”, “Three”,”Three”,”Two”, “One”]
*/
function symmetryArr(arr) {
var newArr = arr.concat();
for (var i = arr.length - 1; i >= 0; i--) {
newArr.push(arr[i]);
}
return newArr;
}
alert(symmetryArr(["one", "two", "three"])); //one,two,three,three,two,one
/*
已知一个字符串对象中,英语单词用各种非字母字符分割,统计单词个数
传入:”Yes, she*is%my@love.”;
返回 5
【规律】当前面一个字符是字母,后面一个字符是非字母的时候,这就是一个单词
*/
function countOfWord(str) {
var count = 0;
for (var i = 0; i < str.length - 1; i++) {
if (isABC(str[i]) && !isABC(str[i + 1])) {
count++;
}
}
return count;
}
//判断单个字符是否是字母
function isABC(charStr) {
if ((charStr >= "a" && charStr <= "z") || (charStr >= "A" && charStr <= "Z")) {
return true;
} else {
return false;
}
}
alert(countOfWord("Yes, she*is%my@love.")); //5
/*
实现函数,查找子串出现的次数,返回字符串str中出现substring的次数
传入:”abcabcabc”, “abc”
返回:3
*/
function countOfStr(supStr, subStr) {
var arr = supStr.split(subStr);
return arr.length - 1;
}
alert(countOfStr("abcabcabc", "abc")); //3
/*
已知邮箱的用户名只能由数字字母下划线组成,域名为@1000phone.com,
判断一个字符串是否是该邮箱,是返回true,不是返回false。
mail@1000phone.com 是
$mail@1000phone.com 不是
mail@1000phone.comp 不是
*/
function isEmail(email) {
//1.查找@符号的位置
var index = email.indexOf("@");
if (index == -1) {
return false;
} else {
var endStr = email.substring(index);
if (endStr != "@1000phone.com") {
return false;
} else {
//判断用户名是否符号数字字母下划线
var username = email.substring(0, index);
var isYes = true; //假设都符合
for (var i = 0; i < username.length; i++) {
if (!isDEF(username[i])) {
isYes = false;
break;
}
}
return isYes;
}
}
}
//判断单个字符是否有数字字母下划线符号
function isDEF(charStr) {
if (
(charStr >= "a" && charStr <= "z") ||
(charStr >= "A" && charStr <= "Z") ||
(charStr >= "0" && charStr <= "9") ||
charStr == "_"
) {
return true;
} else {
return false;
}
}
alert(isEmail("mail@1000phone.com")); //true
alert(isEmail("$mail@1000phone.com")); //false
alert(isEmail("mail@1000phone.comp")); //false