【轮子01】常用字符串操作方法

开发过程中经常需要用到重复的方法。而这些重复的方法就是轮子。让未来遇到的一些问题可以通过这些方法进行解决。当然网上的轮子固然好用，但如果自己写的肯定是最好的，如果自己封装，那最好也要想办法解读它。

一枚活跃于前端圈的90后码农

不定期分享互联网前端开发经验内容

微^信^公^众^号：Web前端Talk

陪你走在技术成长的路上，欢迎关注！

对象转url参数

/*
指定对象转url参数
param 一个对象(一级对象)
*/
function urlEncode(param, key, encode) {
    if (param == null) return '';
    var paramStr = '';
    var t = typeof(param);
    if (t == 'string' || t == 'number' || t == 'boolean') {
        paramStr += '&' + key + '=' + ((encode == null || encode) ? encodeURIComponent(param) : param);
    } else {
        for (var i in param) {
            var k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '.' + i)
            paramStr += urlEncode(param[i], k, encode)
        }
    }
    return paramStr;
}
//调用
console.log(urlEncode({a:1,b:2}))//&a=1&b=2

获取url中的参数值

/*
获取当前url中的指定参数值
name 指定参数名
*/
function getQueryString(name){
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}
//调用
console.log(getQueryString("a"))//1
//若当前url为：http://xxx.com?a=1，则返回1，若没有参数a，则返回null


/*
获取指定url中的指定参数值
url 指定url
name 指定参数名
*/
function getUrlQueryString(url,name){
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var s=url.indexOf("?");
    var r = url.substring(s+1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}
//调用
getUrlQueryString("http://www.baidu.com?a=2&b=3","a")//2

更改url的访问参数（增加参数、修改参数）

/*
更改url的访问参数（增加参数、修改参数）
url 你要修改的url
params 你要加入的参数 json格式
*/
function extendUrlSearch(url,params){
    var urlSearch = url.split('?')[1];
    var tempObj = {};
    var paramsArr = []
    var urlHash = '';
    if (urlSearch) {
        // 如果url中有hash，则会包含
        urlSearch = urlSearch.split('&');
        // 提取查询参数到对象
        urlSearch.map(function (item, i) {
            // 带上原有的hash
            if (item.indexOf('#') > 0) {
                urlHash = item.split('#')[1]
                item = item.split('#')[0]
            }
            var key = item.split('=')[0],
            val = item.split('=')[1];
            tempObj[key] = val
        })
    }
    // 添加参数, 会覆盖同名key
    Object.assign(tempObj, params);
    Object.keys(tempObj).map(function (k) {
        paramsArr.push(k + '=' + tempObj[k])
    })
    url = url.split('?')[0] + '?' + paramsArr.join('&')
    if (urlHash) {
        url += '#' + urlHash
    }
    return url;
}
//调用

console.log(extendUrlSearch("https://www.baidu.com/",{a:1,b:2}))//https://www.baidu.com/?a=1&b=2

生成指定位数内的随机数

/*
生成指定位数内的随机数
length 生成的随机数最大位数
*/
function random(length){
    var l = '1',
        length = length ? length : 6;
    for (var i = 0; i < length; i++) {
        l += '0';
    }
    l = Number(l);
    return Math.floor(Math.random() * l);
}
//调用
console.log(random(2))//0-100之间的整数 不包含0/100

对象转数组

/*
对象转数组
obj 需要转换的对象
*/
function toArray(obj){
    var arr = [];
    for (var k in obj) {
        arr.push(obj[k]);
    }
    return arr;
}
//调用
console.log(toArray({a:1,b:2,c:3}))//[1,2,3]

模板拼装字符串（根据指定的模板和提供的数据，生成字符串。常用于dom生成。类似jsx）

/*
模板拼装字符串
tpl 模板 不能用. 用[]
obj 对象
*/
function tplConnect(tpl,obj){
    var rel = '';
    rel = tpl.replace(/\{([\w|\[|\]]+)\}/gi, function(word, key) {
        if (obj[key] != undefined) {//若obj含有这个属性，则返回obj的属性值
            return obj[key];
        } else {
            var oldWord = word;
            word = word.replace(/\{(\w+)\[(\w+)\]\}/gi, function(a, b, c, d) {
                if (obj[b] != undefined && obj[b][c] != undefined) {
                    return obj[b][c];
                } else {
                    return c;
                }
            })
            return word;
        }
    });
    return rel;
}
//调用
var tpl='<div>{a}</div><div>{b[x]}</div><div>{b[y]}</div>';
var obj={a:1,b:{x:2,y:3}}
console.log(tplConnect(tpl,obj));//<div>1</div><div>2</div><div>3</div>

获取当前时间信息

/*
获取当前时间信息
*/
function getDate(){
    var t={};
    var d=new Date();
    t.YY=d.getYear();//取当前年份(从1900年到现在过了几年)
    t.yyyy=d.getFullYear();//取完整年份(4位)
    t.MM=d.getMonth();//取当前月份(0-11 +1后才是)
    t.dd=d.getDate();//取当前几号
    t.day=d.getDay();//取当前星期几
    t.HH=d.getHours();//取当前小时数(0-23)
    t.mm=d.getMinutes();//取当前分钟数(0-59)
    t.ss=d.getSeconds();//取当前秒数(0-59)
    t.ms=d.getMilliseconds();//取当前毫秒数(0-999)
    t.localeDate=d.toLocaleDateString();//取当前日期(yyyy/MM/dd)
    t.localeTime=d.toLocaleTimeString();//取当前时间(下午hh:mm:ss)
    t.locale=d.toLocaleString();//取当前日期与时间(yyyy/MM/dd 下午hh:mm:ss)
    t.time=d.getTime();//取时间戳
    return t;
}
//调用
console.log(getDate())

url参数转对象

/*
url参数转对象
*/
function parseQueryString(url){
    var reg_url = /^[^\?]+\?([\w\W]+)$/,
    reg_para = /([^&=]+)=([\w\W]*?)(&|$)/g,
    arr_url = reg_url.exec(url),
    ret = {};
    if (arr_url && arr_url[1]) {
        var str_para = arr_url[1], result;
        while ((result = reg_para.exec(str_para)) != null) {
            ret[result[1]] = result[2];
        }
    }
    return ret;
}
//调用
console.log(parseQueryString("http://xxx.com/?a=1&b=2"))//{a:1,b:2}

实现银行卡号的输入排序（每4位一个空格）

const formatSplitString=(str='',gap=1,sep=' ')=>{
    if(!str || str.length <gap) return str;
    let successArr=str.match(new RegExp("\\d{"+gap+"}","g"));//匹配成功成数组 //\d{4}/g
    let successStr=successArr.join('')//匹配成功的字符
    let errorStr=str.replace(successStr,'')//匹配失败的字符
    let resultStr=successArr.join(sep)+sep+errorStr;//拼接
    return resultStr;
}
console.log(formatSplitString('622848110110634315',4,' '))

模板字符串代码实现

let template = '你好，我们公司是{{ company }}，我们属于{{group.name}}业务线，我们在招聘各种方向的人才，包括{{group.jobs[0]}}、{{group["jobs"][1]}}等。';
let obj = {
    group: {
        name: '新制造',
        jobs: ['前端','后台']
    },
    company: '阿里'
}
function render (template, obj) {
    // 代码实现
    let newStr=template;
    let strArr=template.match(/\{\{(.*?)\}\}/g);
    strArr.map(function(str,i){
        let key=str.replace("{{","").replace("}}","").trim();
        let value=eval('obj.'+key)||"";
        newStr=newStr.replace(str,value)
    })
    console.log(newStr)
    document.getElementById("app").innerHTML=newStr;
}
render(template, obj); //返回渲染后的结果