Vue 正则表达式详解

什么是正则表达式

正则表达式是一种强大的字符串匹配模式，它可以用来描述、识别并匹配一种或多种规则的字符串模式。在计算机科学领域，正则表达式通常被用于文本处理、搜索和验证输入的有效性。Vue.js是一种流行的JavaScript框架，它可以通过正则表达式来处理和验证用户输入的数据。

正则表达式的语法

正则表达式由一系列字符和特殊字符组成，它们用于描述字符串的规则和模式。下面是一些常用的正则表达式的语法：

字符类

字符类用于匹配特定范围内的字符。例如，[abc]表示匹配字符’a’、’b’或’c’中的任意一个。

反义字符类

反义字符类用于匹配除了指定范围内的字符之外的字符。例如，[^abc]表示匹配除了字符’a’、’b’和’c’之外的任意字符。

量词

量词用于指定匹配字符的数量。常见的量词包括：

*：匹配前一个字符的零个或多个实例。
+：匹配前一个字符的一个或多个实例。
?：匹配前一个字符的零个或一个实例。
{n}：匹配前一个字符的n个实例。
{n,}：匹配前一个字符的至少n个实例。
{n,m}：匹配前一个字符的n到m个实例。

边界匹配

边界匹配用于指定匹配字符串的边界。常见的边界匹配符包括：

^：匹配字符串的开始位置。
$：匹配字符串的结束位置。
\b：匹配一个单词边界。
\B：匹配一个非单词边界。

特殊字符

特殊字符主要用于匹配特定的字符或字符集。常见的特殊字符包括：

.：匹配任意字符（除了换行符）。
\d：匹配一个数字字符。
\D：匹配一个非数字字符。
\w：匹配一个单词字符（包括字母、数字和下划线）。
\W：匹配一个非单词字符。
\s：匹配一个空白字符（包括空格、制表符和换行符）。
\S：匹配一个非空白字符。

Vue 中使用正则表达式

在 Vue 中，我们可以利用正则表达式来处理和验证用户输入的数据。下面是一些常见的应用场景和示例代码：

校验电子邮件地址

export default {
  data() {
    return {
      email: '',
      isValidEmail: false
    };
  },
  methods: {
    validateEmail() {
      const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      this.isValidEmail = emailPattern.test(this.email);
    }
  }
};

校验手机号码

export default {
  data() {
    return {
      phoneNumber: '',
      isValidPhoneNumber: false
    };
  },
  methods: {
    validatePhoneNumber() {
      const phonePattern = /^1[3456789]\d{9}$/;
      this.isValidPhoneNumber = phonePattern.test(this.phoneNumber);
    }
  }
};

过滤非法字符

export default {
  data() {
    return {
      text: '',
      filteredText: ''
    };
  },
  methods: {
    filterText() {
      const illegalPattern = /[<>]/g;
      this.filteredText = this.text.replace(illegalPattern, '');
    }
  }
};

以上代码片段演示了如何在 Vue 组件中使用正则表达式来对用户输入进行校验和过滤。