技术文章 | jishuwenzhang

北京html5培训之JavaScript学习笔记(D6)

第6天北京html5培训之课堂笔记
(本课程共8天)

 

一、北京html5培训之字符串方法

1.1 substr()

substr(start,howmany)用于将字符串截取,start表示开始截取的索引值,howmany表示要截取的字符串的个数。返回值是截取的新的字符串。
1 var str = "今天天气非常好,适合出去玩!!!!  ";
2 var str1 = str.substr(2,5);
3 console.log(str1);
 
1 // substr()可以使用负数
2 var str1 = str.substr(-4,3);
3 console.log(str1);

5 // substr()还可以省略howmany,表示截取最后一项。
6 var str2 = str.substr(-4);
7 console.log(str2);
 

1.2 substring()

substring(start,end)也是用于字符串的截取。从start位置截取到结束end。(包括start值不包括end值)。返回值是截取的新字符串。
1 var str = "今天天气非常好,适合出去玩!!! ";
2 var str1 = str.substring(2,7);
3 console.log(str1);


6 // substring()可以不区分大小,会自行进行比较,包括小的不包括大的
7 var str2 = str.substring(7,2);
8 console.log(str2);

10 // substring()不能使用负数
11 var str3 = str.substring(-5,-3);
12 console.log(str3);
 

1.3 split()

split()。将字符串转换为字符串数组。
参数:用于切割字符串的字符。
 

1 var str = "abjfjkfkaf";
2 var arr = str.split("f");
3 console.log(arr);
 
1 var str = "this is par";
2 var arr = str.split(" ");
3 console.log(arr);
 

1.4 toUpperCase()和toLowerCase()

toUpperCase():将所有字符串中的小写字母都转换为大写字母
toLowerCase():将所有字符串中的大写字母都转换为小写字母

1 var str = "ajkgjga";
2 var str1 = str.toUpperCase();
3 console.log(str1);

5 var str2 = str1.toLowerCase();
6 console.log(str2);
 
 
练习:
将“everything is good in its season”,转为每个单词的首字母大写。
即“Everything Is Good In Its Season”
 

1 // 将“everything is good in its season”,转为每个单词的首字母大写。

3 var str = "everything is good in its season";
4 // 第一步得到每一个单词
5 var arr = str.split(" ");

7 // 第二步遍历数组每一项
8 for(var i = 0 ; i <= arr.length - 1; i ++){
9 // 将everything转为Everyting
10 arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1);
11 }
12 
13 
14 // 第三步将数组转为字符串
15 var str2 = arr.join(" ");
16 console.log(str2);
 

二、北京html5培训正则表达式

2.1 概述

正则表达式(regular expression),简称RegExp。是被用来匹配字符串中的字符组合的模式。常用来做表单验证。
创建正则表达式最简单的方法,就是使用正则字面量。字面量:/表达式/;
 
比如:匹配本地号码:类似于000 - 1234567。

1 // 比如:匹配本地号码:类似于000-1234567。

3 var str = prompt("请属于一个本地号码");
4 var reg = /^\d{3}-\d{7,8}$/;

6 console.log(reg.test(str));
 

2.2 方法

正则使用的方法
配合正则表达式使用的方法有字符串方法和正则表达式的方法。
split() 根据匹配字符串切割父字符串
match() 使用正则表达式与字符串相比较,返回一个包含匹配结果的数组。
search() 对正则表达式或指定字符串进行搜索,返回第一个出现的匹配项的下标。
replace() 用正则表达式和字符串直接比较,然后用新的子串来替换被匹配的子串。
exec() 在字符串中寻找匹配字符串。
test() 测试当前正则是否能匹配目标字符串。
 

2.2.1 split()

split()方法用于匹配的字符串或者正则进行父字符串的切割,返回切割后的数组。
1 var str = "ajkagbjkajagbkjakjabgk";
2 // 用匹配的字符串进行切割
3 // var arr = str.split("agb");
4 // console.log(arr);
5 var reg1 = /agb/;
6 console.log(str.split(reg1));

8 // 用匹配的正则进行切割
9 var str1 = "jkajkaaajgbkjaaaaaaaaaaakjaag";
10 var reg = /a+/;
11 console.log(str1.split(reg));
 

2.2.2 match()

用于匹配到的正则或者字符串,返回包含匹配的字符串的数组。
match匹配时,不书写g只会输出匹配到的第一个字符串。
 

1 var str = "ajkagbjkajagbkjakjabgk";
2 console.log(str.match("agb"));

 
match还可以进行全局匹配;返回所有匹配到的字符串组成的数组。
 

1 var str = "a  afjjga       abvvvva       absjkf";
2 // var reg = /a\s+a/;
3 var arr = str.match(/a\s+a/g);
4 console.log(arr);
 

2.2.3 search()

用于匹配到的字符串或者正则的查找,返回在字符串中的位置。没有返回-1.
1 var str = "abbbbbafjjgababvvvvababsjkf";
2 // 字符串的查找
3 console.log(str.search("aba"));     //返回首次出现的位置
4 console.log(str.search("abca"));    //没有返回-1
 
search没有全局查找。

1 console.log(str.search(/ab+a/));
 

2.2.4 replace()

replace():用于匹配到的字符串或者正则的替换。
第一个参数:匹配到的字符串。
第二个参数:要替换的新字符串。

1 var str = "www.baidu.com";
2 // 字符串的匹配
3 // var str1 = str.replace("baidu","icketang");
4 // console.log(str1);


7 var str1 = str.replace(/baidu/,"icketang");
8 console.log(str1);
 
 
replace()可以使用全局替换。

1 var str2 = "ab   gnkkl                vklv    kv";
2 // 将字符串中的所有空格去掉
3 var str3 = str2.replace(/\s+/g,"");
4 console.log(str3);
 

2.3 正则的方法

2.3.1 exec()

exec():用于字符串的匹配,返回值是第一次匹配字符串组成的数组。没有全局匹配。
 

1 var str = "abbcjjjabbbbbbbcjjj";
2 var reg = /ab+c/;
3 var arr = reg.exec(str);
4 console.log(arr);
 

2.3.2 test()

用于检测字符串中是否有符合正则表达式的部分。返回值是true或者false。
1 // 本地号码
2 var str = prompt("请输入本地号码");
3 var reg = /^\d{3}-\d{7}$/;
4 console.log(reg.test(str));
 
 

1 var str = "gabbbbbbcg";
2 var reg = /ab+c/;
3 console.log(reg.test(str));
 

三、北京html5培训之正则表达式的术语和操作符

正则表达式:由一些普通字符和一些特殊字符(又叫元字符--metacharacters)组成。普通字符包括大小写的字母和数字,而元字符则具有特殊的含义。
javascript中常用特殊字符有  ( ) [ ] { } \ ^ $ | ? * + .
若想匹配这类字符必须用转义符号 \ 如:\(,\^,\\
 

3.1 精确匹配

我们要匹配的正则表达式里,没有特殊符号或者操作符。我们要想匹配这些常量、普通字符,我们只能去进行精确匹配,字符串里出现的字符必须在正则里直接书写。
例如字符串“abcdefg”,检测内部有没有abc。
正则表达式必须写成:/abc/,它表示匹配的是包含了 a,b,c这三个术语,而且排列顺序必须也是abc,字符之间没有其他多余的内容。
 

1 var str = "abcdegf";
2 // console.log(/abc/.test(str));
3 console.log(/dej/.test(str));
 

3.2 特殊预定义字符

\t /\t/ 制表符  
\n /\n/ 回车符
\f /\f/ 换页符
\b /\b/ 空格
 

1 // 制表符\t
2 var str = "ab c";
3 var str1 = "ab  c";
4 // 检测str中是否含有制表符
5 console.log(/\t/.test(str));
6 console.log(/\t/.test(str1));
 
7 // 回车
8 var str3 = "ab
9 c";
1 console.log(/\n/.test(str3));
 
 
回车需要使用飘符号。``

1 var str4 = `ab
2 c`;
3 console.log(/\n/.test(str4));
 
1 // 空格\b
2 var str5 = "ab           c";
3 console.log(/\b/.test(str5));
 

3.3 字符集

之前的匹配都是一个字符对应一个匹配,假如想让多个字符匹配一个字符。这时需要使用字符集。
[]。把所有匹配的可能性都书写在中括号内,用于匹配一个字符。
简单类:直接书写所有的可能性。
 

1 var str = "aahfkabhvmbvach";
2 // aah,abh,ach

4 // 讲匹配到是字符串输出
5 // var reg = /a[abc]h/;
6 var arr = str.match(/a[abc]h/g);
7 console.log(arr);
/a[abc]h/    表示能够匹配aah或者abh或者ach。
 
 
范围类:表示一类可能性。[a-z],[0-9],[A-Z]

1 var str1 = "aahfkabhvmbvachva9hmbvajh";
2 console.log(str1.match(/a[a-z]h/g));
3 console.log(str1.match(/a[0-9]h/g));
 
 
组合类:表示不同类型的范围组合。
[0-9a-z],[a-zA-Z];
 

1 var str2 = "aahfka3hvmbvachva9hmbvajh";
2 console.log(str2.match(/a[a-z0-9]h/g));
 
 
负向类:表示不包含后面书写匹配字符串的可能性。
语法:在中括号内书写^。
 

1 var str3 = "aahfka3hvmbvachva9hmbvajh";
2 console.log(str3.match(/a[^abc]h/g));
3 console.log(str3.match(/a[^0-9]h/g));
 

3.4 修饰符

g:表示全局匹配。表示在匹配到一个满足条件的字符串并没有停止而是将所有的匹配进行查找。
语法://g。
 

1 var str = "aahfkabhvmbvach";
2 console.log(str.match(/a[abc]h/g));
 
i:表示不区分大小写(对大小写不敏感)。a和A的匹配结果相同。
语法://i。
修饰符可以书写多个。

1 var str = "aahfkaAhvmbvachbvaCh";
2 console.log(str.match(/a[abc]h/g));
3 console.log(str.match(/a[abc]h/ig));
 

3.5 边界

^:开头 语法:/^ab/
表示以^之后的字符串做为开头的匹配。

1 var str = "abcjkgjkgj";
2 // 开头匹配
3 console.log(str.match(/^abc/g));
4 var str1 = "bcjkjfkjf";
5 console.log(str1.match(/^abc/g));
 
 
$:结尾匹配。表示以$之前的字符串做为结尾的匹配。
 

1 // 结尾匹配$
2 var str2 = "abcjkgjkgj";
3 console.log(str2.match(/gj$/g));
4 console.log(str2.match(/grj$/g));
 
1 // 0123-12345678
2 var str3 = prompt("请输入本地号码");
3 var reg = /^[0-9]{4}\-\d{8}$/;
4 if(reg.test(str3)){
5 alert("是本地号码");
6 }else{
7 alert("不是本地号码");
8 }
 
\b:单词边界,用于查找位于单词的开头或结尾的匹配。

1 var str4 = "hello icketang";
2 console.log(str4.match(/\b[a-z]+\b/g));
3 console.log(str4.match(/\b[a-z]+/g));
4 console.log(str4.match(/\b[a-z]+\s+/g));
5 console.log(str4.match(/\s+\b[a-z]+/g));
 
\B:非单词边界,用于查找不处在单词的开头或结尾的匹配。

1 console.log(str4.match(/\B[a-z]+\B/g));
2 console.log(str4.match(/\B[a-z]+/g));
 
 

3.6 量词

用于处理一排紧密相连的同类的字符。
语法:{}
 
{n}:硬性量词。表示出现n次。

1 var str = "abbbc";
2 console.log(str.match(/b{3}/));
 
{n,m}软性量词。至少出现n次,最多不能超过m次。

1 console.log(str.match(/b{3,9}/));
 
{n,}软性量词。至少出现n次。

1 console.log(str.match(/b{3,}/));
 
+ 表示出现1次或者多次{1,}

1 console.log(str.match(/b+/));
 
? 表示出现1次或者0次

1 console.log(str.match(/ab?c/));
 
 
 
* 出现0次或者多次。

1 console.log(str.match(/ab*c/g));
 

3.7 分组

表示重复出现多个连续字符。
语法:()

1 // 分组匹配
2 var str1 = "abyebyebyedc";
3 console.log(str1.match(/(bye){3}/));
4 console.log(str1.match(/(bye)+/));
 

3.8 或操作

语法:| 表示或者。
 
表示:能够匹配到ab或者ac。

1 var str = "abjkfjacjgkgjad";
2 console.log(str.match(/(ab)|(ac)/g));
3 console.log(str.match(/a(b|c)/g));
 
 

3.9 预定义类

js提前给我们定义好的,一些特殊字符。表示一类字符,是一些特殊字符集的简写。
. [^\n\r] 表示除了换行和回车之外的任意字符。
\d [0-9] 表示数字字符。
\D [^0-9] 表示非数字字符。
\s [ \t\n\x0B\f\r]      表示空白字符。
\S [^ \t\n\x0B\f\r]  表示非空白字符
\w [a-zA-Z_0-9]  表示单词字符(所有的字母/数字/下划线)。
\W [^a-zA-Z_0-9]  表示非单词字符
 

1 // \d表示数字
2 str2 = "1299dkjds090";
3 str3 = "¥ dkjds---";
4 console.log(/^\d+$/.test(str2));
5 console.log(/^\D+$/.test(str3));
 
 

1 // \w表示单词字符,字母数字,下划线
2 var str5 = "this is 0_0";
3 console.log(str5.match(/\w+/g));
 
 

3.10 分组的反向引用

分组的反向引用:表示正则表达式匹配的字符串再次进行使用。\编号(正则表达式中使用),$编号(在正则表达式外使用)。编码从1开始,依次进行分组的编码。1,2,3……
一个分组就是一个编码。
在正则使用。
 

1 // 在正则中使用
2 console.log(/(bye)\1/.test("bye"));
3 console.log(/(bye)\1/.test("byebye"));
4 console.log(/([a-z]{3})\1/.test("abcacb"));
5 console.log(/^([a-z]{3})\1{2}/.test("byebyebye"));
6 console.log(/^([a-z]{3})(\d{2})\1/.test("abc12acb"));
7 console.log(/^([a-z]{3})(\d{2})\1/.test("abc12abc"));
8 console.log(/^([a-z]{3})(\d{2})\1\2/.test("abc12abc12"));
 
 
 
 
在正则外使用$编号
 

1 var str = "123*456";
2 console.log(str.replace(/^(\d{3})\*(\d{3})$/,"$2*$1"));
 
 
replace()方法还可以使用match函数,参数是分组的反向应用。参数的和小括号的数量对应。编码可以不使用但是不能不书写。

1 console.log("123*456*789".replace(/^(\d{3})\*(\d{3})\*(\d{3})/,function(match,$1,$2,$3){
2 return $2 + "*" + $1;
3 }));
 

3.11 中文

匹配中文:[\u4e00-\u9fa5]
是一个固定用法,中文只能在正则表达式里这样表示。
 

1 console.log(/^[\u4e00-\u9fa5]+$/.test("爱创课堂"));
2 console.log(/^[\u4e00-\u9fa5]+$/.test("爱创a课堂"));
 

 爱创课堂是一家专门做前端培训的机构,由百度高级工程师,<javascript设计模式>作者张容铭老师亲自授课,全程20个项目实战。我们前端课程的五大优势:
1. 名师亲自授课,课程无缝隙对接企业
2. 免费学习一周
3. 签订就业协议,目前学员平均就业薪资12K
4. 采取小班教学模式(一个班20—30人)
5. :与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
 
扫描下方二维码或搜索微信公众号:icketang  
关注并回复:js  领取 js基础全套视频教程+课堂笔记+案例
更多前端学习资料,请添加微信:haomei0452

 
访问:http://www.icketang.com/?zh获取更多信息。