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 相关文章推荐
javascript this用法小结
Dec 19 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
常用jQuery代码分享
Jul 14 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 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
Yii框架分页实现方法详解
2017/05/20 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
数控个人求职信范文
2014/02/03 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
英语课外活动总结
2014/08/27 职场文书
优秀教师推荐材料
2014/12/16 职场文书
小学生学习保证书
2015/02/26 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS