JavaScript入门篇之正则表达式

  正则表达式,又称正规表示法、常规表示法(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里,正则表达式通常被用来检索、替换那些符合某个模式的文本。

  一、创建

  创建正则表达式和创建字符串相似,有以下两种方法。

 方法一:NEW运算符

var box = new RegExp("Box", 'ig');

 方法二:字面量

var box=new RegExp/box/ig;
模式参数
参数 含义
i 忽略大小写
g 全局匹配
m 多行匹配

 二、测试

  RegExp对象提供两个测试方法:

 方法一:test()

在字符串中查找是否存在指定的正则表达式,返回值为布尔值,如果匹配到了就返回True,如果不存在就返回False。

 方法二:exec()

如果执行成功,就返回包含该查找字符串的相关信息数组。如果失败返回NULL。

 实例1:

  匹配信息为box,i参数是不区分大小写。在str变量存放的字符串中查找,返回的变量为True。

var pattern = new RegExp('box', 'i');
var str = 'This is a Box!';
alert(pattern.test(str));

 实例2:

  用exec()方法返回的是匹配到的源字符串中的内容,如果没有匹配到则返回NULL.

           var pattern = new RegExp('box', 'i');
           var str = 'This is a Box!';
           alert(pattern.exec(str));

  三、其他方法:

 1、match()方法

           var pattern = /Box/ig;
           var str = 'This is a big Box!That is a beautiful box';
           alert(str.match(pattern));

  返回为:Box,box

 2、replace()方法

           var pattern = /Box/ig;
           var str = 'This is a big Box!That is a beautiful box';
           alert(str.replace(pattern,'Apple'));

  返回为:This is a big Apple!That is a beautiful Apple

 3、search()方法

           var pattern = /Box/ig;
           var str = 'This is a big Box!That is a beautiful box';
           alert(str.search(pattern));

  返回为:查到的位置,如果查不到就返回-1.

 4、split()方法

           var pattern = /Box/ig;
           var str = 'This is a big Box!That is a beautiful box';
           alert(str.split(pattern));

  返回为:拆分成的字符串数组。This is a big ,!That is a beautiful ,

 四、获取控制

  正则表达式元字符是包含特殊含义的字符,它们有一些特殊功能,可以改变匹配模式的方式。做个简单的例子。

 实例:

  简单的电子邮件验证:

           var pa = /^([\w\.\-]+)@([\w\-]+)\.([\w]{2,4})$/;
           var str = '[email protected]';
           alert(pa.test(str));

  ()的作用是分组模式,{2,4}的意思是匹配分组里的字符串2-4次。

  正则量词的贪婪与惰性:

  贪婪量词:先看整个字符串是否匹配,如果不匹配就把最后一个字符去掉在进行匹配,不匹配继续去掉最后一个字符,指导找到一个匹配或者不剩任何字符才停止。

  惰性量词:先看第一个字符串是否匹配,如果第一个不匹配就在加入第二个字符串依此类推,指导找到一个匹配或者不剩任何字符才停止,贪婪量词与贪婪量词的方法正好相反.

 实例一:

  ?号关闭了贪婪匹配,只替换了字符串中的第一个字符a.

           var pattern = /[a-z]+?/;
           var str = 'abcdefghijklmnopqrstuvwxyz';
           var result = str.replace(pattern, 'YYY');
           alert(result);

  返回值为;YYYbcdefghijklmnopqrstuvwxyz

 实例二:

  g参数开启的全局,禁止了贪婪。

           var pattern = /8(.+?)8/g;
           var str = 'This is 8google8,That is 8google8,There is 8google8 ';
           var result = str.replace(pattern, '<strong>$1</strong>');
           document.write(result);

 五、总结:

  假设用户在填写HTML表单的时候,需要写姓名,年龄,性别,E-Mail等,在提交到服务器之前,在前端先验证一遍。看看用户输入的信息是否符合规定。这种客户端验证的方法,可以节省大量的服务器系统资源,获得更好的用户体验。

时间: 2024-10-11 02:42:16

JavaScript入门篇之正则表达式的相关文章

JavaScript 入门篇01- 标签位置

在网页中,我们可以将JavaScript代码放在html文件中任何位置,但一般放在head或body标签里面. 一般来说,<script>元素放在哪里与其的功能作用是紧密相关的,在这里讨论2种情况: 1.放在<head>里 将<script>元素放在head中是为了让浏览器在一开始就读取,<script>元素会在整个网页最开始解析时就加载执行,其优先次序仅次于<title>元素. 然后依次向下解析渲染. 应用:比如进行页面显示初始化的js必须放在

JavaScript入门篇之文档对象模型

前言: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容.结构和www文档的风格(目前,HTMl和XML文档是通过说明部分定义的). 文档对象模型提供了一种访问和修改HTML文档内容的方法.DOM是万维网联盟(W3C)定义的一种标准.大部分的互联网浏览器以各种形式实现了DOM并且获得了不同程度的成功.和其他标准,特别是那些与web编程

JavaScript入门篇

一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现各种动态效果. 4. 做为一个Web开发师,如果你想提供漂亮的网页.令用户满意的上网体验,JavaScript是必不可少的工具. 二.易学性 1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序. 2.我们可以用简单命令,完成一些基本操作. 三.从哪开始学习呢? 学习JavaScript的

JavaScript入门篇 第二天

提问(prompt 消息对话框) prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息.弹出消息对话框(包含一个确定按钮.取消按钮与一个文本输入框). 语法: prompt(str1, str2); 参数说明: str1: 要显示在消息对话框中的文本,不可修改 str2:文本框中的内容,可以修改 返回值: 1. 点击确定按钮,文本框中的内容将作为函数返回值 2. 点击取消按钮,将返回null 看看下面代码: var myname=prompt("请输入你的姓名:"); if

JavaScript入门篇 - 常用互动方法

为什么学习JavaScript 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现各种动态效果. 二.易学性 1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序. 2.我们可以用简单命令,完成一些基本操作. 三.从哪开始学习呢? 学习JavaScript的起点就是处理网页,所以我们先学习基础语法和如何使用DOM进行简单操作. 如何插入J

JavaScript入门篇QA总结

Q1:JS可以放在哪个位置?A1:1.放在<head>标签中,用<script type="text/javascript"></script>来标志这是一段JS代码:2.放在外部文件中,文件后缀名为.js,用<script src="xx.js" />将外部文件引进HTML:3.写在HTML的<body>标签中,通过<script type="text/javascript"&g

js入门篇之正则表达式基础

定义:正则用于规定在文本中检索的内容,它是对字符串执行模式匹配的强大工具 RegExp(正则表达式) 对象的语法: new RegExp(pattern, attributes); pattern为一个字符串或匹配规则 attributes为可选字符串,包含属性g.i 和 m g:代表全局匹配 (继续往下匹配) i:代表不区分大小写匹配 m:代表多行匹配,只对^和$模式有用 定义正则表达式有两种形式: 构造函数方式: new RegExp(pattern, attributes); 例:var

JavaScript入门篇 第一天

使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<script></script>之间.<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言. #JS——引

JavaScript入门篇之浏览器对象模型

前言: 真正的JavaScript是由三部分组成,ECMAScript.DOM.BOM,如下图所示.本文将主要介绍其中的浏览器对象模型. BOM(Browser Object Mode) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象. 一.window对象 BOM可以用来访问和操作浏览器窗口的浏览器,开发