前端正则表达式详解

前端正则表达式是前端开发中非常重要的一部分，它可以用来验证和匹配输入的数据，限定数据长度和规则，以及进行字符串替换等操作。本文从多个方面详细阐述前端正则表达式的应用。

一、前端正则表达式用处

前端正则表达式可以应用于丰富的场景。它可以验证用户输入的数据是否合法，限定输入的格式和规则，智能提示用户输入数据的类型和错误信息；也可以对输入的数据进行过滤和替换，匹配符合要求的字符串，从而提高前后端数据的交互效率。

二、前端正则表达式验证

前端正则表达式可以验证输入的数据是否合法，如邮箱、手机号码、身份证号码等。下面演示验证手机号码的正则表达式：

function checkMobile(mobile) {
  var regex = /^1[3-9]\d{9}$/;
  return regex.test(mobile);
}

其中，^表示开始，$表示结束，[3-9]表示第二位是3至9的数字，\d代表数字，{9}代表9个数字。

三、前端正则表达式全局匹配

前端正则表达式可以匹配所有符合要求的数据，不仅仅限于第一个符合条件的字符串，使用全局匹配可以匹配多个数据。下面演示匹配所有数字的正则表达式：

var str = 'abc123def456ghi789jkl';
var regex = /\d+/g;
var result = str.match(regex);
console.log(result); // ['123', '456', '789']

其中，\d+代表匹配1个或多个数字，g代表全局匹配。

四、前端正则表达式详解

前端正则表达式是一个复杂的语法，需要全面了解各种规则和表达式的含义和用法。下面列出一些常用的正则表达式：

.代表匹配任意字符
\d代表匹配数字
\w代表匹配字母、数字、下划线
\s代表匹配空格和制表符
^代表匹配字符串开始
$代表匹配字符串结束
{n}代表匹配n个字符
{n,}代表匹配n个或多个字符
{n,m}代表匹配n个到m个字符
[]代表匹配括号内的任意一个字符
|代表匹配左右两边任意一个表达式
()代表分组，可以通过$1、$2等代表分组的内容
*代表匹配零个或多个字符
+代表匹配一个或多个字符
?代表匹配零个或一个字符
\代表转义字符

五、前端正则表达式年份加月份

使用前端正则表达式可以轻松实现日期格式的转换，下面演示如何将年份和月份拼接成日期格式：

function formatYearMonth(year, month) {
  var regex = /^(\d{4})(\d{2})$/;
  return year.toString().concat(month.toString()).replace(regex, '$1-$2');
}
console.log(formatYearMonth(2020, 10)); // '2020-10'

其中，$1-$2代表取第一个分组和第二个分组的内容，中间加‘-’拼接在一起。

六、前端正则表达式$1

正则表达式中通过$1、$2、$3等表示分组的内容，可通过正则表达式替换函数进行实现。下面演示如何将‘_’转换成‘-’：

var str = '2020_10_01';
var regex = /(\d{4})_(\d{2})_(\d{2})/;
var result = str.replace(regex, function(match, p1, p2, p3) {
  return p1 + '-' + p2 + '-' + p3;
});
console.log(result); // '2020-10-01'

其中，p1 + '-' + p2 + '-' + p3表示通过$1、$2、$3获取分组的内容，中间加‘-’拼接在一起。

七、前端正则表达式匹配数字

前端正则表达式可以匹配数字，下面演示如何匹配4位整数和2位小数的数字：

function checkNumber(number) {
  var regex = /^\d{1,4}(\.\d{1,2})?$/;
  return regex.test(number);
}
console.log(checkNumber('12.34')); // true
console.log(checkNumber('123.4')); // true
console.log(checkNumber('1234')); // true
console.log(checkNumber('12345')); // false

其中，^\d{1,4}代表匹配1到4位数字，(\.\d{1,2})?代表匹配0个或1个小数点和1到2位小数。

八、前端正则表达式语法

前端正则表达式的语法非常丰富，下面列出常用的语法：

^：匹配字符串的开始位置
$：匹配字符串的结束位置
.：匹配除换行符外的任意字符
\d：匹配数字
\w：匹配字母、数字、下划线
\s：匹配空格和制表符
[]：匹配括号内的任意一个字符
()：分组，可以通过$1、$2等代表分组的内容
*：匹配零个或多个字符
+：匹配一个或多个字符
?：匹配零个或一个字符
|：匹配左右两边任意一个表达式
{n}：匹配n个字符
{n,}：匹配n个或多个字符
{n,m}：匹配n到m个字符
\：转义字符

九、前端正则表达式并且

前端正则表达式可以通过使用括号和|实现多个条件的匹配。如下面的例子，匹配同时包含‘a’和‘b’的字符串：

var str = 'abcd';
var regex = /^(?=.*a)(?=.*b).+$/;
console.log(regex.test(str)); // true

其中，.+代表任意长度字符，(?=.*a)表示必须包含‘a’，(?=.*b)表示必须包含‘b’。

十、前端正则表达式限定长度选取

前端正则表达式可以通过限定长度选取符合条件的数据。如下面的例子，匹配长度为3到5的字符串：

var str = 'abcde';
var regex = /^.{3,5}$/;
console.log(regex.test(str)); // true

其中，^.{3,5}$代表匹配长度为3到5个任意字符。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/241030.html