JavaScript Day9

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量35 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Follow_haodi/article/details/132698635
版权

1. 正则表达式简介

.1 什么是正则表达式

正则表达式：用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。 正则表达式（Regular Expression）是一种描述字符模式的对象。JavaScript中的RegExp类表示正则表达式，String和RegExp类型都定义了使用正则的方法，后者使用正则表达式进行强大的模式匹配和文本检索与替换功能。

1.2 正则表达式的作用

  1. 给定的字符串是否符合正则表达式的过滤逻辑(匹配)

  2. 可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)

  3. 强大的字符串替换能力(替换)

    提示：对于复杂的正则表达式不用过多研究，在工作都是写好复制的，但是要求根据需求使用正则表达式。

2. 正则表达式的使用

JavaScript中的正则表达式用RegExp类型的对象表示。我们可以通过RegExp()构造函数来创建RegExp对象，也可以通过直接量语法来创建。

2.1 创建正则表达式的方式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.字面量形式
        var reg = /a/;

        // 2.通过构造函数创建
        var reg2 = new RegExp(/b/);
        console.log(reg);
        console.log(reg2);
    </script>
</body>

</html>
2.2 参数（匹配的模式）
i忽略大小写
g全局匹配
gi全局匹配+忽略大小写
m多行匹配
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // i 忽略大小写
        // g 全局匹配
        // gi 全局匹配 + 忽略大小写

        var reg = /abc/gi;

        var str = "abc";
        var str2 = "defabc";
        var str3 = "defghabc";

        console.log(reg.test(str));
        console.log(reg.test(str2));
        console.log(reg.test(str3));
        console.log(reg.test(str3));

        
    </script>
</body>

</html>
2.3 测试正则表达式

test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。

exec() 方法用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值返回该匹配值，否则返回 null。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = "abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabc";

        var reg = /abc/gi;

        // exec() 方法用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值返回该匹配值，否则返回 null。
        console.log(reg.exec(str));
        console.log(reg.exec(str));
        console.log(reg.exec(str));
    </script>
</body>

</html>

3. 正则表达式的组成

  • 普通字符abc 123

  • 特殊字符：正则表达式中有特殊意义的字符

3.1 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符--精确匹配

边界符说明
^表示匹配行首的文本（以谁开始）
$表示匹配行尾的文本（以谁结束）

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // ^ 以谁开始
        // $ 以谁结束
        var reg = /^abc$/;

        var str = "abcabc";

        console.log(reg.test(str));
    </script>
</body>

</html>
3.2 [ ] 中括号

有一系列字符用中括号括起来，表示匹配其中的任一字符，多选一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var reg = /[abc]/;

        var str = "agfjdhfdhfjsdh";

        console.log(reg.test(str));

        var reg2 = /^[a-zA-z]/;

        var userName = "123zq123456";
        console.log(reg2.test(userName));
    </script>
</body>

</html>
3.3 量词符

量词符用来设定某个模式出现的次数。

量词说明
*出现0次或更多次
+出现1次或更多次
?出现0次或1次
{n}出现n次
{n,}出现n次或更多次
{n,m}出现n到m次

  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // * 出现0次或更多次
        // + 出现1次或更多次
        // ? 出现0次或1次
        // {n} 出现n次
        // {n,} 出现n次或更多次
        // // {n,m}  出现n到m次
        // var reg = /^[a-z]{3,5}$/;
        // var str = "abcde";
        // console.log(reg.test(str));

        // // var reg2 = /^?$/;
        // var str2 = "asdabcabcabc.1";
        // console.log(reg2.test(str2));

        // var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

        // var reg3 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/

        var reg4 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;

        console.log(reg4.test("ASDasdasd"));
    </script>
</body>

</html>
3.4 元字符类

预定义类指的是某些常见模式的简写方式.

元字符说明
\d匹配数字，任何ASCII数字，等价于[0-9]匹配一个数字
\D匹配任意非数字的字符，除了ASCII数字之外的任何字符，等价于[^0-9]
\w匹配字母或数字或下划线，等价于[a-zA-Z0-9_]
\W匹配任意不是字母，数字，下划线，等价于[^a-zA-Z0-9_]
\s匹配任意的空白符[\t\r\n\v\f]<br>空格（‘ ’）、换页（‘\f’）、换行（‘\n’）、回车（‘\r’）、水平制表符（‘\t’）、垂直制表符（‘\v’）
\S匹配任意不是空白符的字符[^\t\r\n\v\f]
.匹配除换行符和行结束符以外的任意单个字符
|或者，选择两者中的一个。将左右两边分为两部分，而不管左右两边有多长多乱
\.将特殊字符转义成(.)当成普通字符.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var reg1 = /\d/;  // [0-9]
        var reg2 = /\D/;  // 非数字 [^0-9]
        var reg3 = /\w/;  // 字母或数字或下划线  [a-zA-Z0-9_]
        var reg4 = /\W/;  // 非字母数字下划线  [^a-zA-Z0-9_]
        var reg5 = /\s/;    // 任意的空白符  [\t\n\r\v\f]
        var reg6 = /\S/;    // 任意的非空白符  [^\t\n\r\v\f]
        var reg7 = /a|b/;
        var reg8 = /\./;
        var str1 = ".";
        console.log(reg8.test(str1));
    </script>
</body>

</html>

 案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .danger {
            color: red;
        }
    </style>
</head>

<body>
    <span class="">用户名：</span><input type="text"><br>
    <span>密码：</span><input type="text">

    <script>
        var userReg = /^[a-z]\d{6,10}$/;
        var psdReg = /^[a-zA-Z0-9_-]{6,16}$/;
        var phoneReg = /^1[3|5|7|8|9]\d{9}$/;
        var emailReg = /\w+@\w+\.\w+(\.\w+)?/;

        var userName = document.getElementsByTagName("input")[0];
        var psd = document.getElementsByTagName("input")[1];
        var nameTxt = document.getElementsByTagName("span")[0]
        var psdTxt = document.getElementsByTagName("span")[1]

        userName.oninput = function () {
            if (!userReg.test(userName.value)) {
                nameTxt.className = "danger";
            } else {
                nameTxt.className = "";
            }
        }
        psd.oninput = function(){
            if (!emailReg.test(psd.value)) {
                psdTxt.className = "danger";
            } else {
                psdTxt.className = "";
            }
        }
    </script>
</body>

</html>

4. 正则提取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // match() 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。返回值是存放匹配结果的数组。该数组的内容依赖于RegExp 是否具有全局标志 g。
        
        var str = "123123@qq.com,ziyuanyihe@163.cn 87666444@qq.com englishtown.com";
        var str2 = "name=zs&psd=123&gender=nan";

        var reg = /\w+@\w+\.\w+(\.\w+)?/g;
        var reg2 = /\w+=\w+/g;

        console.log(str.match(reg));
        console.log(str2.match(reg2));
    </script>
</body>

</html>

5. 正则替换和查询

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = "hello world";

        var reg = /o/g;

        console.log(reg.lastIndex);
        console.log(reg.exec(str));
        console.log(reg.lastIndex);
        console.log(reg.exec(str));
        console.log(reg.lastIndex);


        // console.log(str.search(/o/g));
        // console.log(str.replace(/o/g, "O"));


    </script>
</body>

</html>

Follow_浩弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript Day_02
03-24
javascript第二天笔记
JavaScript Day_03
03-24
javascript学习第三天笔记
JavaScript Day_01
03-24
javascript学习第一天笔记
day9_bytgq_javascript_
10-02
在“day9_bytgq_javascript_”这个资源中，我们很显然聚焦于JavaScript的学习，尤其是第九天的学习内容。尽管描述中提到这只是day9的学习材料，但JavaScript的学习是一个循序渐进的过程，每一部分都至关重要。 首先...
JS.rar_day3lb_javascript
09-23
在"JS.rar_day3lb_javascript"这个压缩包中，我们很显然关注的是JavaScript技术，特别是与“futdraft”程序相关的应用。"futdraft"可能是一个足球模拟选秀或者阵容构建的应用，这需要对JavaScript有深入的理解以及对...
nodejs安装
a1241436267的博客
08-19 375
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 317
npm。
2024前端面试题-js篇
FormAda的博客
08-22 687
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 563
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
galaxyJING的博客
08-21 313
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 990
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 1016
react详细自我学习笔记，内容包括JSX、Redux、Router等
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 882
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 215
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
????鱼干～
08-22 627
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
Vue :class 绑定可以结合多个判断维度来动态设置类
u010865136的专栏
08-19 227
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
vue3 @antv/x6 使用画布滚动条以后的几个问题的解决
jwbabc的专栏
08-20 504
通过设置@antv/x6的插件scroller的options，来达到基本上满足项目的原型要求。
前端点击预览图片：Viewer.js 使用方法
mq1314520_zhl的博客
08-21 719
Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。Viewer.js分为2个版本，js版本和jquery版本，下载地址分别为jQuery 版本：GitHub - fengyuanchen/jquery-viewer: A jQuery plugin wrapper for Viewer.js.
Vue路由
程小白的博客
08-19 574
这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。
JavaScript Day_03：循环语句详解
"JavaScript Day_03 - 学习前端开发中的循环语句，包括while、do-while和for循环，以及break和continue关键字的使用" 在JavaScript中，循环语句是编程中非常重要的一部分，它允许我们重复执行一段代码，尤其在处理...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值