JavaScript正则表达式和级联效果


Posted in Javascript onSeptember 14, 2017

1、正则表达式(regular expression)

是一种字符串匹配的模式,用来检查一个字符串中是否包含指定模式的字符串。

2、正则表达式的创建

var reg = /white/;
var reg = new RegExp("white","g");

3、正则表达式的修饰符

g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
i 不区分大小写
m 多行匹配

4、正则表达式符号

方括号:方括号用于查找某个范围内的字符:

[abc]   查找方括号之间的任何字符。
[^abc]  查找任何不在方括号之间的字符。
[0-9]   查找任何从 0 至 9 的数字。
[a-z]   查找任何从小写 a 到小写 z 的字符。
[A-Z]   查找任何从大写 A 到大写 Z 的字符。
[A-z]   查找任何从大写 A 到小写 z 的字符。
[adgk]  查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green)    查找任何指定的选项。

元字符:元字符(Metacharacter)是拥有特殊含义的字符:

/…/ 代表一个模式的开始和结束
^   匹配字符串的开始
$  匹配字符串的结束
\s  任何空白字符
\S  任何非空白字符
\d  匹配一个数字字符,等价于[0-9]
\D  除了数字之外的任何字符,等价于[^0-9]
\w  匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9_]
\W  任何非单字字符,等价于[^a-zA-z0-9_]
.   除了换行符之外的任意字符

正则表达式重复字符(量词)

{n} 匹配前一项n次
{n,}    匹配前一项n次,或者多次
{n,m}   匹配前一项至少n次,但是不能超过m次
*   匹配前一项0次或多次,等价于{0,}
+   匹配前一项1次或多次,等价于{1,}
?   匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}

5、RegExp对象的属性

global RegExp对象是否具有标志g,它声明了给定的正则表达式是否执行全局匹配。

ignoreCase RegExp对象是否具有标志i,它声明了给定的正则表达式是否执行对大小写不敏感的匹配。

multiline RegExp对象是否具有标志m,它声明了给定的正则表达式是否执行多行匹配。

6、RegExp对象的方法

1、exec  检索字符中是正则表达式的区配,返回找到的值,并确定其位置

exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。

例子 1:

var patt1=new RegExp("e"); document.write(patt1.exec("The best things in life are free")); 由于该字符串中存在字母 "e",以上代码的输出将是:
e

2、test  检索字符串中指定的值,返回true或false

test()

test() 方法检索字符串中的指定值。返回值是 true 或 false。

例子:

var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); 由于该字符串中存在字母 "e",以上代码的输出将是:
True

7、分析(邮箱验证) var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

//正则表达式创建
^ 字符串开始
$字符串结束
\w任意字符字母和数字,下划线
+ 表示前一个字符出现{1,},一次或多次。
@ 普通字符串
\w  任意字符串 ddd@123
. 除了换行符之外的任意字符  ddd@123.
[a-zA-Z]  ddd@123.c   ddd@123.n
{2,3} ddd@123.com  ddd@123.net  ddd@123.tv
(.[a-zA-Z]{2,3})? ddd@123.com.cn  ddd@123.net

常用正则:

    用户名正则:/^[a-zA-Z][a-zA-Z0-9]{3,15}$/
    密码正则:/^[a-zA-Z0-9]{4,10}$/
    生日正则:/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/
    Email正则:/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/
    邮政编码:/^\d{6}$/
    手机号码:/^1\d{10}$/

8、String对象的方法

match 找到一个或多个正则表达式的匹配
search 检索与正则表达式相匹配的值
replace 替换与正则表达式匹配的字符串
split 把字符串分割为字符串数组
9、select对象常用事件、方法和属性.

1、事件    onchange    当改变选项时调用的事件

2、方法    add()   向下拉列表中添加一个选项

    示例:

var province=document.getElementById("selProvince").value; 
  var city=document.getElementById("selCity");
  city.options.length=0; 
  switch(province){
   case "河南省":
    city.add(new Option("郑州市","郑州市"),null);
    city.add(new Option("洛阳市","洛阳市"),null);
   break;
    …… 
  }

3、属性:

    options[]   返回包含下拉列表中的所有选项的一个数组
    selectedIndex   设置或返回下拉列表中被选项目的索引号
    length  返回下拉列表中的选项的数目

    示例:

function get(){
   var index=document.getElementById("fruit").selectedIndex;
   var len=document.getElementById("fruit").length;
   var show=document.getElementById("show");
   show.innerHTML="被选选项的索引号为:"+index+"<br/>下拉列表选项数目为:"+len;
  }

4、Option对象常用属性:

    text:设置或返回某个选项的纯文本值
    value:设置或返回被送往服务器的值

10、数组常用的属性和方法。

属性  length  设置或返回数组中元素的数目

方法:

    join( ) 把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔
    sort( ) 对数组的元素进行排序

****读取二维数组中的元素值:

var cityList = new Array();
 cityList['河北省'] = ['邯郸市','石家庄市'];
 cityList['河南省'] = ['郑州市','洛阳市'];
 cityList['湖北省'] = ['武汉市','宜昌市'];
 for(var i in cityList){
  document.getElementById("show").innerHTML+=i+"<br/>"; 
 }
  for(var j in cityList){
  for(var k in cityList[j]){
  document.getElementById("show").innerHTML+=cityList[j][k]+"  ”;
 }
 document.getElementById("show").innerHTML+="<br/>“; }

总结

以上所述是小编给大家介绍的JavaScript_正则表达式和级联效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
webpack入门+react环境配置
Feb 08 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
node实现基于token的身份验证
Apr 09 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 #Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 #Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 #Javascript
JS中跳出循环的示例代码
Sep 14 #Javascript
JS验证码实现代码
Sep 14 #Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 #Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 #Javascript
You might like
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
如何隐藏你的.php文件
2007/01/04 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python实现的文本编辑器功能示例
2017/06/30 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
深入浅析Python中的迭代器
2019/06/04 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
正规的求职信范文分享
2013/12/11 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
教师个人总结范文
2015/02/11 职场文书
工作证明书
2015/06/15 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python