正規表達式
function GetURLval(url) {
var vars ={},
hash;
if(!url) url = window.location.href;
var hashes = url.slice(url.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars[hash[0]]=decodeURIComponent(hash[1]);
}
return vars;
}
console.log(GetURLval());
console.log(GetURLval('?a=111&b=222&c=李四'));
function isString(str){
if(Object.prototype.toString.call(str) === "[object String]"){
console.log("是字元串");
return true;
}else{
console.log("不是字元串");
return false;
}
}
// e.g.: http://domain.com/path/to/picture.jpg?size=1280×960 -> picture.jpg
function getImageName(url) {
return isString(url) ? url.replace(/^.*\//, '').replace(/[\?&#].*$/, '') : '';
}
常用URL參數操作方法：
擷取單個參數
/**
* [getParam ]
* @param {String} name
* @param {String} url [default:location.href]
* @return {String|Boolean}
*/
function getParam(name, url) {
if(typeof name !== 'string') return false;
if (!url) url = window.location.href;
// 當遇到name[xx]時，對方括号做一下轉義為 name\[xxx\]，因為下面還需要使用name做正則
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
var results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
getParam('query','https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// "hello"
設定單個參數
/**
* [setParam 設定單個參數]
* @param {String} name
* @param {String|Number} val
* @return {String|Boolean}
*/
function setParam(name, val, url) {
if(typeof name !== 'string') return false;
if (!url) url = window.location.href;
var _name = name.replace(/[\[\]]/g, '\\$&');
var value = name + '=' + encodeURIComponent(val);
var regex = new RegExp(_name + '=[^&]*');
var urlArr = url.split('#');
var result = '';
if(regex.exec(url)){
result = url.replace(regex, value);
}else{
result = urlArr[0]+'&'+value+ (urlArr[1] || '');
}
return result
}
setParam('query','world','https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// "https://juejin.im/search?query=world&time=2017-11-12"
移除單個參數
/**
* [removeParam 移除單個參數]
* @param {String} name
* @param {String} url [default:location.href]
* @return {String|Boolean}
*/
function removeParam(name, url) {
if(typeof name !== 'string') return false;
if (!url) url = window.location.href;
var urlparts = url.split('?');
var prefix = encodeURIComponent(name + '=');
var pars = urlparts[1].split(/[&;]/g);
var i = 0, len = pars.length;
for (; i < len; i++) {
if (encodeURIComponent(pars[i]).lastIndexOf(prefix, 0) !== -1) {
pars.splice(i, 1);
}
}
url = urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '');
return url;
}
removeParam('query','https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// "https://juejin.im/search?time=2017-11-12"
擷取多個參數
/**
* [getParams 擷取多個參數]
* @param {String} names [多個用空格分割]
* @param {String} url [default:location.href]
* @return {[String|Boolean]}
*/
function getParams(names, url) {
if(typeof name !== 'string') return false;
var names = names.split(' ');
var result = {};
var i = 0,
len = names.length;
if (names.length === 0) return false;
for (; i < len; i++) {
result[names[i]] = getParam(names[i], url);
}
return result;
}
getParams('query time','https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// {query: "hello", time: "2017-11-12"}
設定多個參數
/**
* [setParams 設定多個參數]
* @param {Object} obj
* @param {String} url [default:location.href]
* @return {[String|Boolean]}
*/
function setParams(obj, url) {
var result = url || '';
if (Object.prototype.toString.call(obj) !== '[object Object]') return false;
for (var name in obj) {
result = setParam(name, obj[name], result);
}
return result;
}
setParams({a:111,b:222,query:'world'},'https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// "https://juejin.im/search?query=world&time=2017-11-12&a=111&b=222"
移除多個參數
/**
* [removeParams 移除多個參數]
* @param {String} names [多個用空格分割]
* @param {String} url [default:location.href]
* @return {[String|Boolean]}
*/
function removeParams(names, url) {
var result = url || '';
var names = names.split(' ');
var i = 0,
len = names.length;
if (names.length === 0) return false;
for (; i < len; i++) {
result = removeParam(names[i], result);
}
return result;
}
removeParams('query time','https://juejin.im/search?query=hello&time=2017-11-12')
// output:
// "https://juejin.im/search"
url hash 操作
/**
* [getHash 方法]
* @param {[String]} url [default:location.href]
* @return {[String]}
*/
function getHash(url) {
return decodeURIComponent(url ? url.substring(url.indexOf('#') + 1) : window.location.hash.substr(1));
}
/**
* [setHash 方法]
* @param {String} hash
*/
function setHash(hash) {
window.location.replace('#' + encodeURIComponent(hash));
}
/**
* [removeHash 方法]
*/
function removeHash() {
window.location.replace('#', '');
}
數字：^[0-9]*$
n位的數字：^\d{n}$
至少n位的數字：^\d{n,}$
m-n位的數字：^\d{m,n}$
零和非零開頭的數字：^(0|[1-9][0-9]*)$
非零開頭的最多帶兩位小數的數字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
帶1-2位小數的正數或負數：^(\-)?\d+(\.\d{1,2})?$
正數、負數、和小數：^(\-|\+)?\d+(\.\d+)?$
有兩位小數的正實數：^[0-9]+(.[0-9]{2})?$
有1~3位小數的正實數：^[0-9]+(.[0-9]{1,3})?$
非零的正整數：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
非零的負整數：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
非負整數：^\d+$ 或 ^[1-9]\d*|0$
非正整數：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非負浮點數：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
非正浮點數：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
正浮點數：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
負浮點數：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮點數：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
二、校驗字元的表達式
漢字：^[\u4e00-\u9fa5]{0,}$
英文和數字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
長度為3-20的所有字元：^.{3,20}$
由26個英文字母組成的字元串：^[A-Za-z]+$
由26個大寫英文字母組成的字元串：^[A-Z]+$
由26個小寫英文字母組成的字元串：^[a-z]+$
由數字和26個英文字母組成的字元串：^[A-Za-z0-9]+$
由數字、26個英文字母或者下劃線組成的字元串：^\w+$ 或 ^\w{3,20}$
中文、英文、數字包括下劃線：^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、數字但不包括下劃線等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
可以輸入含有^%&',;=?$\"等字元：[^%&',;=?$\x22]+ 12 禁止輸入含有~的字元：[^~\x22]+
三、特殊需求表達式
Email位址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
手機号碼：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
電話号碼(“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
國内電話号碼(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
身份證号(15位、18位數字)：^\d{15}|\d{18}$
短身份證号碼(數字、字母x結尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
帳号是否合法(字母開頭，允許5-16位元組，允許字母數字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密碼(以字母開頭，長度在6~18之間，隻能包含字母、數字和下劃線)：^[a-zA-Z]\w{5,17}$
強密碼(必須包含大小寫字母和數字的組合，不能使用特殊字元，長度在8-10之間)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
日期格式：^\d{4}-\d{1,2}-\d{1,2}
一年的12個月(01～09和1～12)：^(0?[1-9]|1[0-2])$
一個月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
錢的輸入格式：
1.有四種錢的表示形式我們可以接受:”10000.00” 和 “10,000.00”, 和沒有 “分” 的 “10000” 和 “10,000”：^[1-9][0-9]*$
2.這表示任意一個不以0開頭的數字,但是,這也意味着一個字元”0”不通過,是以我們采用下面的形式：^(0|[1-9][0-9]*)$
3.一個0或者一個不以0開頭的數字.我們還可以允許開頭有一個負号：^(0|-?[1-9][0-9]*)$
4.這表示一個0或者一個可能為負的開頭不為0的數字.讓使用者以0開頭好了.把負号的也去掉,因為錢總不能是負的吧.下面我們要加的是說明可能的小數部分：^[0-9]+(.[0-9]+)?$
5.必須說明的是,小數點後面至少應該有1位數,是以”10.”是不通過的,但是 “10” 和 “10.2” 是通過的：^[0-9]+(.[0-9]{2})?$
6.這樣我們規定小數點後面必須有兩位,如果你認為太苛刻了,可以這樣：^[0-9]+(.[0-9]{1,2})?$
7.這樣就允許使用者隻寫一位小數.下面我們該考慮數字中的逗号了,我們可以這樣：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
23 8.1到3個數字,後面跟着任意個 逗号+3個數字,逗号成為可選,而不是必須：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
備注：這就是最終結果了,别忘了”+”可以用”*”替代如果你覺得空字元串也可以接受的話(奇怪,為什麼?)最後,别忘了在用函數時去掉去掉那個反斜杠,一般的錯誤都在這裡
xml檔案：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
中文字元的正規表達式：[\u4e00-\u9fa5]
雙位元組字元：[^\x00-\xff] (包括漢字在内，可以用來計算字元串的長度(一個雙位元組字元長度計2，ASCII字元計1))
空白行的正規表達式：\n\s*\r (可以用來删除空白行)
HTML标記的正規表達式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (網上流傳的版本太糟糕，上面這個也僅僅能部分，對于複雜的嵌套标記依舊無能為力)
首尾空白字元的正規表達式：^\s*|\s*$或(^\s*)|(\s*$) (可以用來删除行首行尾的空白字元(包括空格、制表符、換頁符等等)，非常有用的表達式)
騰訊QQ号：[1-9][0-9]{4,} (騰訊QQ号從10000開始)
中國郵政編碼：[1-9]\d{5}(?!\d) (中國郵政編碼為6位數字)
IP位址：\d+\.\d+\.\d+\.\d+ (提取IP位址時有用)
IP位址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)
1 使用者名正則
//使用者名正則，4到16位（字母，數字，下劃線，減号）
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//輸出 true
console.log(uPattern.test("caibaojian"));
2 密碼強度正則
//密碼強度正則，最少6位，包括至少1個大寫字母，1個小寫字母，1個數字，1個特殊字元
var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//輸出 true
console.log("=="+pPattern.test("caibaojian#"));
3 整數正則
//正整數正則
var posPattern = /^\d+$/;
//負整數正則
var negPattern = /^-\d+$/;
//整數正則
var intPattern = /^-?\d+$/;
//輸出 true
console.log(posPattern.test("42"));
//輸出 true
console.log(negPattern.test("-42"));
//輸出 true
console.log(intPattern.test("-42"));
4 數字正則
可以是整數也可以是浮點數
//正數正則
var posPattern = /^\d*\.?\d+$/;
//負數正則
var negPattern = /^-\d*\.?\d+$/;
//數字正則
var numPattern = /^-?\d*\.?\d+$/;
console.log(posPattern.test("42.2"));
console.log(negPattern.test("-42.2"));
console.log(numPattern.test("-42.2"));
5 Email正則
//Email正則
var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
//輸出 true
console.log(ePattern.test("[email protected]"));
6 手機号碼正則
//手機号正則
var mPattern = /^1[34578]\d{9}$/; //http://caibaojian.com/regexp-example.html
//輸出 true
console.log(mPattern.test("15507621888"));
7 身份證号正則
//身份證号（18位）正則
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
//輸出 true
console.log(cP.test("11010519880605371X"));
8 URL正則
//URL正則
var urlP= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
//輸出 true
console.log(urlP.test("http://caibaojian.com"));
9 IPv4位址正則
//ipv4位址正則
var ipP = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
//輸出 true
console.log(ipP.test("115.28.47.26"));
10 十六進制顔色正則
//RGB Hex顔色正則
var cPattern = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
//輸出 true
console.log(cPattern.test("#b8b8b8"));
11 日期正則
//日期正則，簡單判定,未做月份及日期的判定
var dP1 = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
//輸出 true
console.log(dP1.test("2017-05-11"));
//輸出 true
console.log(dP1.test("2017-15-11"));
//日期正則，複雜判定
var dP2 = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
//輸出 true
console.log(dP2.test("2017-02-11"));
//輸出 false
console.log(dP2.test("2017-15-11"));
//輸出 false
console.log(dP2.test("2017-02-29"));
12 QQ号碼正則
//QQ号正則，5至11位
var qqPattern = /^[1-9][0-9]{4,10}$/;
//輸出 true
console.log(qqPattern.test("65974040"));
13 微信号正則
//微信号正則，6至20位，以字母開頭，字母，數字，減号，下劃線
var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
//輸出 true
console.log(wxPattern.test("caibaojian_com"));
14 車牌号正則
//車牌号正則
var cPattern = /^[京津滬渝冀豫雲遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陝吉閩貴粵青藏川甯瓊使領A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂學警港澳]{1}$/;
//輸出 true
console.log(cPattern.test("粵B39006"));
15 包含中文正則
//包含中文正則
var cnPattern = /[\u4E00-\u9FA5]/;
//輸出 true
console.log(cnPattern.test("蔡寶堅"));
本文将會陸續收集前端表單中的正則驗證。
