JavaScript正则表达式

1.JSON数据格式

(1)JOSN(JavaScript Object Nonation)JS对象一种标记法，JSON在前后端语言中都有出现，常用于前后端数据的交互。在JavaScript中，JOSN是引用类型的数据，用一个大花括号表示。

JOSN数据格式的作用：通过键值对(KV对)存储、读取、修改、添加数据，数据之间用逗号隔开。

语法格式：{

                           "name"："张三"

                           "age"："18"

                    }

(2)①JOSN用于存储数据，键必须加双引号。

<script type="text/javascript">
    var a = {
        "name":"张三",
        "age":18,
        "hobby":["抽烟","喝酒","烫头"]
    };
    console.log(a);
</script>

②通过点语法和枚举法获取数据：

    //点语法
    console.log(a.name);
    console.log(a.age);
    //枚举法
    console.log(a["name"]);
    console.log(a["hobby"]);

③修改已有数据：

    //点语法
    a.name = "李四";
    //枚举法
    a["age"] = 40;
    console.log(a); //{name: '李四', age: 40, hobby: Array(3)}

④添加键值对：

    //点语法
    a.sex = "男";
    //枚举法
    a["职业"] = "相声";
    console.log(a);

2.正则表达式

正则表达式：regular expression，简称RegExp。正则表达式是用于匹配字符串的一种模式、方法。类型是引用类型(object)。

书写方式://(定界符)，将要匹配的字符串放在两个反斜杠中间，且不用加引号。正则表达式在工作台中打印出来是红色。

3.正则表达式使用技巧

能结合正则表达式使用的字符串方法：split、match、search、replace。

①split：用指定字符切割字符串

<script type="text/javascript">
    var str1 = 'a b  c   d    e';
    //仅使用split用空格切割字符串
    console.log(str1.split(" "));//['a', 'b', '', 'c', '', '', 'd', '', '', '', 'e']
    //split与正则表达式结合使用
    console.log(str1.split(/\s+/));//['a', 'b', 'c', 'd', 'e']
</script>

代码中\s代表空格，+号代表量词指至少是一个。

②match：获取第一个符合条件的字符，并返回数组。

<script type="text/javascript">
    var str1 = 'AaAAAaAA';
    console.log(str1.match("a"));//['a', index: 1, input: 'AaAAAaAA', groups: undefined]
    //使用正则，可匹配全部字符a。
    console.log(str1.match(/a/g));//['a', 'a']
</script>

代码中g是全局的意思，可以将全部指定字符匹配出来。修饰符g只能放在右侧/的后面。

③search：获取第一个符合条件字符的索引值。

但即便使用正则表达式加上修饰符g，也只能获得第一个索引值。

<script type="text/javascript">
    var str1 = 'abcdeabc';
    console.log(str1.search("ab")); //0
    console.log(str1.search(/ab/g)); //0
</script>

④replace：替换符合条件的字符

<script type="text/javascript">
    var str1 = 'abcdeabc';
    console.log(str1.replace("ab","AB")); //ABcdeabc
    console.log(str1.replace(/ab/g,"AB")); //ABcdeABc
</script>

4.正则表达式方法

①exec：在目标字符串中执行一次正则匹配，只能匹配第一次出现的字符。

<script type="text/javascript">
    var str1 = 'aaabcdeabc';
    //声明一个变量存储正则表达式
    var reg = /abc/;
    console.log(reg.exec(str1));//['abc', index: 2, input: 'aaabcdeabc', groups: undefined]
</script>

②test：检测正则表达式当中的数据是否在目标字符串中出现，若出现返回布尔值true，否则返回false。

<script type="text/javascript">
    var str1 = 'ab cd   ef';
    var reg = /\s+/; //检测字符串中是否包含空格
    console.log(reg.test(str1)); //true
</script>

5.正则表达式字符集

①简单类：任意多个字符进行集合书写，匹配其中的某一个字符，比如：[abc]。

<script type="text/javascript">
    var str1 = 'abcLLLbbcLLL';
    var arr = str1.match(/[ab]bc/g);
    //[ab]指匹配a或b中的一个
    console.log(arr); //['abc', 'bbc']
</script>

②范围类：当要匹配的东西过多，类型又相同时，可以在中间加个横线，比如：[0-9]、[a-z]、[A-Z]

注意范围只有上面三个，[0-9]只是匹配某一个数字。

<script type="text/javascript">
    var str1 = 'abc12306deg';
    console.log(str1.match(/[0-9]/));
    //['1', index: 3, input: 'abc12306deg', groups: undefined]
    console.log(str1.match(/[0-9]/g));
    //['1', '2', '3', '0', '6']
    console.log(str1.match(/[0-9]+/));
    //['12306', index: 3, input: 'abc12306deg', groups: undefined]0: "12306"groups: undefinedindex: 3input: "abc12306deg"length: 1[[Prototype]]: Array(0)
</script>

③组合类：将多个类放在一起，两个范围之间没有符号，比如：[0-9a-z]。

<script type="text/javascript">
    var str1 = 'AAA12xy12MMM12uv';
    console.log(str1.match(/[a-z0-9]+/g)); //['12xy12', '12uv']
</script>

6.正则表达式修饰符

修饰符务必出现在第二个/的右边

①g：用于执行全局匹配。

②i(ignore)：用于执行对大小写不敏感的匹配。

<script type="text/javascript">
    var str1 = '1Aa222BBcc';
    //多个修饰符可同时使用
    console.log(str1.match(/[a-z]+/ig));
    //['Aa', 'BBcc']
</script>

7.正则表达式边界符

①^：表示字符串必须以^后面的内容开头，^一定出现在第一个定界符的后面。

<script type="text/javascript">
    var str1 = 'zzzabcde';
    console.log(/^abc/.test(str1));//false
</script>

②$：表示字符串以$前面的内容作为结尾，$一定出现在第二个定界符的前面。

<script type="text/javascript">
    var str1 = 'zzzabcde';
    console.log(/de$/.test(str1));//true
</script>

8.正则表达式预定义类

①\d：指[0-9]，即匹配一个任意的数字字符

②\D：指非[0-9]，即匹配任意一个不是数字的字符

<script type="text/javascript">
    var str1 = 'aaa666@#$%^&bbb';
    console.log(str1.match(/\d+/));
    //['666', index: 3, input: 'aaa666@#$%^&bbb', groups: undefined]
    console.log(str1.match(/\D/));
    //['a', index: 0, input: 'aaa666@#$%^&bbb', groups: undefined]
</script>

③\s：可以匹配任意空白

④\S：可以匹配任意不是空白的字符

<script type="text/javascript">
    var str1 = 'a b  c   d';
    console.log(str1.replace(/\s+/g,'*'));//a*b*c*d
    console.log(str1.replace(/\S/g,'*'));//* *  *   *
</script>

⑤\w：可以匹配任意的字母、数字或下划线

⑥\W：可以匹配任意的字母、数字、下划线以外的内容

<script type="text/javascript">
    var str1 = 'ac@#$__&%zz';
    console.log(str1.replace(/\w+/g,'*'));//*@#$*&%*
    console.log(str1.replace(/\W+/g,'*'));//ac*__*zz
</script>

9.正则表达式量词

如果需要将某个符号连续匹配多次，可以使用量词进行修饰。

①{n}：硬性量词，对应0次或n次

<script type="text/javascript">
    var str1 = 'abcccddcceeeef';
    console.log(str1.match(/c{3}/g));
    //['ccc']只匹配连续出现3次的c
</script>

②{n,m}：软性量词，至少出现n次但不超过m次

<script type="text/javascript">
    var str1 = 'abcccddcceeeef';
    console.log(str1.match(/c{2,10}/g));//['ccc', 'cc']
</script>

③{n,}：软性量词，至少出现n次

④?：软性量词，出现零次或一次

⑤*：软性量词，出现零次或多次

<script type="text/javascript">
    var str1 = 'abcccdcdcceeeef';
    console.log(str1.match(/c?/g));
    //['', '', 'c', 'c', 'c', '', 'c', '', 'c', 'c', '', '', '', '', '', '']
    console.log(str1.match(/c*/g));
    //['', '', 'ccc', '', 'c', '', 'cc', '', '', '', '', '', '']
</script>

⑥+：软性量词，出现一次或多次

10.正则表达式分组与汉字

①分组：正则中使用()表示分组，内部的内容会作为一个整体进行操作。如果()后有量词表示()内部整体连续匹配多次。

<script type="text/javascript">
    var str1 = 'mmmmabcabcmmm';
    console.log(/(abc){2}/.test(str1));//true
</script>

②[\u4e00-\u9fa5]：代表匹配一个汉字

<script type="text/javascript">
    var str1 = 'mmmm啦m啦啦mm';
    console.log(str1.replace(/[\u4e00-\u9fa5]+/g,'*'));
    //mmmm*m*mm
</script>

11.JavaScript其他语法

①三元运算符

语法格式：A ? B：C    常用于给变量赋值。

A部分需要一个布尔值，其他类型需要隐式转换为布尔值。A为真时返回B，A为假时返回C。

<script type="text/javascript">
    console.log(5 >= 3 ? 'X' : 'Y');//X
</script>

②类数组对象arguments

函数体中拥有一个引用类型的数据arguments，可以获取传递给函数的实参。类数组不是数组，因为只能使用数组的length属性，不能使用数组的方法。

<script type="text/javascript">
    function fun1() {
        //可以在没形参的情况下获取多个实参
        console.log(arguments);
    };
    fun1(1,2,3,4,5,6,7,8,9);
    //Arguments(9) [1, 2, 3, 4, 5, 6, 7, 8, 9, callee: ƒ, Symbol(Symbol.iterator): ƒ]
</script>

12.闭包

①闭包即为一个可以访问其他作用域中变量的函数。

<script type="text/javascript">
    var num = 100;
    function fun1(){
        console.log(num);
    };
    fun1();
</script>

上例中函数fun1()可以访问全局变量num，则为一个闭包。