【前端知识体系

网络
1 正则表达式基础 1 1 创建正则表达式 1 1 1 使用一个正则表达式字面量 const regex = ^[a-zA-Z]+[0-9]* W?_$ g

1.正则表达式基础

1.1 创建正则表达式

1.1.1 使用一个正则表达式字面量

const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;

1.1.2 调用RegExp对象的构造函数

const regex = new RegExp(pattern, [, flags])

1.1.3 特殊字符

 - ^ 匹配输入的开始
 - $ 匹配输入的结束
 - \* 0次或多次  {0，}
 - \+ 1次或多次  {1，}
 - ?
   - 0次或者1次 {0,1}。
   - 用于先行断言
   - 如果紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪
     - 对 "123abc" 用 /\d+/ 将会返回 "123"，
     - 用 /\d+?/,那么就只会匹配到 "1"。
 - . 匹配除换行符之外的任何单个字符
 - (x)  匹配 'x' 并且记住匹配项
 - (?:x)  匹配 'x' 但是不记住匹配项
 - x(?=y)  配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找。
 - x(?!y)  匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找。
 - x|y  匹配‘x’或者‘y’。
 - {n}  重复n次
 - {n, m}  匹配至少n次，最多m次
 - [xyz]   代表 x 或 y 或 z
 - [^xyz]  不是 x 或 y 或 z
 - \d  数字
 - \D  非数字
 - \s  空白字符，包括空格、制表符、换页符和换行符。
 - \S  非空白字符
 - \w  单词字符（字母、数字或者下划线）  [A-Za-z0-9_]
 - \W  非单字字符。[^A-Za-z0-9_]
 - \3  表示第三个分组
 - \b   词的边界
   - /\bm/匹配“moon”中得‘m’；
 - \B   非单词边界

1.2 使用正则表达式的方法

  • exec 一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）。
  • test 一个在字符串中测试是否匹配的RegExp方法，它返回true或false。
  • match 一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null。
  • search 一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
  • replace 一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。
  • split 一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的String方法。

1.2.1 正则对象的三个方法

        //①test()判断字符串中是否出现某个字符串，返回布尔值
        var re = /abc/;
        var str = '00abc66';
        console.log(re.test(str));  // true
        //②exec()查找并返回字符串中指定的某个字符串，只匹配一次
        var re = /abc/;
        var str = 'a0bc88abc00abc';
        console.log(re.exec(str));  // ["abc", index: 6, input: "a0bc88abc00abc", groups: undefined]
        //③compile()方法用于改变正则匹配的内容
        var re = /ab/;
        var str = "aabcdef";
        console.log(re.test(str));  //true
        re.compile(/bd/);
        console.log(re.test(str));  //false
        re.compile('66');
        console.log(re.test(str));  //false

1.2.2 字符串中与正则相关的方法

        //①search()方法，返回符合条件的字符串首次出现的位置（下标）
        var re = /abc/;
        var str = '00abc66';
        console.log(str.search(re));        // 2
        //②match()方法，返回查找的结果，如果查询不到返回NULL
        console.log(str.match(re));         // ["abc", index: 2, input: "00abc66", groups: undefined]
        //③replace()方法，将匹配到的内容替换成指定内容
        console.log(str.replace(re, "*"));
        //④split()方法，将字符串分割成字符串数组
        console.log(str.split(re));

1.3 正则表达式子表达式相关

1.3.1 子表达式

在正则表达式中，通过一对圆括号括起来的内容，我们就称之为“子表达式”。如：var re = /\d(\d)\d/;

1.3.2 捕获

在正则表达式中，子表达式匹配到相应的内容时，系统会自动捕获这个行为，然后将子表达式匹配到的内容放入系统的缓存区中。我们把这个过程就称之为“捕获”。

1.3.3 反向引用

在正则表达式中，我们可以使用\n（n>0，正整数，代表系统中的缓冲区编号）来获取缓冲区中的内容，我们把这个过程就称之为“反向引用”。

    var str = "d1122jj7667h6868s9999";
    //查找AABB型的数字
    console.log(str.match(/(\d)\1(\d)\2/)); //1122
    //查找ABBA型的数字
    console.log(str.match(/(\d)(\d)\2\1/)); //7667
    //查找ABAB型的数字
    console.log(str.match(/(\d)(\d)\1\2/)); //6868
    //查找四个连续相同的数字
    console.log(str.match(/(\d)\1\1\1/));   //9999

1.4 限定符

[!NOTE]
限定符可以指定正则表达式的一个给定字符必须要出现多少次才能满足匹配。

    *：匹配前面的子表达式零次或多次，0到多
    +：匹配前面的子表达式一次或多次，1到多
    ?：匹配前面的子表达式零次或一次，0或1
    {n}：匹配确定的 n 次 
    {n,}：至少匹配 n 次 
    {n,m}：最少匹配 n 次且最多匹配 m 次

[!WARNING]
注意：针对于{n,m}，正则在匹配到一个符合多种次数的字符串时，优先匹配次数多的，即能匹配到m次就不会匹配n次，这就是贪婪模式（默认）。

如果在其后加?即{n,m}?则会更改为非贪婪模式（惰性模式），则此时正则优先匹配n次。

    var str = "aa1a22a333a6a8a";
    console.log(str.match(/a\d*/));      //a
    console.log(str.match(/a\d+/));      //a1
    console.log(str.match(/a\d?/));      //a
    console.log(str.match(/a\d{3}/));    //a333
    console.log(str.match(/a\d{2,}/));   //a22
    console.log(str.match(/a\d{1,3}/));  //a1
    console.log(str.match(/a\d{1,3}?/)); //a1

    //贪婪模式加深理解，案例如下：
    //贪婪模式下最开始的'a2就符合条件'，但是它会返回'a22'
    //注意：它是在遇到一个同时符合多个次数条件的字符串时，取符合次数多字符串
    var str = "a22aa1a333a6a8a";
    console.log(str.match(/a\d{1,3}/));   //a22
    console.log(str.match(/a\d{1,3}/g));  //a22 a1 a333 a6 a8
    console.log(str.match(/a\d{1,3}?/));  //a2
    console.log(str.match(/a\d{1,3}?/g)); //a2 a1 a3 a6 a8

1.5 定位符

[!NOTE]
定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。

^ (脱字符)：匹配输入字符串的开始位置
$：匹配输入字符串的结束位置
\b：匹配一个单词边界
\B：匹配非单词边界

1.6 正则表达式的匹配模式（修饰符）

[!NOTE]
表示正则匹配的附加规则，放在正则模式的最尾部。修饰符可以单个使用，也可以多个一起使用。

  • ①g全局匹配，找到所有匹配，而不是在第一个匹配后停止
  • ②i匹配全部大小写
  • ③m多行，将开始和结束字符（^和$）视为在多行上工作（也就是，分别匹配每一行的开始和结束（由\n或\r分割），而不只是只匹配整个输入字符串的最开始和最末尾处。
  • ④s与m相反，单行匹配
    var re = /^[a-z]/gim;   //可组合使用

1.7 转义字符

[!NOTE]
因为在正则表达式中 . + \ 等属于表达式的一部分，但有时也需要匹配这些特殊字符，所以，需要使用反斜杠对特殊字符进行转义。

  需要转义的字符：
  点号.
  小括号()
  中括号[]
  左斜杠/
  右斜杠\
  选择匹配符|
  
  * 
  ?
  {}
  + 
  $
  ^

2. 正则练习题

2.1 匹配结尾的数字

/\d+$/g

2.2 统计空格个数

字符串内如有空格，但是空格的数量可能不一致，通过正则将空格的个数统一变为一个。

let reg = /\s+/g
str.replace(reg, " ");

2.3 判断字符串是不是由数字组成

str.test(/^\d+$/);

2.4 电话号码正则

  • 区号必填为3-4位的数字
  • 区号之后用“-”与电话号码连接电话号码为7-8位的数字
  • 分机号码为3-4位的数字，非必填，但若填写则以“-”与电话号码相连接
/^\d{3,4}-\d{7,8}(-\d{3,4})?$/

2.5 手机号码正则表达式

正则验证手机号，忽略前面的0，支持130-139，150-159。忽略前面0之后判断它是11位的。

/^0*1(3|5)\d{9}$/

2.6 使用正则表达式实现删除字符串中的空格

funtion trim(str) {
  let reg = /^\s+|\s+$/g
  return str.replace(reg, '');
}

2.7 限制文本框只能输入数字和两位小数点等等

/^\d*\.\d{0,2}$/

2.8 只能输入小写的英文字母和小数点，和冒号，正反斜杠(：./)

/^[a-z\.:\/\\]*$/

2.9 替换小数点前内容为指定内容

例如：infomarket.php?id=197 替换为 test.php?id=197

var reg = /^[^\.]+/;
var target = '---------';
str = str.replace(reg, target)

2.10 只匹配中文的正则表达式

/[\u4E00-\u9FA5\uf900-\ufa2d]/ig

2.11 返回字符串的中文字符个数

先去掉非中文字符，再返回length属性。

function cLength(str){
  var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;
  //匹配非中文的正则表达式
  var temp = str.replace(reg,'');
  return temp.length;
}

2.12 正则表达式取得匹配IP地址前三段

只要匹配掉最后一段并且替换为空字符串就行了

function getPreThrstr(str) {
  let reg = /\.\d{1,3}$/;
  return str.replace(reg,'');
}

2.13 匹配ul标签之间的内容

/<ul>[\s\S]+?</ul>/i

2.14 用正则表达式获得文件名

c:\images\tupian\006.jpg

可能是直接在盘符根目录下，也可能在好几层目录下，要求替换到只剩文件名。
首先匹配非左右斜线字符0或多个，然后是左右斜线一个或者多个。

function getFileName(str){
  var reg = /[^\\\/]*[\\\/]+/g;
  // xxx\ 或是 xxx/
  str = str.replace(reg,'');
  return str;
}

2.15 绝对路径变相对路径

"http://23.123.22.12/image/somepic.gif"转换为："/image/somepic.gif"

var reg = /http:\/\/[^\/]+/;
str = str.replace(reg,"");

2.16 用户名正则

用于用户名注册，，用户名只 能用 中文、英文、数字、下划线、4-16个字符。

/^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/

2.17 匹配英文地址

规则如下:
包含 "点", "字母","空格","逗号","数字"，但开头和结尾不能是除字母外任何字符。

/^[a-zA-Z][\.a-zA-Z,0-9]*[a-zA-Z]$/

2.18 正则匹配价格

开头数字若干位，可能有一个小数点，小数点后面可以有两位数字。

/^\d+(\.\d{2})?$/

2.19 身份证号码的匹配

身份证号码可以是15位或者是18位，其中最后一位可以是X。其它全是数字

/^(\d{14}|\d{17})(X|x)$/

2.20 单词首字母大写

每单词首字大写，其他小写。如blue idea转换为Blue Idea，BLUE IDEA也转换为Blue Idea

function firstCharUpper(str) {
  str = str.toLowerCase();
  let reg = /\b(\w)/g;
  return str.replace(reg, m => m.toUpperCase());
}

2.21 正则验证日期格式

yyyy-mm-dd格式, 4位数字，横线，1或者2位数字，再横线，最后又是1或者2位数字。

/^\d{4}-\d{1,2}-\d{1,2}$/

2.22 去掉文件的后缀名

www.abc.com/dc/fda.asp 变为 www.abc.com/dc/fda

function removeExp(str) {
  return str.replace(/\.\w$/,'')
}

2.23 验证邮箱的正则表达式

开始必须是一个或者多个单词字符或者是-，加上@，然后又是一个或者多个单词字符或者是-。然后是点“.”和单词字符和-的组合，可以有一个或者多个组合。

/^[\w-]+@\w+\.\w+$/

2.24 正则判断标签是否闭合

标签可能有两种方式闭合，自闭和或者对称闭合的方式。

/<([a-z]+)(\s*\w*?\s*=\s*".+?")*(\s*?>[\s\S]*?(<\/\1>)+|\s*\/>)/i

2.25 正则判断是否为数字与字母的混合

不能小于12位，且必须为字母和数字的混合

/^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i

2.26 将阿拉伯数字替换为中文大写形式

function replaceReg(reg,str){
  let arr=["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
  let reg = /\d/g;
  return str.replace(reg,function(m){return arr[m];})
}

2.27 去掉标签的所有属性

<td style="width: 23px; height: 26px;" align="left">***</td>
变成没有任何属性的
<td>***</td>

思路：非捕获匹配属性，捕获匹配标签，使用捕获结果替换掉字符串。正则如下：

/(<td)\s(?:\s*\w*?\s*=\s*".+?")*?\s*?(>)/

2.28 驼峰表示

String.prototype.camelCase = function () {
        // .*?是非贪婪的匹配，点可以匹配任意字符，星号是前边的字符有0-n个均匹配，问号是则是0-1；
        // (^\w{1}): 用于匹配第一个首字母
        // (.*)：用于匹配任意个的前面的字符，.表示的就是任意字符

        // - param 1: 匹配到的字符串
        // - param 2: 匹配的的子字符串
        // - param 3: 匹配的子字符串
        // - param的位置
        // - param 5: 原始字符串 4: 匹配到的字符串在字符串中

        return this.replace(/(^\w{1})(.*)/g, function (match, g1, g2) {
            return g1.toUpperCase() + g2.toLowerCase();
        });
    }

2.29 模板字符串

// str = 'name: @(name), age:@(age)'
       // data = {name : 'xiugang', age : 18}
       /**
        * 实现一个简单的数据绑定
        * @param str
        * @param data
        * @return {*}
        */
       String.prototype.formateString = function (data) {
           return this.replace(/@\((\w+)\)/g, function (match, key) {
               // 注意这里找到的值必须返回出去(如果是undefined，就是没有数据)
               // 注意：判断一个值的类型是不是undefined，可以通过typeof判断
               console.log(typeof data[key] === 'undefined');
               return data[key] === 'undefined' ? '' : data[key];
           });

       }

2.30 去掉两边的空格

/**
        * 去掉两边的空格
        * @param str
        * @return {*}
        */
       String.prototype.trim = function () {
           return this.replace(/(^\s*)|(\s*$)/g, '');
       }

2.31 获取url参数: 使用replace保存到一个数组里面，然后从数组里面取出数据

'http://www.189dg.com/ajax/sms_query.ashx?undefined&undefined&undefined-06-27&undefined-06-27'
 url.replace(/(\w+)=(\w+)/g, function(a, b, c){
   console.log(a, b, c)
 })
action=smsdetail action smsdetail
sid=22 sid 22
stime=2014 stime 2014
etime=2014 etime 2014


// 封装为一个函数
var url = "http://127.0.0.1/e/action/ShowInfo.php?classid=9&id=2";
function parse_url(_url){
 var pattern = /(\w+)=(\w+)/ig;
 var parames = {};
 url.replace(pattern, function(a, b, c){
   parames[b] = c;
 });
 return parames;
}
var parames = parse_url(url);
alert(parames['classid'] + ", " + parames['id']);
您可能有感兴趣的文章
JavaScript获取标签的几种方式小结
JavaScript常用标签和方法总结
一文详解HTML中script 标签的属性
JSscript标签有哪些属性
JavaScript正则的声明与如何使用