正则学习(一)-什么是正则表达式,及如何创建正则表达式

2023-12-23 18:25:10

一. 概述

百度百科定义:

正则表达式是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"),是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式(规则)的文本。

在 JavaScript 中,正则表达式也是对象。正则表达式描述一种字符串匹配的模式,可以用来检查字符串中是否存在一个子串,将字符串中匹配的子串替换成其他字符,也可以隐藏字符串中某一部分。

例如:

/^\d+/ instanceof Object;
// true

/^\d+/ instanceof RegExp;
// true

正则表达式是一个 RexRep 实例对象,也是一个对象。

二. 应用

1. 数据验证

数据验证在平时经常出现的,比如,我们对表单的处理过程中,会进行是否不能为空,输入值是否符合手机等等验证。

是否是正确手机号校验正则:

/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

2. 数据替换

通过正则,可以快速进行数据部分内容进行更改。比如,手机号码中间四位隐藏(脱敏)等。

const value = "15005183888".replace(/^(\d{3})(\d{4})(\d{4})$/, "$1****$3");
// 150****3888

3. 数据提取

通过正则,我们可以很方便从数据中提取某一个部分内容,不需要写很多代码。

比如,从 location.href 中提取参数:

const queryURLParams = (url, name) => {
  var pattern = new RegExp("[?&#]+" + name + "=([^?&#]+)");
  var res = pattern.exec(url);
  if (!res) return;
  if (!res[1]) return;
  return res[1];
}
const url = "https://www.wangyuegyq.top?name=gyq";
const name = queryURLParams(url, "name");
// gyq

三. 创建方式

想要创建一个正则表达式,有两种方式:

1. 字面量创建

以斜杠开始和斜杠结束

var regexp = /hello/;

2. RegExp 构造函数

RegExp方法中,可以传入两个参数,第一个参数可以是正则表达式或者字符串,第二个参数表示正则表达式的修饰符。

如果第一个参数是正则表达式时,在ES5中,不允许使用第二个参数,否则,报错。但是在ES6中,可以使用第二个参数,如果使用了,会覆盖第一个参数的修饰符。

var regexp = new RegExp("hello");

3. 两者区别

第一种方法在引擎编译代码时,就会新建正则表达式,第二种方法在运行时新建正则表达式,所以前者的效率较高。而且,前者比较便利和直观,所以实际应用中,基本上都采用字面量定义正则表达式。

四. 匹配修饰符

正则表达式中有3种修饰符:

1. i

ignoreCase简写,表示忽略大小写

/hello/.test("Hello"); // false
/hello/i.test("Hello"); // true

2. g

global简写,全局匹配

"hello".replace(/l/, "#"); // "he#lo"
"hello".replace(/l/g, "#"); // "he##o"

3. m

multiline简写,支持多行匹配

单行匹配:

const str = `
  I
  am
  a
  teacher
`;
str.replace(/^/g, "#");

结果:

#
  I
  am
  a
  teacher

多行匹配:

const str = `
  I
  am
  a
  teacher
`;
str.replace(/^/gm, "#");

结果:

#
#  I
#  am
#  a
#  teacher
#

目录

相关推荐
正则学习(二)- 常用元字符:量词和字符组正则学习(三)-正则中不得不说的捕获和反向引用正则学习(四)-正则表达式中的位置匹配正则学习(五)-深入理解String.prototype.replace正则学习(六)- 贪婪模式和惰性模式