31 正则、匿名函数、闭包

正则

概念

正则: 检索字符串的规则字符串用事先定义好的一些特殊字符组成一定的规则字符串实现对字符串的一个检索替换

创建方式

new创建

var 变量 = new RegExp(字符/规则字符串, 修饰符);

// new 
var reg = new RegExp('hello');
console.log(reg);
// console.log(typeof reg);

字面量创建

var 变量 = /字符/规则字符串/;

var reg1 = /hello/;
console.log(reg1);

修饰符

i: ignore case 忽略大小写

g: global 全局

// 字符串.replace(替换的内容/正则, 新字符/函数);
var str = 'hello world, hello world, HELLO world, Hello World';

var reg = /hello/;
console.log(str.replace(reg, '你好')); // 你好 world, hello world, HELLO world, Hello World

var reg1 = /hello/g;
console.log(str.replace(reg1, '你好')); // 你好 world, 你好 world, HELLO world, Hello World

var reg2 = /hello/ig;
console.log(str.replace(reg2, '你好1')); // 你好1 world, 你好1 world, 你好1 world, 你好1 World

正则检索方法

如果正则没有加修饰符g, 每次检索都从0开始; 如果加了修饰符g, 会从上一次匹配到结果的下一位开始做检索

test

正则.test(字符串)

返回值为boolean true--检索的字符串中有符合正则规则的字符 false---没有

var str = '这是一天周四，这是一个好的天气，这是一个即将放假的时候';
var reg = /这是/g;
// console.log(reg.lastIndex); // 0    0  返回下一次正则开始检索的位置下标
// console.log(reg.test(str));

// console.log(reg.lastIndex); // 0    2
// console.log(reg.test(str));

// console.log(reg.lastIndex); // 0    9
// console.log(reg.test(str));

// console.log(reg.lastIndex); // 0    18
// console.log(reg.test(str)); // false

// console.log(reg.lastIndex); // 0    0
// console.log(reg.test(str)); // true

exec

正则.exec(字符串)

返回检索到的结果集合如果检索不到返回null

console.log(reg.exec(str)); // ["这是", index: 0, input: "这是一天周四，这是一个好的天气，这是一个即将放假的时候", groups: undefined]

console.log(reg.exec(str)); // ["这是", index: 7, input: "这是一天周四，这是一个好的天气，这是一个即将放假的时候", groups: undefined]

字符串检索方法

split

split: 分割字符串.split(分割符/正则);

console.log(str.split(reg));

replace

replace: 替换字符串.replace(替换字符/正则, 新字符/函数);

console.log(`str.replace`(reg, '111'));

match

match: 返回查找到的匹配项类似exec

单个返回: ["这是", index: 0, input: "这是一天周四，这是一个好的天气，这是一个即将放假的时候", groups: undefined]

多个返回: ["这是", "这是", "这是"]

console.log(str.match(reg));

search

search: 替代indexOf 查找匹配项找到返回第一个下标找不到返回-1

console.log(str.search(reg)); // 0
console.log(str.search(/a/)); // -1

元字符

.点匹配除换行以外的任意一个字符

var str = '\nbcd';
var reg = /./;
console.log(reg.exec(str)); // ["b", index: 1, input: "↵bcd", groups: undefined]

[]: 字符集匹配[]中字符的任何一个字符没有顺序不需要加任何其他符号

[^]: 非字符集不匹配[^]中的任何一个字符匹配除了[^]以外的任何一个字符

// 2. []: 字符集  匹配[]中字符的任何一个字符  没有顺序 不需要加任何其他符号
var str = '"这是一句话”';
var reg = /[“"abc123]/; // 匹配[]中的任何一个字符
console.log(reg.exec(str));


// [^]: 非字符集  不匹配[^]中的任何一个字符  匹配除了[^]以外的任何一个字符
var reg = /[^"abc123这是]/;
console.log(reg.exec(str)); // 一  ["一", index: 3, input: ""这是一句话”", groups: undefined]

[]: 0-9 表示数字0--数字9 3-9 0-2 A-Z 表示大写字母A--大写字母Z 每一个字母 a-z 表示小写字母a--小写字母z 每一个字母

\d: 数字0-9 \D: 非数字0-9

// 3. \d: 数字0-9   \D: 非数字0-9
var str = 'abc123';
var reg = /\d/; // 匹配0-9
console.log(reg.exec(str)); // 1  ["1", index: 3, input: "abc123", groups: undefined]

var reg = /\D/; 
console.log(reg.exec(str)); // a  ["a", index: 0, input: "abc123", groups: undefined]

\w: 匹配数字、字母、_ \W: 匹配非数字、字母、_

// 4. \w: 匹配数字、字母、_  \W: 匹配非数字、字母、_
var str = 'today is a fine day.';
var reg = /\w/;
console.log(reg.exec(str)); // t  ["t", index: 0, input: "today is a fine day.", groups: undefined]

var reg = /\W/;
console.log(reg.exec(str)); //  [" ", index: 5, input: "today is a fine day.", groups: undefined]

\s: 匹配空格 \S: 匹配非空格

// 5. \s: 匹配空格  \S: 匹配非空格
var reg = /\s/;
console.log(reg.exec(str));// [" ", index: 5, input: "today is a fine day.", groups: undefined]

var reg = /\S/;
console.log(reg.exec(str)); // t

\b: 匹配单词边界 \B: 匹配非单词边界

// 6. \b: 匹配单词边界  \B: 匹配非单词边界
// today a  todaya
var str = 'you are a beautiful girl';
var reg = /\ba\B/; // are  a左边是单词边界 右边不是单词边界
console.log(reg.exec(str));

var reg = /\ba\b/; // a的左右都是单词边界
console.log(reg.exec(str));

var reg = /\Ba\B/;
console.log(reg.exec(str));

^: 以什么为开头 $: 以什么为结尾

^a: 以a为开头

a$: 以a为结尾

var str = '123abc';
var reg = /^2/;
console.log(reg.exec(str));
var reg = /c$/;
console.log(reg.exec(str));

组合使用:

检验整个字符串是否符合某个规则

规则的长度

6-18位手机号11 银行卡密码身份证号

// 银行卡密码: 6位数字
// var reg = /^\d\d\d\d\d\d$/; // 整个字符串从开头到结尾有6位 以数字开头 以数字为结尾的
var reg = /^[0-9][0-9][0-9][0-9][0-9][0-9]$/;
// var str = '123456123456';
var str = '123456';
// var str = '12345';
console.log(reg.exec(str));

/* 
    []: 
        0-9 表示数字0--数字9 3-9  0-2
        A-Z 表示大写字母A--大写字母Z  每一个字母
        a-z 表示小写字母a--小写字母z  每一个字母
*/
// var reg = /^[0-9][0-9][0-9][0-9][0-9][0-9]$/;

量词

a?: 匹配0个或者1个a

/* 
    1. a?: 匹配0个或者1个a
*/
var str = 'abcdefgabcd';
var reg = /a?/;
console.log(reg.exec(str));

a*: 匹配0个或者连续多个a 尽可能多的去匹配

/* 
    2. a*: 匹配0个或者连续多个a  尽可能多的去匹配
*/
var str = 'aaaaabcabc';
var reg = /a*/;
console.log(reg.exec(str));

a+: 匹配连续多个a 尽可能多的去匹配至少匹配1个

/* 
    3. a+: 匹配连续多个a  尽可能多的去匹配  至少匹配1个
*/
var str = 'bcbcaaa';
var str = 'bcbc';
var reg = /a+/;
console.log(reg.exec(str));

a{n,m}: 匹配至少n个a 最多m个a

a{n}: 匹配n个 a{6}: 匹配6个a a{n,}: 至少匹配n个

尽可能多的去匹配

/* 
    4. a{n,m}: 匹配至少n个a  最多m个a
       a{n}: 匹配n个  a{6}: 匹配6个a
       a{n,}: 至少匹配n个

       尽可能多的去匹配
*/
var str = '1234567890a1234567890';
var reg = /\d{6,8}/;
console.log(reg.exec(str));

var reg = /\d{6}/;
console.log(reg.exec(str));

var reg = /\d{3,}/;
console.log(reg.exec(str));

var reg = /^\d\d\d\d\d\d$/;
var reg = /^\d{6}$/;
var str = '1234567';
var str = '123456';
console.log(reg.exec(str));

其他

|: 或匹配左边或者右边

/* 
    1. |: 或  匹配左边或者右边
*/
var str = 'web129web456';
var reg = /web123|web456/;
console.log(reg.exec(str));

var reg = /web123|456/; // 错

(): 分组

/* 
    2. (): 分组
*/
var reg = /web(123|456)/;
console.log(reg.exec(str));
console.log(RegExp.$1); // 第一个()中的匹配结果

var str = 'today is a fine day';
var reg = /(\w+)\s(\w+)/;
console.log(reg.exec(str));
console.log(RegExp.$1, RegExp.$2); // 第一个()  第二个()

预判: (?!.....) 不能为什么条件匹配整个字符串不能是什么

/*
    3. 预判: (?!.....)
        不能为什么条件
        匹配整个字符串不能是什么
*/
var str = '123456a123abc';
// var str = 'aaaaa';
// var str = '123456';
// var reg = /[0-9a-zA-Z]+/;
var reg = /(?!^\d+$)(?!^[a-zA-Z]+$)^[0-9a-zA-Z]+$/;
console.log(reg.exec(str));

匿名函数

匿名函数: 没有名字的函数

\1. 可以被调用 (函数)(); (函数())

\2. 立即执行函数: IIFE: 代码可以直接被调用执行，没有名字, 污染全局变量, 代码比较优美的

\3. 有参数: 形参(function后面的()中)和实参(调用的()中)

\4. 有返回值: var 变量 = ()();

(function () {
    console.log(1);
})();

(function () {
    console.log(2);
}());

// 3. 有参数: 形参(function后面的()中)和实参(调用的()中)
(function (a, b) {
    console.log(a, b);
})(20, 30);

// 4. 有返回值: var 变量 = ()();
var s = (function (a, b) {
    return a + b;
})(40, 50);
console.log(s);

闭包

概念

闭包: 可以读取其他函数内部变量的函数; 函数里面套函数, 内部函数访问外部函数的变量；

本质: 将函数内外联系起来的桥梁

function a(){
    var m = 10;
    function fn(){
        m--;
        console.log(m);
    }
    return fn;
}
var f = a();
console.log(f);
f();
f();

解决的问题

解决全局i的问题

for(var i = 0; i < lis.length; i++){
    // 立即执行函数
    (function(s){
        lis[s].onclick = function(){
            console.log(s);
        }
    })(i); // for循环的每一次的i作为实参传递到函数中
}

模拟私有变量

function getRen(name, age) {
    var user = name;
    var age = age;

    return {
        'sayName': function () {
            console.log(user);
        },
        'setName': function (n) {
            console.log(n);
            user = n;
        }
    }
}

var ren = getRen('郑爽', 33);
console.log(ren); // 对象
ren.sayName();
ren.setName('郑小爽');

ren.sayName();

var r1 = getRen('张恒', 35);
console.log(r1);
r1.sayName();
r1.setName('张晓恒');

r1.sayName();

posted @ 2021-05-07 22:00 一花一世界111 阅读(137) 评论(0) 收藏举报

刷新页面返回顶部

一花一世界111

31 正则、匿名函数、闭包