正則(2) 及 JS盒子模型

mathch 和 exec 的區別

• 在不加全局修飾符 g 的時候，二者功能是同樣的
• 加上 g 以後，match能夠把全部的大正則匹配的內容都捕獲到，可是會丟掉小分組的捕獲

splice ： 能夠結合正則使用，能夠直接把正則寫着split的括號中

• var str = 'a-3_34+rgdfv=gegd?terdgdf'
• str.split(/[-+_=?]/) 把字符串中的字母和數字拆出來

replace 替換

var str = 'sdFGHjKLlkjHasdwaGHJD';
var reg = str.replace(/([a-z]*)([A-Z]*)/g,function($0,$1,$2){
    return $1.toUpperCase() + $2.toLowerCase()
})
//$0表明大正則匹配到的字符，$1表明第一個小分組...
//把字符串中的小寫替換成大寫，大寫替換成小寫
複製代碼

字數最多的字符串

var str = 'fegdrthtyugkilkeweewhewefghrreeddqdsedwqgteqweefdfdfffddatdaqqwfwqwdg'
 function getMax(str){
     str = str.split('').sort().join('') //把字符串進行排序
     let key='',num=0;
     str.replace(/(\w)\1*/g,function($0,$1){
         if($0.length > num){
             num = $0.length
             key = $1
         })
         return{
             key,num
         }
     }
 }
 getMan(str)
複製代碼

模板數據

function render(template,data){
    return template.replace(/\{\{(\w*)\}\}/g,function($0,$1){
        returnr data[$1] ? data[$1] : '未知'
    }
}
let template  = '我是{{name}},年齡{{age}},性別{{sex}}'
let data = {
    name:'姓名'，
    age:18
}
render(template,data)
複製代碼

function timeFormate(template,time){
    template = template || '今天是{{0}}年{{1}}月{{2}}日-{{3}}時{{4}}分{{5}}秒'
}
time = time ? new Date(time) : new Date;
let ary = [time.getFullYear(),time.getMonth()+1,time.getDate(),time.getHours(),time.getMinutes(),timegetSeconds()]
return template.replace(/\{\{(\w*)\}\}/g,function(a,b){
    return ary[b]
})
timeFormate()
複製代碼

千分符

function moneyFormate(str){
    let s = '';
    return str.splice(/(\d{1,3})(?=(\d{3})+$)/g, '$1,')
}
moneyFormate('123456789')
複製代碼

JS盒子模型

• JS盒子模式有三個系列 client offset scroll

let box = document.getElementById('box')
box.clientWidth;// 盒子的寬度 加上 左右的 padding
box.clientHeight;// 盒子的高度 加上 上下的 padding
box.clientLeft;// 左邊框的寬度
box.clientTop;// 上邊框的寬度
-
box.offsetWidth; // clientWidth 的基礎上 + 左右的border
box.offsetHeight;
box.offsetLeft; // 當前元素的 外邊框 到上級參照物的 內邊框 的偏移量
box.offsetTop;
box.offsetParent;// 上級參照物；指的是上層有定位的那一級元素，若都沒有定位，則直到找到body
-
box.scrollWidth;
//在沒有內容溢出的狀況下，等同於 client
//有內容溢出，可是盒子沒有設置overflow屬性，那麼寬度值是 內容高度 加上 左padding
//設置了overflow屬性，值就是 內容寬度加上 左右padding
box.scrollHeight;
box.scrollLeft;// 捲去的內容的寬度
box.scrollTop;
複製代碼