【轮子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); //返回渲染后的结果

 

posted @ 2019-06-11 20:52 海瑞菌·博客 阅读(...) 评论(...) 编辑 收藏