前端必备正则处理方法

简介: 前端必备正则处理方法

1.解析 URL Params 为对象

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* 结 果
{ user: 'anonymous',
id: [ 123, 456 ], // 重复出现的 key 要组装成数组,能被转成数字的就转成数字类型
city: '北京', // 中⽂需解码
enabled: true, // 未指定值得 key 约定为 true
}
*/

使用正则方法

function parseParam(url) {
const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后⾯的字符串取出来
const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组
中let paramsObj = {};
// 将 params 存到对象中
paramsArr.forEach(param => {
if (/=/.test(param)) { // 处理有 value 的参数
let [key, val] = param.split('='); // 分割 key 和 value
val = decodeURIComponent(val); // 解 码
val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字
if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key,则添加⼀个值
paramsObj[key] = [].concat(paramsObj[key], val);
} else { // 如果对象没有这个 key,创建 key 并设置值
paramsObj[key] = val;
}
} else { // 处理没有 value 的参数
paramsObj[param] = true;
}
})
return paramsObj;
}

2.转化为驼峰命名


var s1 = "get-element-by-id"
//转 化 为 getElementById
var f = function(s) {
return s.replace(/-\w/g, function(x)
{ return x.slice(1).toUpperCase();
})
}

3.实现千位分隔符

// 保留三位⼩数
parseToMoney(1234.56); // return '1,234.56'
parseToMoney(123456789); // return '123,456,789'
parseToMoney(1087654.321); // return '1,087,654.321'

function parseToMoney(num) {
num = parseFloat(num.toFixed(3));
let [integer, decimal] = String.prototype.split.call(num, '.');
integer = integer.replace(/\d(?=(\d{3})+$)/g, '$&,');
return integer + '.' + (decimal ? decimal : '');
}

4.判断是否是电话号码

function isPhone(tel) {
var regx = /^1[34578]\d{9}$/;
return regx.test(tel);
}

5.验证是否是邮箱

function isEmail(email) {
var regx = /^([a-zA-Z0-9_\-])+@([a-zA-Z0-9_\-])+(\.[a-zA-Z0-9_\-])+$/;
return regx.test(email);
}

6.验证是否是身份证

function isCardNo(number) {
var regx = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return regx.test(number);
}
目录
相关文章
|
5月前
|
前端开发
前端切图:用正则替换手机号码
前端切图:用正则替换手机号码
28 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单4正则
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单4正则
28 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单3正则
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单3正则
48 0
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单3正则
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单2正则
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单2正则
30 0
|
10月前
|
前端开发 JavaScript
前端祖传三件套JavaScript的ES6+之各种扩展:字符串、数值、函数、数组、对象、正则.
在前端开发中,ES6+ 为 JavaScript 带来了各种扩展功能,包括字符串、数值、函数、数组、对象、正则等方面的增强。本文将介绍 JavaScript 中各种扩展的基本概念和使用方法。
104 0
|
前端开发
前端学习案例4-正则概述-字符组的简写
前端学习案例4-正则概述-字符组的简写
39 0
前端学习案例4-正则概述-字符组的简写
|
前端开发
前端学习案例7-正则-括号的用法
前端学习案例7-正则-括号的用法
59 0
前端学习案例7-正则-括号的用法
|
前端开发
前端学习案例8-正则-括号的用法
前端学习案例8-正则-括号的用法
59 0
前端学习案例8-正则-括号的用法
|
前端开发
前端学习案例10-正则-选择1
前端学习案例10-正则-选择1
48 0
前端学习案例10-正则-选择1
|
前端开发
前端学习案例9-正则-非捕获反向引用
前端学习案例9-正则-非捕获反向引用
48 0
前端学习案例9-正则-非捕获反向引用