課前補充

轉義字元 ‘’

把 \ 後面的字元轉成正常文本

\r ：行結束

\n ：換行

\t ：制表符

多行字元串

字元串不能換行寫

var test = '\
    <div></div>\
    <span></span>\
    ';

把文本形式的回車轉義掉，多行字元串可以實作

字元串換行符 \n

RegExp 正規表達式

什麼是正規表達式？

正規表達式是構成搜尋模式（search pattern）的字元序列。

當您搜尋文本中的資料時，您可使用搜尋模式來描述您搜尋的内容。

正規表達式可以是單字元，或者更複雜的模式。

正規表達式可用于執行所有類型的文本搜尋和文本替換操作。

正規表達式的作用:比對特殊字元或有特殊搭配原則的字元的最佳選擇。

建立方式

字面量

var reg = /abc/;

正規表達式abc ：有一個比對字元串的規則叫abc

比對規則：包含abc字元片段（必須是abc，不能大小寫，不能分隔開

var reg = /abc/;
    var str = 'abcd';
    reg.test(str);      // 測驗字元串str是否含有規定片段（abc字元片段）
    // true

i ：ignoreCase 忽視大小寫

g : global 全局比對（查找所有比對而非在找到第一個比對後停止）

m : 多行比對

new RegExp();

// var reg = new RegExp('規則','屬性');

    var reg = new RegExp('abc','i');
    var str = 'abcd';
    reg.test(str);  

    var reg1 = /abc/;
    var reg = new RegExp(reg1);
    // 樣子一樣但是彼此獨立
    var reg = RegExp(reg1);
    // 本質同一個正規表達式，隻不過是不同引用，兩個鑰匙指向同一個房間

修飾符 / 屬性

// i ：ignoreCase  忽視大小寫
    var reg1 = /abc/;
    var reg2 = /abc/i;
    var str1 = 'aBcde';
    console.log(reg1.test(str1));    // false
    console.log(reg2.test(str1));    // true

    // g : global  全局比對（查找所有比對而非在找到第一個比對後停止）
    var reg11 = /ab/;
    var reg22 = /ab/g;
    var str2 = 'ababababab';
    console.log(str2.match(reg11));  // ["ab"]
    console.log(str2.match(reg22));  // ["ab", "ab", "ab", "ab", "ab"]
    
    // m : 多行比對
    var reg111 = /^a/g;   // ^a ：開頭的a
    var reg222 = /^a/gm;
    var str3 = 'abcd\na';    //多行字元串，不是寫起來多行
    console.log(str3.match(reg111));   // ["a"]
    console.log(str3.match(reg222));   // ["a", "a"]

方括号

方括号用于查找某個範圍内的字元:

表達式          描述
[abc]   查找方括号之間的 任何字元。
[^abc]  查找任何 不在 方括号之間的字元。
[0-9]   查找任何從 0至9 的數字。
[a-z]   查找任何從 小寫a到小寫z 的字元。
[A-Z]   查找任何從 大寫A到大寫Z 的字元。
[A-z]   查找任何從 大寫A到小寫z 的字元。
[adgk]  查找給定集合 内 的任何字元。
[^adgk] 查找給定集合 外 的任何字元。
(red|blue|green)    查找任何指定的選項。

const reg = /[1234567890][1234567890][1234567890]/g;    // 一個方括号代表一位，裡面是區間，該表達式為取三個數字連在一起的片段
    const str = '12334fgsfj5465hgjf';      // 三位一看，不會翻過去 例如1234ui 其中符合比對規則的有：123
    console.log(str.match(reg));   // ["123", "546"]
    
    const reg2 = /[ab][cd][d]/g;    
    const str2 = 'abcd';      
    console.log(str2.match(reg2));  // ["bcd"]
    
    const reg3 = /(abc|bcd)[0-9]/g;    
    const str3 = 'bcd8';      
    console.log(str3.match(reg3));   // ["bcd8"]

元字元

元字元(Metacharacter）是擁有特殊含義的字元:

元字元描述

. 查找單個字元，除了換行和行結束符。

\w 查找單詞字元。

\W 查找非單詞字元。

\d 查找數字。

\D 查找非數字字元。

\s 查找空白字元。

\S 查找非空白字元。

\b 比對單詞邊界。

\B 比對非單詞邊界。

\0 查找 NUL字元。

\n 查找換行符。

\f 查找換頁符。

\r 查找回車符。

\t 查找制表符。

\v 查找垂直制表符。

\xxx 查找以八進制數xxx規定的字元。

\xdd 查找以十六進制數dd規定的字元。

\uxxxx 查找以十六進制數xxxx規定的 Unicode字元。

\w === [0-9A-z_] : 取0-9，A-z，_ 區間的數

\W === [^\w] : 非\w

\d === [0-9]

\D === [^\d]

\s : 空白字元【空格符、制表符、回車符、換行符、垂直換行符、換頁符】

\s === [ \t\r\n\v\f] 在正規表達式裡寫空格就表示比對一個空格

\S === [^\s]

\b === 單詞邊界

\B === 非單詞邊界

const reg = /\bcde\b/g;
    const str = 'abc cde efg';
    console.log(str.match(reg));   // null

    const reg = /\bcde\B/g;
    const str = 'abc cdeefg';
    console.log(str.match(reg));   // ["cde"]

\t : 不是視覺上的\t，而是真是的文本\t

Unicode字元：十六進制，最多16層，不同層包含資訊不同，可以表示漢字

\u010000 - \u01ffff 第一層

\u020000 - \u02ffff 第二層

…

\u100000 - \u10ffff 第十六層

第一層可以省去01，直接寫為 \u0000 - \uffff

其他層要寫層數

const reg = /\u65e9\u4e0a\u597d/g;  
    // reg = /[\u0000-\ua000]/g;
    const str = '早上好';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["早上好"]

能比對所有

[\s\S]

集合并上補集

. === [^\r\n]

量詞

量詞：表示數量的詞，幾個，一把

量詞               描述
n+      比對任何包含 至少一個 n 的字元串。
n*      比對任何包含 零個或多個 n 的字元串。
n?      比對任何包含 零個或一個 n 的字元串。
n{X}    比對包含 X個n 的序列的字元串。
n{X,Y}  比對包含 X至Y個n 的序列的字元串。
n{X, }  比對包含至少 X個n 的序列的字元串。
n$      比對任何 結尾為n 的字元串。
^n      比對任何 開頭為n 的字元串。
?=n     比對任何 其後緊接指定字元串n 的字元串。
?!n     比對任何 其後沒有緊接指定字元串n 的字元串。

n+ n出現了{1. }次 1 - infinity 貪婪

n* n出現了{0, }次 0 - infinity 貪婪

n? n出現了{0,1}次 0 - 1

const reg = /\w+/g;
    const str = 'abcds';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["abcds"]

    const reg = /\w*/g;
    const str = 'abcd';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["abcd", ""]
    // 第一次比對 * = 3， 第二次比對 * = 0

    const reg = /\d*/g;   // 數字
    const str = 'abcd';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["", "", "", ""]
    // 第一次比對 * = 0，第二次比對 * = 0，第三次比對 * = 0，第四次比對 * = 0  
    
    const reg = /\w?/g;
    const str = 'aaa';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["a", "a", "a", ""]

n{X} X個n

n{X,Y} X到Y個n 貪婪

n{X, } 至少X個n 貪婪

const reg = /\w{3}/g;
    const str = 'aaaaaaaaaaaaaa';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["aaa", "aaa", "aaa", "aaa"]

    const reg = /\w{3,5}/g;
    const str = 'avbsdsghg';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["avbsd", "sghg"]

    const reg = /\w{3,}/g;
    const str = 'avbsdsghg';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["avbsdsghg"]

是幾個\w，不是取一個\w 再乘量詞，不能保證都相同例：

["avbsd", "sghg"]

n$ 比對任何結尾為n 的字元串。

^n 比對任何開頭為n 的字元串。

const reg1 = /^abc/g;
    const reg2 = /fg$/g;
    const str = 'abcdefg';
    console.log(str.match(reg1));    // ["abc"]
    console.log(str.match(reg2));    // ["fg"]

正向預查正向斷言

const str = 'abaaaa';
    const reg = /a(?=b)/g;  // a後面跟着b，但是b不參與選擇
    const reg1 = /a(?!b)/g; 
    console.log(str.match(reg));    // ["a"]
    console.log(str.match(reg1));   // ["a", "a", "a", "a"]

RegExp 對象屬性

屬性描述

global RegExp 對象是否具有标志g。

ignoreCase RegExp對象是否具有标志i。

multiline RegExp對象是否具有标志m。

source 正規表達式的源文本。字元串展示

lastIndex 一個整數，标示開始下一次比對的字元位置。(光标位置，可以修改)

RegExp 對象方法

方法描述

compile 編譯正規表達式。

exec 檢索字元串中指定的值。傳回找到的值，并确定其位置。

test 檢索字元串中指定的值。傳回true或false。

const reg = /ab/g;
    const str = 'abababab';

    console.log(reg.lastIndex);    // 0
    console.log(reg.exec(str));    
    // ["ab", index: 0, input: "abababab", groups: undefined]
    // 類數組，index 比對到片段時光标的位置

const str = 'aaaabbbc';
    const reg = /(\w)\1\1/g;
    // (\w) : 子表達式
    // \1 : 反向引用第一個子表達式的内容
    // (\w)\1 : 第一個子表達式比對到的值copy一下，例如第一個子表達式比對到a，則正規表達式為aa
    console.log(str.match(reg));    // ["aaa", "bbb"]

    // ((\w)\1(\w)\2) : \1 --> 最外面的括号，，\2 --> 裡面第一個括号 


    const str = 'aabb';
    const reg = /(\w)\1(\w)\2/g;
    console.log(str.match(reg));    // ["aabb"]
    console.log(reg.exec(str));     // ["aabb", "a", "b", index: 0, input: "aabb", groups: undefined]

支援正規表達式的String對象的方法

方法描述

search 檢索與正規表達式相比對的值。

match 找到一個或多個正規表達式的比對。

replace 替換與正規表達式比對的子串。

split 把字元串分割為字元串數組。

// str.match();
    const str = 'aabb';
    const reg = /(\w)\1(\w)\2/;
    const reg2 = /(\w)\1(\w)\2/g;
    console.log(str.match(reg));    // ["aabb", "a", "b", index: 0, input: "aabb", groups: undefined]
    console.log(str.match(reg2));   // ["aabb"]
    
// str.search();
    const str = 'cdfaabb';
    const reg = /(\w)\1(\w)\2/;
    console.log(str.search(reg));   // 3

    const str = 'cdfa';
    const reg = /(\w)\1(\w)\2/;
    console.log(str.search(reg));   // -1

// str.split()
    const str = 'cdfsaf4dsgfds5bvj8dfgdha';
    const reg = /(\d)/g;
    console.log(str.split(reg));    // ["cdfsaf", "4", "dsgfds", "5", "bvj", "8", "dfgdha"]
    const reg1 = /\d/g;
    console.log(str.split(reg1));    // ["cdfsaf", "dsgfds", "bvj", "dfgdha"]
    
// str.replace()
    const str = 'aa';
    console.log(str.replace('a','b'));  // ba
    // 沒有通路全局的能力，隻能通路一個 
    const reg = /a/g;
    console.log(str.replace(reg,'b'));  // bb

    const reg = /(\w)\1(\w)\2/g;
    const str = 'aabb';
    // console.log(str.replace(reg, '$2$2$1$1'));  // bbaa
    // $ : 表示子表達式，$1: 子表達式1

    console.log(str.replace(reg, function($, $1, $2) {      // 正規表達式比對的結果，第一個子表達式内容，第二個子表達式内容
        return $1 + $2 + $2 + $ + '123ab';  // 字元串形式
    }));

str.toUpperCase() : 變大寫
str.toLowerCase() : 變小寫

在表達式後加？，滿足條件，能少絕不多 ( 非貪心比對 )

const reg = /a+?/g;
    // const reg = /a{1,3}?/g;    // ["aa", "aa", "aa"]
    // const reg = /a+?/g;        // ["", "", "", "", "", "", "", ""]
    const str = 'aaaaaaa';
    console.log(str.match(reg));    // ["a", "a", "a", "a", "a", "a", "a"]

$ 有特殊含義，如果想要用$字元，需要寫兩個 $$（相當于轉義字元 \\ \? \*

JS高程三

1.渲染模式

在多年以前（IE6誕生以前)，各浏覽器都處于各自比較封閉的發展中（基本沒有相容性可談)。随着WEB的發展，相容性問題的解決越來越顯得迫切，随即，各浏覽器廠商釋出了按照标準模式（遵循各廠商制定的統一标準)工作的浏覽器，比如IE6就是其中之一。但是考慮到以前建設的網站并不支援标準模式，是以各浏覽器在加入标準模式的同時也保留了混雜模式（即以前那種未按照統一标準工作的模式，也叫怪異模式)。

三種标準模式的寫法

1.<!DOCTYPE html>
2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<script>
        // var test = '\
        // <div></div>\
        // <span></span>\
        // ';
        // console.log(test);

        // var reg = /abc/;
        // var str = 'abcd';
        // console.log(reg.test(str));


        // i ：ignoreCase  忽視大小寫
        var reg1 = /abc/;
        var reg2 = /abc/i;
        var str1 = 'aBcde';
        console.log(reg1.test(str1));    // false
        console.log(reg2.test(str1));    // true

        // g : global  全局比對（查找所有比對而非在找到第一個比對後停止）
        var reg11 = /ab/;
        var reg22 = /ab/g;
        var str2 = 'ababababab';
        console.log(str2.match(reg11));  // ["ab"]
        console.log(str2.match(reg22));  // ["ab", "ab", "ab", "ab", "ab"]
        
        // m : 多行比對
        var reg111 = /^a/g;   // ^a ：開頭的a
        var reg222 = /^a/gm;
        var str3 = 'abcd\na';    //多行字元串，不是寫起來多行
        console.log(str3.match(reg111));   // ["a"]
        console.log(str3.match(reg222));   // ["a", "a"]


    </script>



    <script>
//         表達式          描述
// [abc]   查找方括号之間的 任何字元。
// [^abc]  查找任何 不在 方括号之間的字元。 [^a] : 非a
// [0-9]   查找任何從 0至9 的數字。
// [a-z]   查找任何從 小寫a到小寫z 的字元。
// [A-Z]   查找任何從 大寫A到大寫Z 的字元。
// [A-z]   查找任何從 大寫A到小寫z 的字元。
// [adgk]  查找給定集合 内 的任何字元。
// [^adgk] 查找給定集合 外 的任何字元。
// (red|blue|green)    查找任何指定的選項。|：或

        const reg = /[1234567890][1234567890][1234567890]/g;    // 一個方括号代表一位，裡面是區間，該表達式為取三個數字連在一起的片段
        const str = '12334fgsfj5465hgjf';      // 三位一看，不會翻過去 例如1234ui 其中符合比對規則的有：123
        console.log(str.match(reg));   // ["123", "546"]
        
        const reg2 = /[ab][cd][d]/g;    
        const str2 = 'abcd';      
        console.log(str2.match(reg2));  // ["bcd"]
        
        const reg3 = /(abc|bcd)[0-9]/g;    
        const str3 = 'bcd8';      
        console.log(str3.match(reg3));   // ["bcd8"]

        



 
    </script>

JS-RegExp 正規表達式課前補充RegExp 正規表達式

課前補充

RegExp 正規表達式

什麼是正規表達式？

建立方式

修飾符 / 屬性

方括号

元字元

量詞

RegExp 對象屬性

RegExp 對象方法

支援正規表達式的String對象的方法

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條