【轮子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); //返回渲染后的结果
博客园作者:herry菌朋友,看到这里,关注作者的公众号吧,不漏掉更新哦
![]()