1、概念

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
</body>
<script type="text/javascript">
//RegExp对象 //创建正则对象方式1
//参数1 正则表达式(不能有空格)
//参数2 匹配模式:常用g(全局匹配;找到所有匹配,而不是第一个匹配后停止)和i(忽略大小写吧) var str = 'hello World';
var reg1 = new RegExp('e','ig');
console.log(reg1) //2.字面量方式创建
var reg2 = /o/gi;//检测字符e,不区分大小写,全局匹配 //正则对象提供的检索方式
//test() 检测字符串中是否包含定义字符模式,返回布尔
//要检索的字符在字符串str中 返回true
console.log(reg2.test(str)); //2.2 exec() 具体执行匹配,返回数组
console.log(reg2.lastIndex); // 2 保存一次匹配时开始的下标
console.log(reg2.exec(str)); //["o", index: 7, input: "hello world"]
console.log(reg2.lastIndex); //2 //3.常用方法
//match
var reg3 = /d/g; console.log(str.match(reg3)) //2.replace替换: str.replace(被替换的,替换的)
console.log(str.replace(reg3,'*')); //3.search()
console.log(str.search(reg3));//查询字符串在字符中出现的位置 下标 //4.split()
console.log(str.split(reg3)); </script>
</html>

2、元字符

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>元字符</title>
<script>
window.onload = function (){
//元字符
//1.单个字符和数字
//1 . 匹配除换行符以为的任意字符
var str = "oweb";
var reg = /./g;
console.log(reg.exec(str));
var str = "www/baidu/com";
var reg = /www\......\.com/g; //如果想不让字符有其他意义 转义\
console.log(reg.exec(str)); //2. [] 匹配[]里面的任意一个字符
var str1 = "4awebadsads";
var reg1 = /[a-zA-Z0-9]/g; // 匹配字母还是数字
console.log(reg1.exec(str1)); var str2 = "1s34";
var reg2 = /[0-9][0-9][0-9]/g;
console.log(reg2.exec(str2)); //3. [^] 所有不在这个范围内的字符
var str3 = "abd";
var reg3 = /[^a-z]/g; //匹配除小写字母以外的任意字符
console.log(reg3.exec(str3)); //4. \
var str4 = "web";
var reg4 = /\d/g; //匹配数字
var reg5 = /\D/g; //非数字
console.log(reg4.exec(str4)); //null
console.log(reg5.exec(str4)); //w var reg6 = /\w/g; //匹配数字 字母 下划线_
var reg7 = /\W/g; //匹配除数字 字母 下划线以外的任意字符
console.log(reg6.exec(str4)); //w
console.log(reg7.exec(str4)); //null var reg8 = /\s/g; //空格
var reg9 = /\S/g; //非空白字符
console.log(reg8.exec(str4)); //null
console.log(reg9.exec(str4)); //w //5 锚字符 ^以什么开头 $以什么结尾
var str = "www.";
var reg10 = /^www/g; // ^字符
console.log(reg10.exec(str)); var reg11 = /www\.$/g; //字符$
console.log(reg11.exec(str)); //重复的字符
//? 匹配前面的字符0个或一个 ,
var strs = "webr44546ere";
var reg12 = /[0-9]?/g;
console.log(reg12.exec(strs)); //* 匹配0个或任意多个字符 尽可能多的匹配
var reg13 = /[a-z]*/g; //匹配小写字母,0个或多个
console.log(reg13.exec(strs)); //+ 至少匹配一次
var reg14 = /\d+/g;
console.log(reg14.exec(strs)); //{4}
var stra = "";
var rega = /^1\d{10}$/g; //匹配连续的四个数字
console.log(rega.exec(stra)); //{1,4} 最少一个最多4个
var strb = "edg";
var regb = /^[a-zA-z]{2,3}$/g;
console.log(regb.exec(strb)); //|| 竖线 或者
var strc = "www.google"; //baidu google ujiuye
var regc = /www.baidu|google|ujiuye/g;
console.log(regc.exec(strc)); //() 分组
var strc = "www.google"; //baidu google ujiuye
var regc = /www.(baidu)|(google)|(ujiuye)/g;
console.log(regc.exec(strc)); console.log(RegExp.$1);
console.log(RegExp.$2);
console.log(RegExp.$3); var str = "helloworld";
var reg = /(hello)(world)/g;
/* console.log(reg.exec(str));
console.log(RegExp.$1);*/
console.log(str.replace(reg,"$2 $1")); }
</script>
</head>
<body> </body>
</html>

3、相关练习

http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式相关练习</title>
</head>
<body>
<script type="text/javascript"> //正则表达式练习 http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp window.onload = function () {
//1.检索字符串中是否不包含字母
var str = '';
var reg1 = /[^a-zA-Z]/g;
console.log(reg1.test(str));
if(reg1.test(str)){
console.log('不包含');
}else{
console.log('包含');
} //2.去除字符串首尾空格
var str2 = ' hello world! ';
//开头的空格
var reg =/^\s+/ig; // + 1到多次!
var str3 = str2.replace(reg,""); var reg2 = /\s+$/ig;
var str4 = str3.replace(reg2,"");
console.log("|"+str4+"|"); //3.检查用户账号
function checkUser(str) {
var re = /^[a-zA-Z]\w{3,15}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkUser('alex_haha'); //4.手机号码 11位数字以1开头
function checkMobile(str) {
var re = /^1\d{10}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkMobile('');
checkMobile(''); //5.电话号码 区号+号码 区号以0开头 3位或4位
// 号码由7位或8位数字组成
// 区号与号码之间可以无连接符,也可以"-"连接
function checkPhone(str) {
var re = /^0\d{2,3}-?\d{7,8}$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkPhone("095-12345678"); //6.邮箱
//规则:第一部分@第二部分
//第一部分:由字母 数字 下划线 短线 - 点号 . 组成
//第二部分:为一个域名 域名由 字母 数字 短线 短线 - 域名后缀组成
// 域名后缀一般为 .xxx 或者 .xxx.xx 一区的域名后缀一般为 2-4 位,如cn,
function checkEmail(str) {
var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ig;
if(re.test(str)){
console.log('正确')
}else{
console.log('错误')
}
}
checkEmail('alex@cnbolgs.cn'); } </script>
</body>
</html>

前端-javascript-正则表达式的更多相关文章

  1. web前端篇:JavaScript正则表达式

    目录 JavaScript正则表达式 1.创建正则表达式 1.1方法1:直接量语法 1.2 方法2:创建RegExp对象的语法 1.3 区别: 1.4正则表达式使用 2.正则对象的属性 2.1.属性 ...

  2. web前端学习(四)JavaScript学习笔记部分(10)-- JavaScript正则表达式

    1.JavaScript正则表达式课程概要 方便查找字符串.数字.特殊字串等等 2.正则表达式的介绍 RegExp是正则表达式的缩写 当检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp ...

  3. JavaScript正则表达式下——相关方法

    上篇博客JavaScript 正则表达式上——基本语法介绍了JavaScript正则表达式的语法,有了这些基本知识,可以看看正则表达式在JavaScript的应用了,在一切开始之前,看看RegExp实 ...

  4. JavaScript正则表达式学习笔记(二) - 打怪升级

    本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...

  5. javascript 正则表达式补充

    定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%&g ...

  6. 前端- JavaScript - 总结

    1.JavaScript的介绍 javaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的.安全性好的脚本语言. 它运行在客户端从而减轻服 ...

  7. JavaScript正则表达式及jQuery回顾

    JavaScript 正则表达式,用于规定在文本中检索的内容. 一.定义正则表达式: rep = /\d+/; // js定义正则.(python定义正则:re模块 rep = "\d+&q ...

  8. JavaScript正则表达式,你真的知道?

    一.前言 粗浅的编写正则表达式,是造成性能瓶颈的主要原因.如下: var reg1 = /(A+A+)+B/; var reg2 = /AA+B/; 上述两个正则表达式,匹配效果是一样的,但是,效率就 ...

  9. 【JS】javascript 正则表达式 大全 总结

    javascript 正则表达式 大全 总结 参考整理了一些javascript正则表达式 目的一:自我复习归纳总结 目的二:共享方便大家搜索 微信:wixf150 验证数字:^[0-9]*$ 验证n ...

  10. 理清JavaScript正则表达式--上篇

    在JavaScript中,正则表达式由RegExp对象表示.RegExp对象呢,又可以通过直接量和构造函数RegExp两种方式创建,分别如下: //直接量 var re = /pattern/[g | ...

随机推荐

  1. Cocos2d-X数据、动作、消息的基本操作

    加入类的create方法: CREATE_FUNC(ClassName) 使用这个宏能够为类加入一个create方法. 创建类的对象时一律用Class::create()的形式. 在CREATE_FU ...

  2. php重新整理数组索引

    语法 array_merge(array1,array2,array3...) 参数 描述 array1 必需.输入的第一个数组. array2 必需.输入的第二个数组. array3 可选.可指定的 ...

  3. dongle0

    *CLI> -- [dongle0] Trying to connect on /dev/ttyUSB2... 插拔dongle[Jan 13 23:42:20] WARNING[3443]: ...

  4. hadoop 安装、命令

    hadoop安装步骤: 安装java 安装hadoop 下载地址:http://apache.claz.org/hadoop/common/ (说明:该网址current文件夹下,是最新版) hado ...

  5. transient解释

    http://www.cnblogs.com/lanxuezaipiao/p/3369962.html

  6. WF4.0 基础篇 (一)开始使用WF

    来源:https://www.cnblogs.com/caosenianhuan/p/WF.html 最近公司要重新上线一套新的CRM系统,要重整老系统里的业务流模块,团队讨论已微软的workflow ...

  7. Input输入控制

    1.Input只能输入正整数 <html> <head> <title>只能输入正整数</title> </head> <body&g ...

  8. java newInstance() 的参数版本与无参数版本详解

    newInstance() 的参数版本与无参数版本详解 博客分类: Core Java   通过反射创建新的类示例,有两种方式: Class.newInstance() Constructor.new ...

  9. 通过textarea标签解决ClipboardJS在iphone复制失败问题

    前段时间做了微信自定义分享的功能,分享出的页面存在邀请码在ios手机上复制失败的问题,然而在PC端和安卓机上是没有问题的.百度了一下,基本给出的解决方案是:ios不单纯支持on,为点击的元素添加空点击 ...

  10. windows 网管常用命令

    Windows网络命令行程序 这部分包括: 使用 ipconfig /all 查看配置 使用 ipconfig /renew 刷新配置 使用 ipconfig 管理 DNS 和 DHCP 类别 ID ...