正则(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;
复制代码