前端笔记——正则(例题,源码)

这篇具有很好参考价值的文章主要介绍了前端笔记——正则(例题,源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是正则表达式?

  • 正则表达式是构成搜索模式(search pattern)的字符序列。
  • 当您搜索文本中的数据时,您可使用搜索模式来描述您搜索的内容。
  • 正则表达式可以是单字符,或者更复杂的模式。
  • 正则表达式可用于执行所有类型的文本搜索文本替换操作。

使用字符串方法

在 JavaScript 中,正则表达式常用于下面几个字符串方法

search() 

        search()方法使用表达式来搜索匹配,然后返回匹配的位置。

        注意哦search()方法返回的是匹配字符串的位置

  search()实例
    var str = "Hello World";
    console.log(str.search(/World/i));
    // 控制台结果为6

replace() 

        replace()方法返回模式被替换处修改后的字符串。

  replace()实例
    var str16 = "Hello World!";
    console.log(str16.replace(/World/i, "Microsoft"));
    // 控制台输出结果为 Hello Microsoft!

match()

        字符串匹配到正则表达式时,改方法会提取匹配项并返回包含匹配项的数组,如果未找到匹配项,则 match() 方法返回 null。

  match()实例
    var str17 = "Hello, World!";
    console.log(str17.match(/o/g));
    // 输出: ["o", "o"]

正则表达式修饰符

修饰符用于执行不区分大小写和全局的搜索:

修饰符 描述 试一试
i 执行对大小写不敏感的匹配。 试一试
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 试一试
m 执行多行匹配。 试一试

正则表达式模式

括号用于查找一定范围的字符串:

表达式 描述
[abc] 查找括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[^0-9] 查找任何不在括号内的字符(任何非数字)。
(x|y) 查找任何指定的选项。

元字符(Metacharacter)是拥有特殊含义的字符:

元字符 描述
. 查找单个字符,除了换行符或行终止符。
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 在单词的开头/结尾查找匹配项,开头如下:\bHI,结尾如下:HI\b。
\B 查找匹配项,但不在单词的开头/结尾处。
\0 查找 NULL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

Quantifiers 定义量词:

量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何以 n 结尾的字符串。
^n 匹配任何以 n 开头的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

 正则例题

  1. 将a换成b,b换成a

        const str = 'aabbasdfccdd'
        console.log(str.replace(/a/g, 'x').replace(/b/g, 'a').replace(/x/g, 'b'));
        // 控制台输出结果为 bbaabsdfccdd
  2. 将the-first-name变成theFirstName

        const str1 = 'the-first-name';
        const newStr = str1.replace(/-([a-z])/g, function(match, char) {
            return char.toUpperCase();
        });
        console.log(newStr);
        // 控制台输出结果为 theFirstName
  3. 数字价格千分位分割

        const str2 = '100000000000000'
        console.log(str2.replace(/\B(?=(\d{3})+$)/g,'.'))
        // 控制台输出结果为 100.000.000.000.000
  4. 数字价格千分位分割还原

        const str3 = '1.000.000.000'
        console.log(str3.replace(/\./g, ''));
        // 控制台输出结果为 1000000000
  5. 手机号3-4-4分割扩展,将手机号18379836654转化为183-7983-6654

        const str4 = '18379836654'
        console.log(str4.replace(/\B(?=(\d{4})+$)/g,'-'))
        // 控制台输出结果为 183-7983-6654
  6. 验证密码的合法性(密码长度是6-12位,由数字、小写字母和大写字母组成)

        const regex1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,12}$/;
        const password = 'aaaaAB111';
        if (regex1.test(password)) {
            console.log('true');
        } else {
            console.log('false');
        }
        
        // 控制台输出结果为 true
  7. 用正则实现一个trim函数,除字符串的首尾空格

        const str5 = '   123456   ';
        console.log(str5.replace(/\s+/g, ''));
        // 控制台输出结果为 123456(去掉首尾空格的)
  8. 将字符串首字母转化为大写,剩下为小写(例如 hello world 转为为Hello World

        const str6 = 'hello world';
        const newStr6 = str6.replace(/\b\w/g, c => c.toUpperCase());
        console.log(newStr6);
        //控制台输出结果为 Hello World
  9. 匹配日期格式,要求匹配(yyyy-mm-dd、yyyy.mm.dd、yyyy/mm/dd)

        const str7 = '2024-03-03';
        const regex = /^\d{4}[-./](0[1-9]|1[0-2])[-./](0[1-9]|1[0-9]|2[0-9]|3[01])$/;
        if (regex.test(str7)) {
            console.log('true');
        } else {
            console.log('false');
        }
        // 控制台输出结果为 true
  10. 提取连续重复的字符,将有重复的字符提取出来

        const str8 = "12323454545666";
        console.log(str8.match(/(.)\1+/g));
         控制台输出结果为 666

        这只是博主的笔记和浅见,更多的大家可以参考W3School官网正则表达式这一章,博主大部分也是参考的这个官网,如果大家认为有错误的地方都可以随时评论留言或联系博主QQ。

        还多请各位小伙伴多多点赞支持,你们的支持是我最大的动力。

博主QQ:1196094293

谢谢各位的支持~~文章来源地址https://www.toymoban.com/news/detail-839706.html

到了这里,关于前端笔记——正则(例题,源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【23JavaScript 正则表达式】深入解析JavaScript正则表达式:基础概念、常用方法和实例详解,轻松掌握强大的文本模式匹配工具

    正则表达式是一种强大的文本模式匹配工具,用于在字符串中搜索和操作特定的文本模式。在JavaScript中,正则表达式提供了一种灵活的方式来处理字符串操作。 在JavaScript中,可以通过使用字面量表示法或RegExp对象来创建正则表达式。 字面量表示法 RegExp对象 JavaScript中的正则

    2024年02月08日
    浏览(63)
  • javaScript基础语法之正则表达式

    表达式 描述 [0-9] 查找任何从 0 至 9 的数字。例如,匹配: \\\'111\\\' ,不匹配:\\\'eee\\\' [abc] 查找方括号之间的任何字符。例如,/[123]/ 匹配 \\\"1234567\\\" 中的 \\\"123\\\",\\\"1\\\" 中的 \\\"1\\\"。但是不匹配 \\\"4567890\\\"。 [^abc] 查找任何不在方括号之间的字符。例如,/[^123]/ 匹配 \\\"4567890\\\" 中的 \\\"4567890\\\"。但是不匹

    2024年02月09日
    浏览(50)
  • 15个常用的javaScript正则表达式

    c 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 onsole.log(uPattern.test(“iFat3”)); 2密码强度正则 //密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符 var pPattern=/

    2024年01月17日
    浏览(64)
  • 防止 JavaScript 中的正则表达式回溯

    正则表达式是用于在软件应用程序中操作和验证文本的强大工具。然而,某些正则表达式模式可能容易受到回溯的影响,这可能会导致超线性运行时,并可能导致DoS攻击。在本文中,我们将探讨什么是回溯、它如何导致性能问题以及如何在正则表达式中防止回溯。 回溯是正则

    2024年02月12日
    浏览(50)
  • JavaScript |(四)正则表达式 | 尚硅谷JavaScript基础&实战

    学习来源 :尚硅谷JavaScript基础实战丨JS入门到精通全套完整版 系列笔记 : JavaScript |(一)JavaScript简介及基本语法 JavaScript |(二)JavaScript自定义对象及函数 JavaScript |(三)内建对象 | 数组 | string对象 JavaScript |(四)正则表达式👇 JavaScript |(五)DOM简介 JavaScript |(六)

    2024年02月14日
    浏览(55)
  • 【JavaScript_2】语法、标准库、正则表达式

    1、强制转换 使用Number函数,可以将任意类型的值转化成数值。 Number函数将字符串转为数值,要比parseInt函数严格很多。基本上,只要有一个字符无法转成数值,整个字符串就会被转为NaN。 上面代码中,parseInt逐个解析字符,而Number函数整体转换字符串的类型。 另外,parseI

    2024年02月13日
    浏览(58)
  • JavaScript Web APIs - 06 正则表达式

    目标:能够利用正则表达式完成小兔鲜注册页面的表单验证,具备常见的表单验证能力 正则表达式 综合案例 阶段案例 正则表达式 (

    2024年02月10日
    浏览(58)
  • 【Java 进阶篇】JavaScript 正则表达式(RegExp)详解

    JavaScript 正则表达式,通常简写为 RegExp,是一种强大的文本匹配工具,它允许你通过一种灵活的语法来查找和替换字符串中的文本。正则表达式在编程中用途广泛,不仅限于 JavaScript,在许多编程语言中也都有类似的实现。 正则表达式,简称正则或RegExp,是一个用于描述字符

    2024年02月07日
    浏览(55)
  • 前端系列:正则表达式RegExp详解

    字面量创建 构造函数 字符串方法 match:返回一个字符串匹配正则表达式的结果,如果未找到匹配则为 null search:返回正则表达式在字符串中首次匹配项的 索引 ;否则,返回 -1 replace:返回一个由替换值( replacement )替换部分或所有的模式( pattern )匹配项后的新字符串。模式可以

    2024年02月02日
    浏览(71)
  • 老夫的正则表达式大成了,桀桀桀桀!!!【Python 正则表达式笔记】

    特殊字符 .^$?+*{}[]()| 为特殊字符,若想要使用字面值,必须使用 进行转义 字符类 [] [] 匹配包含在方括号中的任何字符。它也可以指定范围,例: [a-zA-Z0-9] 表示a到z,A到Z,0到9之间的任何一个字符 [u4e00-u9fa5] 匹配 Unicode 中文 [^x00-xff] 匹配双字节字符(包括中文) 在 [] 中

    2024年02月04日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包