JavaScript 基础（五）

vienceTang
394 阅读7分钟

字符串

1. 字符串的属性

字符串的属性和数组一样，也有length属性。表示字符串的长度，每一个字母、汉字、数字、标点符号、空格都算是一个长度，直接使用打点方法 . 调用

注：字符串也有索引值index，从0开始

var str = '今天天气太闷了，感觉气温有35°C';
console.log(str.length);
// 17

2. 字符串的方法

  1. charAt()

    表示索引值对应的字符串，参数是索引值

    var str = '今天天气太闷了，感觉气温有35°C';
console.log(str.charAt(3));
// 气

    // 字符串的遍历
for (var i = 0; i < str.length; i++) {
  console.log(str.charAt(i));
}
// 今 天 气 太 闷 了 ， 感 觉 气 温 有 3 5 ° C

  2. indexOf()

    表示该字符串首次出现的位置。若不存在返回 -1

    var str = '今天天气太闷了，感觉气温有35°C';
console.log(str.indexOf('天'));
// 1

  3. concat()

    表示字符串的拼接，参数可以是一个或多个字符串，用逗号隔开，返回值是一个新得字符串，原字符串不变

    var str = '今天天气太闷了，感觉气温有35°C';
var strNew = str.concat('我需要空调', '他要吃冰棍');
console.log(str);
// 今天天气太闷了，感觉气温有35°C
console.log(strNew);
// 今天天气太闷了，感觉气温有35°C我需要空调他要吃冰棍

  4. slice(start, end)

    表示截取索引值从 start 到 end 之间的字符串，包括 start 不包括 end ，可以用正值，也可以用负值，还可以不写 end

    var str = '今天天气太闷了，感觉气温有35°C';
var str2 = str.slice(3, 9);
var str3 = str.slice(-9, -3);
var str4 = str.slice(3);
console.log(str2);
// 气太闷了，感
console.log(str3);
// 感觉气温有3
console.log(str4);
// 气太闷了，感觉气温有35°C

  5. split()

    表示用某个字符截取字符串得到一个新数组，参数：字符，返回值： 数组

    var str = 'aaabcccbddkbhhj';
var arr = str.split('b');
console.log(arr);
// [ 'aaa', 'ccc', 'ddk', 'hhj' ]

  6. substr(start, houmany)

    表示从某个索引值开始截取一段数目的字符串

    var str = '今天天气太闷了，感觉气温有35°C';
console.log(str.substr(2, 5));
// 天气太闷了
console.log(str.slice(2, 7));
// 天气太闷了

  7. substring(start, end)

    表示截取一段字符串从 start 开始到 end 不包含 end，不可以使用负值

    var str = '今天天气太闷了，感觉气温有35°C';
console.log(str.substring(2, 7));
// 天气太闷了
console.log(str.substring(7, 2));
// 天气太闷了

    注：该方法的参数位置可以调换，会自动判断，包含小大，不包括大的

  8. toUpperCase() toLowerCase()

    toUpperCase(): 表示转换为大写字母

    toUpperCase():表示转换为小写字母

    var str1 = 'vience';
console.log(str1.toUpperCase());
// VIENCE
var str2 = 'VIENCE';
console.log(str2.toLowerCase());
// vience

案例：将每个字母的首字母大写

var str = 'everything is good in its season';
// 首先需要得到每个单词组成的数组
// 然后遍历数组中的每个单词变成首字母大写
// 最后把数组使用空格凭借
var arr = str.split(' ').map(item => item.charAt(0).toUpperCase() + item.slice(1));
var strNew = arr.join(' ');
console.log(strNew);
// Everything

正则表达式

正则表达式就是用于字符串的匹配规则。数据类型是对象（引用类型），正则经常用于表单验证

体会：输入一个电话号码000-12345678

var call = prompt("请输入电话号码");

var reg = /^\d{3}-\d{8}$/;
if (reg.test(call)) {
  console.log("输入正确");
} else {
  console.log("输入错误，请重新输入");
}
// 输入正确

1. 正则的概述

正则表达式（regular expression）,简称RegExp, 是被用来匹配字符串的字符组合模式, 常用来做表单验证

创建： 使用正则字面量的方法常见

字面量： 表达式

var reg = /\d+/    // 表示有一个或多个数字
var reg = /\s+/    // 表示有一个或多个空白字符
var reg = /abcd/    // 表示有四个字符必须是abcd且顺序固定

2. 方法

  • 字符串的方法（字符串调用，正则表达式当参数）
  • 正则表达式的方法（正则表达式调用，字符串当参数）

2.1 字符串的方法

  1. split()

    根据匹配字符串切割原字符串

    var str = 'aaabbjdkbbbbjskblkk';
var reg = /b+/;
console.log(str.split(reg));
// [ 'aaa', 'jdk', 'jsk', 'lkk' ]

var str1 = 'v i   e  n    c   e';
var reg1 = /\s+/;
console.log(str1.split(reg1));
// [ 'v', 'i', 'e', 'n', 'c', 'e' ]

  2. match()

    使用正则表达式与字符后串相比较，返回匹配结果的数组

    用于字符串或者正则的匹配输出所在位置

    // 参数是普通字符串是
var str = 'abobosjkfjffkl';
console.log(str.match('obo'));
// [ 'obo', index: 2, input: 'abobosjkfjffkl', groups: undefined ]
// inde 表示所在位置的索引值


    
var str = 'abo  osjko   ofjo offkl';
console.log(str.match(/o\s+o/));
// [ 'o  o', index: 2, input: 'abo  osjko   ofjo offkl', groups: undefined ]
// inde 表示所在位置的索引值
console.log(str.match(/o\s+o/g));
// [ 'o  o', 'o   o', 'o o' ]

var str1 = "BOSS/CRM_储新迪_13739186228,电渠承载_刘进松_13905182960";
var res = str1.match(/\d{11}/g);
console.log(res);
// [ '13739186228', '13905182960' ]

    注：若不写 g ，只输出匹配田间道饿第一个字符串，带上 g ，会输出所有匹配的字符串组成的数组

  3. search()

    用正则表达式或者指定字符串进行搜索，返回首次出现匹配的下标

    var str = 'aboaosjkoaaaaofjoaaoffkl';
// 指定字符串
console.log(str.search('oa'));
// 2
// 正则表达式
console.log(str.search(/oa+o/));
// 2
// 只搜索第一个加g也不能全局搜索
console.log(str.search(/oa+o/g));
// 2

  4. replace(old, new)

    用正则表达式和字符串直接比较，然后用新的字符串替换被匹配的字符串

    参数：old： 匹配的字符串 new： 新的字符串

    var str = 'www.baidu.com';
console.log(str.replace('baidu', 'yunxicn'));
// www.yunxicn.com
console.log(str.replace(/baidu/, 'yunxicn'));
// www.yunxicn.com

var strName = 'v  i e   n c  e';
console.log(strName.replace(/\s+/g, ''));
// vience

2.1 正则表达式的方法

  1. exec()

    表示匹配的字符串再原字符串中的位置，返回一个数组。即使全局匹配 g 也只会返会第一次出现的位置（类似 search 方法）

    var str = 'aaabcdddabced';

// 字符串方法-全局匹配
console.log(str.match(/abc/g));
// [ 'abc', 'abc' ]

// 正则方法
var reg = /abc/;
console.log(reg.exec(str));
// [ 'abc', index: 2, input: 'aaabcdddabced', groups: undefined ]

  2. test()

    检测正则表达式在字符串中能否匹配，常用于表单校验，若能返回true，不能返回fasle

    console.log(/\t/.test('v	ience'));
// true
console.log(/\n/.test(`v
ience`));
// true

正则表达式的术语和操作符

1. 精确匹配

正则表达式：有一些普通字符和一些特殊字符（元字符matecharaters）组成， 普通字符包括大小写的字母和数字，而元字符具有特殊的含义

JavaScript 中常用的特殊字符有 () [] {} \ ^ $ | ? * + . 等

若我们使用这类字母必须使用转义符号。例如：\^ \\

我们要匹配的正则表达式里，没有特殊符号或者操作符。我们要想匹配这些常量、普通字符，我们只能去进行精确匹配，字符串里出现的字符必须在正则里直接书写。

// 测试字符串”abcnddjgkgk”中是否有“abc”
// 精确匹配 必须具有abc这三个字母且顺序固定
console.log(/abc/.test('abcnddjgk'));
// true

2. 预定义特殊字符

\t ： /\t/: 制表符

\n ： /\n/: 回车符

\f ： /\f/: 换页符

\b ： /\b/: 空格

// 下面空格为制表符
console.log(/\t/.test('v	ience'));
// true
console.log(/\n/.test(`v
ience`));
// true

3. 字符集合

我们之前使用的都是一个字符匹配已给招募，当想用一类字符匹配一个字符，需要用到字符集

字符集：[] 将一类字母的可能性都写在中括号之内

  • 简单类

    正则的多个字符对应一个字符，我们用 []把他们括起来，让 []这个整体对应一个字符串

    // [abc]表示一类字符集可以是a,可以是b,可以是c
var str = 'sanasdndjkdscndsbnb';
console.log(str.match(/s[abc]n/g));
// [ 'san', 'scn', 'sbn' ]

  • 范围类

    要匹配的字符太多，可以使用范围将可能性包含在内

    例如：[a-z] [A-Z] [0-9]

    console.log(/[a-z]/.test("看看有没有(ymy)字母"));
// true
console.log(/[0-9]/.test("看看有没有(010)数字"));
// true

  • 负向类

    [ 后面加个元字符 ^ 进行取反，表示匹配不能为括号里面的字

    // [^abc]: 表示一类字符集的可能性，不可以是a, b, c
var str = 'sanasdndjkdscndsbnbskn';
console.log(str.match(/s[^abc]n/g));
// [ 'sdn', 'skn' ]

  • 组合类

    用中括号匹配不同类型的单个字符

    var str = 'sanasdndjkdscndsbnbsknsYn';
console.log(str.match(/s[a-zA-Z0-9]n/g));
// [ 'san', 'sdn', 'scn', 'sbn', 'skn', 'sYn' ]

4. 字符的边界

  • ^

    开头： 表示字符串能够匹配到 ^ 以后的字符串（不能写在中括号里面）

    console.log(/^hello/.test('hello vience'));
// true
console.log(/^ello/.test('hello vience'));
// false

  • $

    结尾：表示字符串能够匹配到 $ 前面的字符串

    console.log(/vience$/.test('hello vience'));
// true
console.log(/vienc$/.test('hello vience'));
// false

  • \b

    单词的边界：用于查找位于的单词的开头或结尾的匹配

    var str = 'hello vience';
console.log(str.match(/\b\w+\b/));
// [ 'hello', index: 0, input: 'hello vience', groups: undefined ]
console.log(str.match(/\b\w+\s+\b/));
// [ 'hello ', index: 0, input: 'hello vience', groups: undefined ]
console.log(str.match(/\b\s+\w+\b/));
// [ ' vience', index: 5, input: 'hello vience', groups: undefined ]
console.log(str.match(/\b\w+\b/g));
// [ 'hello', 'vience' ]

  • \B

    非单词边界：用于查找不处于单词的开头或结尾的匹配

    var str = 'hello vience';
console.log(str.match(/\B\w+\B/g));
// [ 'ell', 'ienc' ]
console.log(str.match(/\B\w+\B/));
// [ 'ell', index: 1, input: 'hello vience', groups: undefined ]
console.log(str.match(/\B\s+\w+\B/g));
// null

5.修饰符

  • g

    g: 全局匹配：能在全局范围内匹配

    console.log('banana'.match(/na/));
// [ 'na', index: 2, input: 'banana', groups: undefined ]
console.log('banana'.match(/na/g));
// [ 'na', 'na' ]

var str = "BOSS/CRM_储新迪_13739186228,电渠承载_刘进松_13905182960";
console.log(str.match(/\d{11}/));
// [ '13739186228', index: 13, input: 'BOSS/CRM_储新迪_13739186228,电渠承载_刘进松_13905182960', groups: undefined ]
console.log(str.match(/\d{11}/g));
// [ '13739186228', '13905182960' ]

  • i

    i: 大小写不敏感：不区分大小写

    console.log('banaNa'.match(/Na/));
// [ 'Na', index: 4, input: 'banaNa', groups: undefined ]
console.log('banaNa'.match(/Na/i));
// [ 'na', index: 2, input: 'banaNa', groups: undefined ]

  • 同事使用多个修饰符g 和 i （顺序无先后）

    console.log('baNana'.match(/na/gi));
// [ 'Na', 'na' ]

6. 预定义类

JavaScript 提前给我们定义好一些特殊字符，表示一类字符，是一些特殊字符集的简写

  • .

    [^\n\r]：表示除换行和回车之外的任意字符

    var reg = /^.+$/;
console.log(reg.test('@#$%&^'));
// true
console.log(reg.test('jfkf'));
// true
console.log(reg.test('12223'));
// true
console.log(reg.test(`a
$@`));
// false

  • \d

    [0-9]：表示数字字符

    var reg = /^\d+$/;
console.log(reg.test('961113'));
// true
console.log(reg.test('9b1113'));
// false

  • \D

    [^0-9]：表示非数字字符

    var reg = /^\D+$/;
console.log(reg.test('961113'));
// false
console.log(reg.test('vience_tang@qq.com'));
// true

  • \w

    [a-zA-Z_0-9]：单词字符（大小写字母，下划线）

    var reg = /^\w+$/;
console.log(reg.test('vience'));
// true
console.log(reg.test('vi  ence'));
// false
console.log(reg.test('vience_tang@qq.com'));
// false

  • \W

    [^a-zA-Z_0-9]：非单词字符

    var reg = /^\W+$/;
console.log(reg.test('vience'));
// false
console.log(reg.test('vi  ence'));
// false
console.log(reg.test('@#$%^&*'));
// true
console.log(reg.test('@#$%^&*89'));
// false

  • \s

    [\t\n\*OB\f\r]：空的字符

    var reg = /^\s+$/;
console.log(reg.test('    '));
// true
console.log(reg.test('12    '));
// false
console.log(reg.test(`
`));
// true

  • \S

    [^\t\n\*OB\f\r]：非空字符

    var reg = /^\S+$/;
console.log(reg.test(`
`));
// false
console.log(reg.test('vience89'));
// true

7. 量词

量词用法: {}

  • {n}：硬性量，表示字符串出现固定次数（n为定值）

    var reg = /ab{2}c/, reg1 = /a[a-z]{3}c/;
console.log(reg.test('abbc'));
// true
console.log(reg.test('abc'));
// false
console.log(reg.test('abbbc'));
// false
console.log(reg1.test('avuec'));
// true

  • {n,m}：软性量词，表示至少出现 n次，最多出现 m 次（m省略时，表示至少 n 次）

    var reg = /ab{3,6}c/, reg1 = /a[a-z]{3,}c/;
console.log(reg.test('abbbc'));
// true
console.log(reg.test('abbc'));
// false
console.log(reg.test('abbbbbbbbc'));
// false
console.log(reg1.test('abbbbbbbbc'));
// true
console.log(reg1.test('abbc'));
// false
console.log(reg1.test('abbbc'));
// true

  • ?：等同于 {0,1}：表示出现0次或1次

    var reg = /ab?c/;
console.log(reg.test('ac'));
// true
console.log(reg.test('abc'));
// true
console.log(reg.test('abbc'));
// false

  • +：等同于 {1,}：表示最少出现一次

    var reg = /ab+c/;
console.log(reg.test('abc'));
// true
console.log(reg.test('abbc'));
// true
console.log(reg.test('ac'));
// false

  • *：等同于 {0,}：表示出现0次或多次（任意次数）

    var reg = /ab*c/;
console.log(reg.test('abc'));
// true
console.log(reg.test('abbbc'));
// true

    注 {n,m}：nm之间的逗号前后无空格

8. 分组

虽然量词的出现，能帮助我们处理一排紧密相连的同类型字符。但这是不够的，我们用中括号表示范围内选择，大括号表示重复次树。如哦想获取重复多个字符，我们就要用小括号进行分组。

var reg = /(bye){2}/, reg1 = /(bye)+/;
console.log(reg.test('vience byebye'));
// true
console.log(reg.test('vience byebyy'));
// false
console.log(reg1.test('vience byebye'));
// true

9. 或操作符

正则表达式可以使用或操作符 |

// 要么是a，要么是bye
var reg = /a|bye/;
console.log(reg.test('aye'));
// true
console.log(reg.test('bye'));
// true

var reg1 = /(a|bye){1}/;
console.log(reg1.test('a'));
// true
console.log(reg1.test('bye'));
// true
console.log(reg1.test('aye'));
// true
console.log(reg1.test('byebye'));
// true
console.log(reg1.test('bbe'));
// false

// 要么时3个字母，要么是2个数字
var reg2 = /([a-z]{3})|([0-9]{2})/;
console.log(reg2.test('abc'));
// true
console.log(reg2.test('89'));
// true

var reg3 = /([a-z]{3})|([0-9]{2}){2}/;
console.log(reg3.test('8989'));
// true
console.log(reg3.test('vience'));
// true

10. 分组的反向引用

反向引用标识时对正则表达式的匹配组捕获的子字符串进行编号，通过\编号（在正则表达式中），$编号（在正则表达式外）进行引用，从1开始计数

  • 在正则表达式中的编号

    console.log(/(bye)\1/.test('byebye'));
// true
console.log(/(bye){2}/.test('byebye'));
// true
console.log(/(bye)\1/.test('bye'));
// fasle
console.log(/([a-z]{3})\1/.test('abcabc'));
// true
console.log(/([a-z]{3})\1/.test('xyzabc'));
// fasle
console.log(/([a-z]{3})\1{2}/.test('xyzxyzxyz'));
// true

  • 在正则表达式外的编号

    console.log("123*456".replace(/(\d{3})\*(\d{3})/, '$2*$1'));
// 456*123

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

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

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

11. 中文

匹配中文: [\u4E00-\u9FA5]，是一个固定的用法，中文只能在正则表达式里这样表示，可以匹配中文简体/中文繁体

var reg = /^[\u4e00-\u9fa5]+$/
console.log(reg.test('游戏'));
// true
console.log(reg.test('lj游戏hw青春'));
// false
console.log(reg.test('游戲'));
// true
avatar
文章
阅读
粉丝