JS補充-正則和常用式樣庫

一、Bootstrap--推薦！
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用於 HTML、CSS 和 JS 開發的開源工具集。利用我們提供的 Sass 變量和大量 mixin、響應式柵格系統、可擴展的預製組件、基於 jQuery 的強大的插件系統，能夠快速爲你的想法開發出原型或者構建整個 app 。

二、jQuery UI--輕推。。
jQuery UI 是建立在 jQuery JavaScript 庫上的一組用戶界面交互、特效、小部件及主題。無論您是創建高度交互的 Web 應用程序還是僅僅向窗體控件添加一個日期選擇器，jQuery UI 都是一個完美的選擇。
jQuery UI 包含了許多維持狀態的小部件（Widget），因此，它與典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您學會使用其中一個，您就知道如何使用其他的小部件（Widget）。

三、jQuery Easy UI--包含了很多JS定義的元素，修改和調用特別複雜
jQuery EasyUI 是一個基於 jQuery 的框架，集成了各種用戶界面插件。

四、正則：

   
    **1、RegExp 對象方法：**
         正則表達式在前，字符串在後

        RegExp.test(字符串)：字符串符合正則返回True，不符合返回False
        RegExp.exec(字符串)：字符串符合正則返回字符串的值，否則返回Null，如果使用（|），返回的是數組。

    //E-mail檢測,用戶名可以支持帶一個點
    mail_exp=/^\w+\.?\w+@\w+\.\w+\.?\w+$/
    mail_str1='[email protected]'      //格式識別 結果是mail_str1的字符串
    mail_str2='[email protected]'     //不識別 結果null
    result1=mail_exp.exec(mail_str2)
    document.write(result1)
    
    //手機號檢測，滿足11位，並規定以指定數字開頭
    mobile_exp=/^(138|139|130|131)\d{8}$/
    mobile_str1='13112345678'      //格式識別 結果是[13112345678,131]的數組
    mobile_str2='18012345678'     //不識別 結果null
    result1=mobile_exp.exec(mobile_str2)
    document.write(result1[0])

      **2、支持正則表達式的 String 對象的方法：**      

        search檢索與正則表達式相匹配的起始索引值。未匹配返回-1
        match找到一個或多個正則表達式的匹配結果，未匹配返回null，/g全局模式下，返回結果數組。
        replace替換與正則表達式匹配的子串，返回替換後新的字符串。未指定替換，使用undefined，使用/g全局模式下，替換所有。

        split把字符串分割爲字符串數組。

    //search
    mobile_exp=/\d+/
    mobile_str1='dddd2422'     
    mobile_str2='ddddafff' 
    result1=mobile_str1.search(mobile_exp)   // 結果是4
    result2=mobile_str2.search(mobile_exp)   // 結果是-1

    //match
    mobile_exp=/\d+/g
    mobile_str1='kkk13112345dd6788'    
    result1=mobile_str1.match(mobile_exp)    //結果是[13112345,6788 ]的數組
    mobile_exp2=/\d+/
    result2=mobile_str1.match(mobile_exp2)    //結果是13112345
    
    //replace
    mobile_exp=/\d+/g
    mobile_str1='dddd2422'     
    mobile_str2='ddd123ff456f' 
    result1=mobile_str1.replace(mobile_exp,'aaa')   // 結果是ddddaaa
    mobile_exp2=/\D+/g
    result2=mobile_str2.replace(mobile_exp2)   // undefined123undefined456undefined  
    document.write(result2)
    
    //split
    mobile_str2='ddd123ff456f' 
    mobile_exp2=/\D+/
    result2=mobile_str2.split(mobile_exp2)   // [,123,456, ]

      **3、RegExp 對象屬性：**     

        constructor屬性返回對象的構造函數。返回值是函數的引用，不是函數名：

                JavaScript 正則表達式 constructor 屬性返回 function RegExp() { [native code] }
                JavaScript 數組 constructor 屬性返回 function Array() { [native code] }
                JavaScript 數字 constructor 屬性返回 function Number() { [native code] }
                JavaScript 字符串 constructor 屬性返回 returns function String() { [native code] }
                如果一個變量是數組你可以使用 constructor 屬性來定義。       

 

        global判斷是否設置了 "g" 修飾符

                正則表達式.global，返回true或false

        ignoreCase判斷是否設置了 "i" 修飾符

                正則表達式.ignoreCase，返回true或false

        lastIndex匹配的起始位置，該屬性只有設置標誌 g 才能使用。=號賦值，不帶=號獲取值

var str="The rain in Spain stays mainly in the plain";
var patt1=/ain/g;
patt1.lastIndex=20;   //改變值，搜索後的lastIndex值會變。
document.write(patt1.exec(str));
document.write(patt1.lastIndex);

        

        multiline判斷是否設置了 "m" 修飾符，設置返回True,否則返回False

        var patt1=/RUN/m;            返回true

        source返回正則表達式的內容，不包含參數。

var patt1=/\w+\.{6}/g;
document.write(patt1.source); //返回 \w+\.{6}