注册
web

关于正则表达式,小黄人有话要说!!!

38dbb6fd5266d016a9ef9caf912bd40734fa3546.jpeg


引言(关于正则表达式,小黄人有话要说!!!)


掌握 JavaScript 正则表达式:从基础到高级,十个实用示例带你提升编程效率!


本文将带你逐步学习正则表达式的基础知识和高级技巧,从基本的元字符到实用的正则表达式示例,让你轻松掌握这一重要的编程技能。无论你是初学者还是有一定经验的开发者,这篇文章都能帮助你更好地理解和应用正则表达式。


如果您认为这篇文章对您有帮助或有价值,请不吝点个赞支持一下。如果您有任何疑问、建议或意见,欢迎在评论区留言。


image.png


如果你想快速入门 JavaScript 正则表达式,不妨点击这里阅读文章 "点燃你的前端技能!五分钟掌握JavaScript正则表达式"


字面量和构造函数


在 JavaScript 中,我们可以使用正则表达式字面量构造函数来创建正则表达式对象。


// 使用字面量
let regexLiteral = /pattern/;
// 使用构造函数
let regexConstructor = new RegExp('pattern');

正则表达式的方法


在 JavaScript 中,你可以使用正则表达式的方法进行模式匹配和替换。以下是一些常用的方法:




  • test():测试一个字符串是否匹配正则表达式。


    const regex = /pattern/;
    regex.test('string'); // 返回 true 或 false



  • exec():在字符串中执行正则表达式匹配,返回匹配结果的数组。


    const regex = /pattern/;
    regex.exec('string'); // 返回匹配结果的数组或 null



  • match():在字符串中查找匹配正则表达式的结果,并返回匹配结果的数组。


    const regex = /pattern/;
    'string'.match(regex); // 返回匹配结果的数组或 null



  • search():在字符串中搜索匹配正则表达式的结果,并返回匹配的起始位置。


    const regex = /pattern/;
    'string'.search(regex); // 返回匹配的起始位置或 -1



  • replace():在字符串中替换匹配正则表达式的内容。


    const regex = /pattern/;
    'string'.replace(regex, 'replacement'); // 返回替换后的新字符串



  • split():将字符串根据匹配正则表达式的位置分割成数组。


    const regex = /pattern/;
    'string'.split(regex); // 返回分割后的数组



u=1690536536,1627515251&fm=253&fmt=auto&app=138&f=JPEG.webp


基本元字符


正则表达式由字母、数字和特殊字符组成。其中,特殊字符被称为元字符,具有特殊的意义和功能。以下是一些常见的基本元字符及其作用:


元字符及其作用




  • 字符类 []



    • [abc]:匹配任意一个字符 a、b 或 c。
    • [^abc]:匹配除了 a、b 或 c 之外的任意字符。
    • [0-9]:匹配任意一个数字。
    • [a-zA-Z]:匹配任意一个字母(大小写不限)。



  • 转义字符 \



    • \d:匹配任意一个数字字符。
    • \w:匹配任意一个字母、数字或下划线字符。
    • \s:匹配任意一个空白字符。



  • 量词 {}



    • {n}:匹配前一个元素恰好出现 n 次。
    • {n,}:匹配前一个元素至少出现 n 次。
    • {n,m}:匹配前一个元素出现 n 到 m 次。



  • 边界字符 ^



    • ^pattern:匹配以 pattern 开头的字符串。
    • pattern$:匹配以 pattern 结尾的字符串。
    • \b:匹配一个单词边界。



  • 其他元字符



    • .:匹配任意一个字符,除了换行符。
    • |:用于模式的分组和逻辑 OR。
    • ():捕获分组,用于提取匹配的子字符串。
    • ?::非捕获分组,用于匹配但不捕获子字符串。



实例演示


现在,让我们通过一些实例来演示正则表达式中元字符的实际作用:


u=3528014621,1838675307&fm=253&fmt=auto&app=138&f=JPEG.webp



  • 字符类 []

let regex = /[abc]/;
console.log(regex.test("apple")); // true
console.log(regex.test("banana")); // false


  • 转义字符 \

let regex = /\d{3}-\d{4}/;
console.log(regex.test("123-4567")); // true
console.log(regex.test("abc-1234")); // false


  • 量词 {}

let regex = /\d{2,4}/;
console.log(regex.test("123")); // true
console.log(regex.test("12345")); // false
console.log(regex.test("12")); // true


  • 边界字符 ^

// 以什么开头
let regex = /^hello/;
console.log(regex.test("hello world")); // true
console.log(regex.test("world hello")); // false

// 单词边界
const pattern = /\bcat\b/;
console.log(pattern.test("The cat is black.")); // 输出:true
console.log(pattern.test("A cat is running.")); // 输出:true
console.log(pattern.test("The caterpillar is cute.")); // 输出:false


  • 其他元字符

// 捕获分组与模式分组
let regex = /(red|blue) car/;
console.log(regex.test("I have a red car.")); // true
console.log(regex.test("I have a blue car.")); // true
console.log(regex.test("I have a green car.")); // false

// 点号元字符
const pattern = /a.b/;
console.log(pattern.test("acb")); // 输出:true
console.log(pattern.test("a1b")); // 输出:true
console.log(pattern.test("a@b")); // 输出:true
console.log(pattern.test("ab")); // 输出:false

修饰符的使用


修饰符用于改变正则表达式的匹配行为,常见的修饰符包括 g(全局)、i(不区分大小写)和 m(多行)。


// 使用 `g` 修饰符全局匹配
const regex = /a/g;
const str = "abracadabra";
console.log(str.match(regex)); // 输出:['a', 'a', 'a', 'a']

// 使用 `i` 修饰符进行不区分大小写匹配
const pattern = /abc/i;
console.log(pattern.test("AbcDef")); // 输出:true
console.log(pattern.test("XYZ")); // 输出:false

十个高度实用的正则表达式示例


u=4075901265,1581553886&fm=253&fmt=auto&app=120&f=JPEG.webp



  1. 验证电子邮件地址:

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
console.log(emailPattern.test("example@example.com")); // 输出:true
console.log(emailPattern.test("invalid.email@com")); // 输出:false


  1. 验证手机号码:

const phonePattern = /^\d{11}$/;
console.log(phonePattern.test("12345678901")); // 输出:true
console.log(phonePattern.test("98765432")); // 输出:false


  1. 提取 URL 中的域名:

const url = "https://www.example.com";
const domainPattern = /^https?://([^/?#]+)(?:[/?#]|$)/i;
const domain = url.match(domainPattern)[1];
console.log(domain); // 输出:"www.example.com"


  1. 验证日期格式(YYYY-MM-DD):

const datePattern = /^\d{4}-\d{2}-\d{2}$/;
console.log(datePattern.test("2023-05-12")); // 输出:true
console.log(datePattern.test("12/05/2023")); // 输出:false


  1. 验证密码强度(至少包含一个大写字母、一个小写字母和一个数字):

const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
console.log(passwordPattern.test("Password123")); // 输出:true
console.log(passwordPattern.test("weakpassword")); // 输出:false


  1. 提取文本中的所有链接:

const text = "Visit my website at https://www.example.com. For more information, check out http://www.example.com/docs.";
const linkPattern = /https?://\S+/g;
const links = text.match(linkPattern);
console.log(links); // 输出:["[https://www.example.com](https://www.example.com/)", "<http://www.example.com/docs>"]


  1. 替换字符串中的所有数字为特定字符:

const text = "I have 3 apples and 5 oranges.";
const digitPattern = /\d/g;
const modifiedText = text.replace(digitPattern, "*");
console.log(modifiedText); // 输出:"I have * apples and * oranges."


  1. 匹配 HTML 标签中的内容:

const html = "<p>Hello, <strong>world</strong>!</p>";
const tagPattern = /<[^>]+>/g;
const content = html.replace(tagPattern, "");
console.log(content); // 输出:"Hello, world!"


  1. 检查字符串是否以特定后缀结尾:

const filename = "example.txt";
const suffixPattern = /.txt$/;
console.log(suffixPattern.test(filename)); // 输出:true


  1. 验证邮政编码(5 位或 5+4 位数字):

const zipCodePattern = /^\d{5}(?:-\d{4})?$/;
console.log(zipCodePattern.test("12345")); // 输出:true
console.log(zipCodePattern.test("98765-4321")); // 输出:true
console.log(zipCodePattern.test("1234")); // 输出:false

u=3763318279,485967013&fm=253&fmt=auto&app=138&f=JPEG.webp


通过正则表达式的核心概念和用法,结合实例和讲解。在实际开发中,不难发现正则表达式是一个强大的工具,可用于字符串处理、模式匹配和验证输入等方面。掌握正则表达式的技巧,可以大大提升 JavaScript 编程的效率和灵活性。


结语


感谢您的阅读!希望本文带给您有价值的信息。


如果对您有帮助,请「点赞」支持,并「关注」我的主页获取更多后续相关文章。同时,也欢迎「收藏」本文,方便以后查阅。


写作不易,我会继续努力,提供有意义的内容。感谢您的支持和关注!


290be963d171f8b42f347d7e97b62252.jpg.source.jpg


作者:Sailing
来源:juejin.cn/post/7249231231967232037

0 个评论

要回复文章请先登录注册