本文共 8477 字,大约阅读时间需要 28 分钟。
正则表达式:用于匹配规律规则的表达式,正则表达式最初是科学家对人类神经系统的工作原理的早期研究,现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。
正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。示例演示:
\d
匹配数字ab\d
匹配 ab1、ab2通过测试工具演示下面元字符的使用
元字符 | 说明 |
---|---|
\d | 匹配数字 |
\D | 匹配任意非数字的字符 |
\w | 匹配字母或数字或下划线 |
\W | 匹配任意不是字母,数字,下划线 |
\s | 匹配任意的空白符 |
\S | 匹配任意不是空白符的字符 |
. | 匹配除换行符以外的任意单个字符 |
^ | 表示匹配行首的文本(以谁开始) |
$ | 表示匹配行尾的文本(以谁结束) |
限定符 | 说明 |
---|---|
* | 重复零次或更多次 |
+ | 重复一次或更多次 |
? | 重复零次或一次 |
{n} | 重复n次 |
{n,} | 重复n次或更多次 |
{n,m} | 重复n到m次 |
[] 字符串用中括号括起来,表示匹配其中的任一字符,相当于或的意思[^] 匹配除中括号以内的内容\ 转义符| 或者,选择两者中的一个。注意|将左右两边分为两部分,而不管左右两边有多长多乱() 从两个直接量中选择一个,分组 eg:gr(a|e)y匹配gray和grey[\u4e00-\u9fa5] 匹配汉字
验证手机号:
^\d{ 11}$
验证邮编:
^\d{ 6}$
验证日期 2012-5-01
^\d{ 4}-\d{ 1,2}-\d{ 1,2}$
验证邮箱 :
^\w+@\w+\.\w+$
验证IP地址 192.168.1.10
^\d{ 1,3}\(.\d{ 1,3}){ 3}$
方式1:
var reg = new Regex('\d', 'i');var reg = new Regex('\d', 'gi');
方式2:
var reg = /\d/i;var reg = /\d/gi;
标志 | 说明 |
---|---|
i | 忽略大小写 |
g | 全局匹配 |
gi | 全局匹配+忽略大小写 |
// 匹配日期var dateStr = '2015-10-10';var reg = /^\d{4}-\d{1,2}-\d{1,2}$/console.log(reg.test(dateStr));
###匹配正则表达式
// console.log(/./.test(“除了回车换行以为的任意字符”));//true // console.log(/.*/.test(“0个到多个”));//true // console.log(/.+/.test(“1个到多个”));//true // console.log(/.?/.test(“哈哈”));//true // console.log(/[0-9]/.test(“9527”));//true // console.log(/[a-z]/.test(“what”));//true // console.log(/[A-Z]/.test(“Are”));//true // console.log(/[a-zA-Z]/.test(“干啥子”));//false // console.log(/[0-9a-zA-Z]/.test(“9ebg”));//true // console.log(/b|(ara)/.test(“abra”));//true // console.log(/[a-z]{2,3}/.test(“arfsf”));//trueconsole.log(/\d/.test("998"));//true console.log(/\d*/.test("998"));//true console.log(/\d+/.test("998"));//true console.log(/\d{0,}/.test("998"));//true console.log(/\d{2,3}/.test("998"));//true console.log(/\D/.test("eat"));//true console.log(/\s/.test(" "));//true console.log(/\S/.test("嘎嘎"));//true console.log(/\w/.test("_"));//true console.log(/\W/.test("_"));//true
###正则表达式案例
1.验证密码强弱 2.验证邮箱:[0-9a-zA-Z_.-]+[@][0-9a-zA-Z._-]+([.][a-zA-Z]+){1,2} 3.验证中文名字[\u4e00-\u9fa5]// 1. 提取工资var str = "张三:1000,李四:5000,王五:8000。";var array = str.match(/\d+/g);console.log(array);// 2. 提取email地址var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);console.log(array);// 3. 分组提取 // 3. 提取日期中的年部分 2015-5-10var dateStr = '2016-1-5';// 正则表达式中的()作为分组来使用,获取分组匹配到的结果用Regex.$1 $2 $3....来获取var reg = /(\d{4})-\d{1,2}-\d{1,2}/;if (reg.test(dateStr)) { console.log(RegExp.$1);}// 4. 提取邮件中的每一部分var reg = /(\w+)@(\w+)\.(\w+)(\.\w+)?/;var str = "123123@xx.com";if (reg.test(str)) { console.log(RegExp.$1); console.log(RegExp.$2); console.log(RegExp.$3);}
// 1. 替换所有空白var str = " 123AD asadf asadfasf adf ";str = str.replace(/\s/g,"xx");console.log(str);// 2. 替换所有,|,var str = "abc,efg,123,abc,123,a";str = str.replace(/,|,/g, ".");console.log(str);
QQ号:邮箱:手机:生日:姓名:
//获取文本框var txtQQ = document.getElementById("txtQQ");var txtEMail = document.getElementById("txtEMail");var txtPhone = document.getElementById("txtPhone");var txtBirthday = document.getElementById("txtBirthday");var txtName = document.getElementById("txtName");//txtQQ.onblur = function () { //获取当前文本框对应的span var span = this.nextElementSibling; var reg = /^\d{5,12}$/; //判断验证是否成功 if(!reg.test(this.value) ){ //验证不成功 span.innerText = "请输入正确的QQ号"; span.style.color = "red"; }else{ //验证成功 span.innerText = ""; span.style.color = ""; }};//txtEMailtxtEMail.onblur = function () { //获取当前文本框对应的span var span = this.nextElementSibling; var reg = /^\w+@\w+\.\w+(\.\w+)?$/; //判断验证是否成功 if(!reg.test(this.value) ){ //验证不成功 span.innerText = "请输入正确的EMail地址"; span.style.color = "red"; }else{ //验证成功 span.innerText = ""; span.style.color = ""; }};
表单验证部分,封装成函数:
var regBirthday = /^\d{4}-\d{1,2}-\d{1,2}$/;addCheck(txtBirthday, regBirthday, "请输入正确的出生日期");//给文本框添加验证function addCheck(element, reg, tip) { element.onblur = function () { //获取当前文本框对应的span var span = this.nextElementSibling; //判断验证是否成功 if(!reg.test(this.value) ){ //验证不成功 span.innerText = tip; span.style.color = "red"; }else{ //验证成功 span.innerText = ""; span.style.color = ""; } };}
通过给元素增加自定义验证属性对表单进行验证:
// 所有的验证规则var rules = [ { name: 'qq', reg: /^\d{5,12}$/, tip: "请输入正确的QQ" }, { name: 'email', reg: /^\w+@\w+\.\w+(\.\w+)?$/, tip: "请输入正确的邮箱地址" }, { name: 'phone', reg: /^\d{11}$/, tip: "请输入正确的手机号码" }, { name: 'date', reg: /^\d{4}-\d{1,2}-\d{1,2}$/, tip: "请输入正确的出生日期" }, { name: 'cn', reg: /^[\u4e00-\u9fa5]{2,4}$/, tip: "请输入正确的姓名" }];addCheck('frm');//给文本框添加验证function addCheck(formId) { var i = 0, len = 0, frm =document.getElementById(formId); len = frm.children.length; for (; i < len; i++) { var element = frm.children[i]; // 表单元素中有name属性的元素添加验证 if (element.name) { element.onblur = function () { // 使用dataset获取data-自定义属性的值 var ruleName = this.dataset.rule; var rule =getRuleByRuleName(rules, ruleName); var span = this.nextElementSibling; //判断验证是否成功 if(!rule.reg.test(this.value) ){ //验证不成功 span.innerText = rule.tip; span.style.color = "red"; }else{ //验证成功 span.innerText = ""; span.style.color = ""; } } } }}// 根据规则的名称获取规则对象function getRuleByRuleName(rules, ruleName) { var i = 0, len = rules.length; var rule = null; for (; i < len; i++) { if (rules[i].name == ruleName) { rule = rules[i]; break; } } return rule;}
在JavaScript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function)。
在说区别之前,需要先提到另外一个知识,就是 JavaScript 的原型继承。
所有 JavaScript 的内置构造函数都是继承自Object.prototype
。 在这个前提下,可以理解为使用 new Array()
或 []
创建出来的数组对象,都会拥有 Object.prototype
的属性值。 var obj = { };// 拥有 Object.prototype 的属性值var arr = [];//使用数组直接量创建的数组,由于 Array.prototype 的属性继承自 Object.prototype,//那么,它将同时拥有 Array.prototype 和 Object.prototype 的属性值
可以得到对象和数组的第一个区别:对象没有数组 Array.prototype 的属性值。
数组具有一个最基本特征:索引,这是对象所没有的,下面来看一段代码:
var obj = { };var arr = []; obj[2] = 'a';arr[2] = 'a'; console.log(obj[2]); // => aconsole.log(arr[2]); // => aconsole.log(obj.length); // => undefinedconsole.log(arr.length); // => 3
伪数组,就是像数组一样有 length
属性,也有 0、1、2、3
等属性的对象,看起来就像数组一样,但不是数组,比如:
var fakeArray = { "0": "first", "1": "second", "2": "third", length: 3}; for (var i = 0; i < fakeArray.length; i++) { console.log(fakeArray[i]);} Array.prototype.join.call(fakeArray,'+');
常见的伪数组有:
arguments
document.getElementsByTags
得到的列表)$("div")
)伪数组是一个 Object,而真实的数组是一个 Array。
伪数组存在的意义,是可以让普通的对象也能正常使用数组的很多方法,比如:
var arr = Array.prototype.slice.call(arguments); Array.prototype.forEach.call(arguments, function(v) { // 循环arguments对象});// push// some// every// filter// map// ...
以上在借用数组的原型方法的时候都可以通过数组直接量来简化使用:
var obj = { 0: 'a', 1: 'b', 2: 'c', length: 3};[].push.call(obj, 'd')console.log([].slice.call(obj));[].forEach.call(obj, function (num, index) { console.log(num)})
转载地址:http://iixmi.baihongyu.com/