分享前端开发常用代码片段

分享开发中常用的一些代码片段，我们的目标是早下班、不加班，哈哈~~

1、手机号隐藏中间4位

//手机号脱敏
function mobile(data) {return data.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}

2、证件号脱敏，包括但不限于身份证

//身份证脱敏 -- 1
function idCard(data) {return data.replace(/(\d{4})\d*([0-9xX]{4})/, "$1******$2");
}//身份证脱敏 -- 2
function idCard(data) {if(data.toString().length == 18) {return data.slice(0,2) + '****************' + data.slice(16,18)} else if(data.toString().length == 15) {return data.slice(0,2) + '***********' + data.slice(13,15)}
}//证件脱敏，data->数据，beforeLen->前置位数，afterLen->后置位数
function newIdCard(data, beforeLen, afterLen) {let dataLenth = data.length - beforeLen - afterLenlet middleStr = ''for (let i = 0; i < dataLenth; i++) {middleStr += '*'}return data.slice(0, 2) + middleStr + data.substring(data.length - afterLen)
}

3、金额处理，经常会遇到数字相乘或相除得问题，但结果往往不是我们想要得，例如12.32 * 7 结果是86.24000000000001；

//金额
export function money(num){return num >= 10000 ? parseFloat(num) * 10000/100000000+'万' : num
}

4、返回不同类型得日期

//格式化时间
export function dateFormat(time,fmt){return fnDateFormat(time,fmt)
}export default function(time,fmt){var fmt = fmt || 'yyyy-MM-dd HH:mm:ss';var time = time ? new Date(time) : new Date();var o = {   "M+" : time.getMonth()+1,                 //月份   "d+" : time.getDate(),                    //日   "H+" : time.getHours(),                   //小时   "m+" : time.getMinutes(),                 //分   "s+" : time.getSeconds(),                 //秒"S"  : time.getMilliseconds()             //毫秒   };if(/(y+)/.test(fmt))fmt=fmt.replace(RegExp.$1, (time.getFullYear()+"").substr(4 - RegExp.$1.length));for(var k in o)if(new RegExp("("+ k +")").test(fmt))fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));return fmt;
}

5、通过身份证获取年龄、性别、生日

//通过身份证获取年龄 & 生日
const idCardBirthday = function(data){//获取出生年月日var year = data.substring(6,10);var month = data.substring(10,12);var day = data.substring(12,14);return `${year}-${month}-${day}`
}//通过身份证获取性别
const idCardGender = function(data){//1 男 2 女    return parseInt(data.slice(-2, -1)) % 2 == 1 ? 1 : 2;
}const birthdayAge = function(str, type) {var type = type || 'year';//补零let zeroize = function(value) {if (value < 10) {value = '0' + value}return value}var birthDay = new Date(str)var yearBirth = birthDay.getFullYear();var monthBirth = birthDay.getMonth() + 1;var dayBirth = birthDay.getDate();var myDate = new Date();var monthNow = myDate.getMonth() + 1;var dayNow = myDate.getDate();var age = myDate.getFullYear() - yearBirth;if (monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)) {age--;}return age
}export default {idCardBirthday ,idCardGender,birthdayAge
}

6、手机号、身份证正则表达式

//手机号
const mobile = /^[1]+\d{10}$/;//身份证
//const idCard = /(^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$) | (^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;    //18位 & 15位
const idCard = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

7、邮箱、纳税号正则表达式

//网址
const domain = /(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;//邮箱
const email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$///纳税号
const corporationTax = /^[0-9A-Z]{15,20}$/

8、PDF文件下载

/*** 文件链接转文件流下载--主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题* @param url  ：文件链接* @param fileName  ：文件名;* @param type  ：文件类型;*/
export function fileLinkToStreamDownload(url, fileName, type) {let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;if (!reg.test(url)) {throw new Error("传入参数不合法,不是标准的文件链接");} else {let xhr = new XMLHttpRequest();xhr.open('get', url, true);xhr.setRequestHeader('Content-Type', `application/${type}`);xhr.responseType = "blob";xhr.onload = function () {if (this.status == 200) {//接受二进制文件流var blob = this.response;downloadExportFile(blob, fileName, type)}}xhr.send();}
}/***下载导出文件* @param blob  ：返回数据的blob对象或链接* @param tagFileName  ：下载后文件名标记* @param fileType  ：文件类 word(docx) excel(xlsx) ppt等*/
function downloadExportFile(blob, tagFileName, fileType) {let downloadElement = document.createElement('a');let href = blob;if (typeof blob == 'string') {downloadElement.target = '_blank';} else {href = window.URL.createObjectURL(blob); //创建下载的链接}downloadElement.href = href;downloadElement.download = tagFileName + '.' + fileType; //下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素if (typeof blob != 'string') {window.URL.revokeObjectURL(href); //释放掉blob对象}}

9、判断是否微信环境、小程序环境

var isWeiXin = function() {var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == 'micromessenger') {return true;} else {return false;}
}export function isMiniProgram(callback) { //是否为小程序环境//是否在微信环境if (!isWeiXin()) {callback(false);} else {//微信API获取当前运行环境wx.miniProgram.getEnv((res) => {if (res.miniprogram) { //小程序环境callback(true);} else {callback(false);}})}
}

10、数组去重

datas = [1,4,6,78,768,34,344,3,6,78,55,5,38,'qq','aa','qq']
let datas = datas.filter((item, index, arr) => {return arr.indexOf(item, 0) === index;
})
console.log(datas) //[1, 4, 6, 78, 768, 34, 344, 3, 55, 5, 38, 'qq', 'aa']

11、删除Object中的null和undefined

//删除null和Unfined
const removeNullUndefined = objText => {Object.keys(objText ).forEach(item => {if (!objText[item] && objText[item] != 0) {delete objText[item]}})return objText;
}

12、比较当前日期是否在时间段之内

countTime(startTime, endTime){let nowDate = new Date(),startDate = new Date(startTime),endDate = new Date(endTime)if(nowDate >= startDate && nowDate <= endDate){return true}return false
}

13、阻止默认行为

$('#button').on('click', function (event) {event.preventDefault();
});

14、阻止冒泡

$('#button').on('click', function (event) {event.stopPropagation();
});

15、手机端禁止页面在浏览器滚动

//可以在根元素body上添加preventDefault方法
<body ontouchmove="event.preventDefault()" >//或者  在滑动事件touchMove中添加
document.addEventListener('touchmove', function(event) {event.preventDefault();
})

16、获取浏览器滚动条的高度

document.documentElement.scrollTop || document.body.scrollTop

17、发送验证码

//获取短信验证码倒计时
countdown(maxTime) {if (maxTime > 1) {maxTime--;this.verityText = `${maxTime}s后重发`;setTimeout(() => {this.countdown(maxTime);}, 1000)} else {this.verityText = '重新发送';this.verityCodeFlag = false;}
},

18、删除对象中某属性

let params = {planCode: '',orgCode: '0001',personCode: '',id: '10'
}//方案一 delete属性
delete params.id  //对象名.属性名//方案二 es6解构
let { planCode,...params} = params ;
console.log(params)
//{orgCode: '0001', personCode: '', id: '10'}

19、

let params = {planCode: '',orgCode: '0001',personCode: '',id: '10'
}// 方案1
var d = JSON.parse(JSON.stringify(params,function(key,value){if(value == ''|| value == null || value == undefined){delete params[key]}else{return value;}
}))console.log(d)
// {orgCode: '0001', id: '10'}// 方案2
for(let item in params){if(params[item] == '') {delete params[item]}
}

持续更新。。。

分享前端开发常用代码片段相关推荐

前端开发常用代码片段（下篇）
二十二.正则表达式 //验证邮箱 /^\w @([0-9a-zA-Z] [.]) [a-z]{2,4}$/ //验证手机号 /^1[3|5|8|7]\d{9}$/ //验证URL /^http:\/\ ...
前端开发常用代码片段
作者:WEBING segmentfault.com/a/1190000014700549 一.预加载图像如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像. 二.检 ...
iOS开发常用代码片段：总有你用得上的功能
使用方法:查看文章目录,查找需要的功能. 代码片段目录 1.禁止手机睡眠 2. 隐藏某行cell 3.禁用button高亮 4..切换window的根控制器 5.去除数组中重复的对象 6.给一个vie ...
加密php代码一担粮,分享8个PHP开发常用代码片段_后端开发
php字符串转时间戳_后端开发在php中可以使用"strtotime()"函数将字符串转为时间戳,该函数用于把字符串转换为时间戳,其语法是"strtotime(time ...
html5默认加载s文件夹,『总结』web前端开发常用代码整理
IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. 条件注释只能用于IE5以上,IE1 ...
Android 开发常用代码片段
1.图片旋转 Bitmap bitmapOrg = BitmapFactory.decodeResource(this.getContext().getResources(), R.drawable. ...
前端常用代码片段(四)
前端常用代码片段(一) 点这里前端常用代码片段(二) 点这里前端常用代码片段(三) 点这里前端常用代码片段(四) 点这里前端常用代码片段(五) 点这里前端常用代码片段(六) 点这里 1.简述 ...
前端开发常用的Chrome插件推荐
谷歌浏览器简单清爽的界面.因其丰富的插件,成为前端开发者喜欢的浏览器.而易用的插件可以帮助开发者减少开发过程中的大量工作量,带来更加强大的效果.今天给大家推荐几个在程序员中口碑不错非常实用的Chrom ...
CDN公共库、前端开发常用插件一览表(VendorPluginLib)
============================================================= ==========================前端CDN公共库==== ...

分享前端开发常用代码片段

1、手机号隐藏中间4位

2、证件号脱敏，包括但不限于身份证

3、金额处理，经常会遇到数字相乘或相除得问题，但结果往往不是我们想要得，例如12.32 * 7 结果是86.24000000000001；

4、返回不同类型得日期

5、通过身份证获取年龄、性别、生日

6、手机号、身份证正则表达式

7、邮箱、纳税号正则表达式

8、PDF文件下载

9、判断是否微信环境、小程序环境

10、数组去重

11、删除Object中的null和undefined

12、比较当前日期是否在时间段之内

13、阻止默认行为

14、阻止冒泡

15、手机端禁止页面在浏览器滚动

16、获取浏览器滚动条的高度

17、发送验证码

18、删除对象中某属性

分享前端开发常用代码片段相关推荐

最新文章

热门文章