JavaScript基础&实战 JS中正则表达式的使用

简介: 这篇文章介绍了JavaScript中正则表达式的使用,包括正则表达式的创建、匹配模式、字符串匹配、拆分、搜索、匹配和替换等方法,并通过示例代码展示了如何应用这些技术。

文章目录

  • 1、正则表达式
    • 1.1 代码
    • 1.2 测试结果
  • 2、splict | search
    • 2.1 代码
    • 2.2 测试结果

1、正则表达式

在这里插入图片描述

1.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>正则表达式</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

    /*
              正则表达式用于一些字符串的规则
                 计算机可以根据正则表达式,来检查一个字符串是否符合规则
                 获取将字符串中符合规则的内容提取出来

            //创建正则表达式的对象


                语法:
                   var 变量 = new RegExp("正则表达式","匹配模式");
                   使用typeof检查正则对象,返回object    

                   匹配模式:
                          i 执行对大小写不敏感的匹配。
                          g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
                          m 执行多行匹配。



                   正则表达式的方法:
                        test()
                             使用这个方法可以用来检查一个字符串是否符合正则表达式的规则,
                                 如果符合则返回true,否则返回false


    */

              var reg = new RegExp("a","i");
              console.log(reg.test("A"))

              /*
                      使用字面量创建正则表达式
                                         语法: var 变量 =/正则表达式/匹配模式

                                         []里边的内容也是或的意思

                                         [abc] 查找方括号之间的任何字符。
                                         [^abc] 查找任何不在方括号之间的字符。
                                         [0-9] 查找任何从 0 至 9 的数字。
                                         [a-z] 查找任何从小写 a 到小写 z 的字符。
                                         [A-Z] 查找任何从大写 A 到大写 Z 的字符。
                                         [A-z] 查找任何从大写 A 到小写 z 的字符。

              */

              var reg =/a/i;
              console.log(reg.test("a"));

            //   使用| 表示或的意思
              reg =/a|b|c/;
              console.log(reg.test("adggg"));

              reg = /[afcd]/;
              console.log(reg.test("aerwf"));

              reg = /[a-z]/g;
              console.log(reg.test("f"));

            //   检查一个字符串中是否含有abc或adc或aec

            reg = /a[bdc]c/g;
            console.log(reg.test("adc"));



    </script>
</head>

<body>

</body>

</html>

1.2 测试结果

在这里插入图片描述

2、splict | search

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css"> </style>

    <script type="text/javascript">
    /*

             split()
                     可以将一个字符串拆分为一个数组
                      - 方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串

    */

            // 可以根据任意字母来将字符串拆分

            var str = "1a3d5d6g3b7x3c9";
            var result = str.split(/[A-z]/);
            console.log(result);

    /*
      search() 
              - 可以搜索字符串中是否有指定内容
              - 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1

    */

            var str1 = "Hello adc JS afc I am your father abc !!!!";
            var result1 = str1.search("JSw");

            var result2 = str1.search(/a[abc]c/);
            console.log(result2);
            console.log(result1);

    /*
            match()
                 - 可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
                 - 默认的情况下我们的match只会找到第一个符合要求的内容,找到以后就停止检索  
                       可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容
                       可以为一个正则表达式设置多个匹配模式,且顺序无所谓

                - mathc() 会将匹配到的内容封装到一个数组中返回,即使只查到一个结果

    */

             var str1 = "Hello234 adc JS af6789c I am y555our fathe9999r abc !!!!";
             result = str1.match(/[a-z]/gi);
             console.log(result);

    /*
             replace()
                      - 可以将字符串中指定内容替换为新的内容
                      - 参数:
                            1、被替换的内容
                            2、新的内容      

                            默认替换第一个

    */

          var str1 = "Hello234 adc JS af6789c I am y555our fathe9999r abc !!!!";
          result = str1.replace(/[a]/g,"@@");
          console.log(result);

          result2 = str1.replace(/[A-z]/g,"");
          console.log(result2);



    </script>
</head>

<body>

</body>

</html>

2.2 测试结果

在这里插入图片描述

相关文章
|
30天前
|
存储 安全 API
Next.js 实战 (九):使用 next-auth 完成第三方身份登录验证
这篇文章介绍了next-auth,一个为Next.js设计的身份验证库,支持多种认证方式,如电子邮件和密码、OAuth2.0提供商(如Google、GitHub、Facebook等)以及自定义提供商。文章包含了如何配置Github Provider以及会话管理,并提到了适配器Adapters在next-auth中的作用。最后,文章强调了next-auth的强大功能值得进一步探索。
71 10
|
15天前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
62 32
|
1月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
90 33
|
1月前
|
中间件 API
Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中,作者遇到了打包构建时的一系列报错,报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整,作者最终删除了lodash-es库,并将radash的部分源码复制到本地,解决了打包报错的问题。文章最后提供了项目的线上预览地址,并欢迎读者留言讨论更好的解决方案。
39 10
|
2月前
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
|
1月前
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
|
2月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
26天前
|
监控 安全 中间件
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
|
2月前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
2月前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
102 5

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    52
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62