WEB APIs day6

news2024/11/29 5:45:23

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

一、正则表达式

在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
RegExp是正则表达式的意思
在这里插入图片描述在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式的使用</title>
</head>

<body>
    <script>
        const str = '我们在学习前端，希望学习前端能高薪毕业'
        // 正则表达式使用：
        // 1. 定义规则
        const reg = /前端/
        // const reg = /java/
        // 2. 是否匹配 test()
        // 这个字符串里面有没有前端两个字
        // console.log(reg.test(str))    // true/false  重点记住这种方法即可
        // 3. exec()
        console.log(reg.exec(str))   //  返回数组
    </script>
</body>

</html>

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
1-9占一位，{ }只是重复前面出现的次数，它不会重复1-9，它重复的次数一定是离他最近的一个，所以它重复4次，一加就是5次以上了，10000正好是5次
在这里插入图片描述在这里插入图片描述在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元字符</title>
</head>

<body>
    <script>
        // 元字符
        // 前面定义规则，后面来检测符合规则
        /*  console.log(/哈/.test('哈'))     // true
         console.log(/哈/.test('哈哈'))   //true
         console.log(/哈/.test('二哈'))   //true
         console.log('---------------------')
         // 1. 边界符
         console.log(/^哈/.test('哈'))     // true
         console.log(/^哈/.test('哈哈'))     // true
         console.log(/^哈/.test('二哈'))     // false
         // 除了匹配开头还有匹配结尾，平时开发中我们一般都写，因为精确匹配
         console.log(/^哈$/.test('哈'))     // true
         console.log(/^哈$/.test('哈哈'))     // false
         console.log(/^哈$/.test('二哈'))     // false
 
         console.log('--------------------') */
        // 量词 * 类似 >=0 次
        // 出现几次没关系，只要是以同一个哈开头以同一个哈结尾
        /* console.log(/^哈$/.test('哈'))     // true
        console.log(/^哈*$/.test(''))     // true
        console.log(/^哈*$/.test('哈'))     // true
        console.log(/^哈*$/.test('哈哈'))     // true
        console.log(/^哈*$/.test('二哈很傻'))     // false
        console.log(/^哈*$/.test('哈很傻'))     // false
        console.log(/^哈*$/.test('哈很哈'))     // false
        console.log('--------------------') */

        // 量词 + 类似 >=1 次
        /*  console.log(/^哈+$/.test(''))     // false
         console.log(/^哈+$/.test('哈'))     // true
         console.log(/^哈+$/.test('哈哈'))     // true
         console.log(/^哈+$/.test('二哈很傻'))     // false
         console.log(/^哈+$/.test('哈很傻'))     // false
         console.log(/^哈+$/.test('哈很哈'))     // false
         console.log('--------------------') */

        /*  console.log('--------------------')
         // 量词 ? 类似 0 || 1
         console.log(/^哈?$/.test(''))    // true
         console.log(/^哈?$/.test('哈'))    // true
         console.log(/^哈?$/.test('哈哈'))    // false
         console.log(/^哈?$/.test('二哈很傻'))    // false
         console.log(/^哈?$/.test('哈很傻'))    // false
         console.log(/^哈?$/.test('哈很哈'))    // false
         console.log('--------------------') */

        /*  // 量词 {n} 写几，就必须出现几次
         console.log(/^哈{4}$/.test('哈'))
         console.log(/^哈{4}$/.test('哈哈'))
         console.log(/^哈{4}$/.test('哈哈哈'))
         console.log(/^哈{4}$/.test('哈哈哈哈'))   // true ,其它几个全是false
         console.log(/^哈{4}$/.test('哈哈哈哈哈'))
         console.log(/^哈{4}$/.test('哈哈哈哈哈哈'))
         console.log('--------------------') */

        // 量词 {n,}  >=n
        console.log(/^哈{4,}$/.test('哈'))
        console.log(/^哈{4,}$/.test('哈哈'))
        console.log(/^哈{4,}$/.test('哈哈哈'))
        console.log(/^哈{4,}$/.test('哈哈哈哈'))    // >=4的都为true
        console.log(/^哈{4,}$/.test('哈哈哈哈哈'))
        console.log(/^哈{4,}$/.test('哈哈哈哈哈哈'))
        console.log('--------------------')

        // 量词 {n,m}  逗号左右两侧千万不能有空格   >=n && <=m
        console.log(/^哈{4,6}$/.test('哈'))
        console.log(/^哈{4,6}$/.test('哈哈'))
        console.log(/^哈{4,6}$/.test('哈哈哈'))
        console.log(/^哈{4,6}$/.test('哈哈哈哈'))
        console.log(/^哈{4,6}$/.test('哈哈哈哈哈'))
        console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈'))
        console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈'))

        console.log('--------------------')
        // 字符类  [abc]  只选1个
        console.log(/^[abc]$/.test('a'))    //true
        console.log(/^[abc]$/.test('ad'))    //false
        console.log(/^[abc]$/.test('b'))    //true
        console.log(/^[abc]$/.test('c'))    //true
        console.log(/[abc]/.test('ab'))    //true
        console.log(/^[abc]$/.test('ab'))    //false  因为是精确匹配
        console.log(/^[abc]{2}$/.test('ab'))    //true
        console.log('--------------------')
        // 字符类  [a-z]   只选1个  多选一，只能出现一个不能出现2个 2个要加量词
        console.log(/^[a-z]$/.test('f'))    //true
        console.log(/^[A-Z]$/.test('f'))    //false
        console.log(/^[A-Z]$/.test('F'))    //true
        console.log(/^[0-9]$/.test(2))    //true
        console.log(/^[a-zA-Z0-9]$/.test(2))    //true
        console.log(/^[a-zA-Z0-9]$/.test('p'))    //true
        console.log(/^[a-zA-Z0-9]$/.test('P'))    //true
        console.log('--------------------')
    </script>
</body>

</html>

在这里插入图片描述
短横线一定要写在最后面，因为写在中间表示范围，前面的a-z就是表示范围
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证用户名案例</title>
    <style>
        span {
            display: inline-block;
            width: 250px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            padding-left: 15px;
        }

        .error {
            color: red;
            background: url(./images/error1.png) no-repeat left center;
        }

        .right {
            color: green;
            background: url(./images/right.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <input type="text">
    <span></span>
    <script>
        // 1. 准备正则
        // regexp正则表达式
        const reg = /^[a-zA-Z0-9-_]{6,16}$/
        const input = document.querySelector('input')
        // 因为太长了，所以可以调用一个类名
        const span = input.nextElementSibling
        // 失去焦点为false还是true
        input.addEventListener('blur', function () {
            // this也行，input也行
            // console.log(reg.test(this.value))
            if (reg.test(this.value)) {
                // span不用获取，因为span是input的下一个兄弟
                span.innerHTML = '输入正确'
                // 调用正确的类
                // span.classList.add('right')
                span.className = 'right'
            } else {
                span.innerHTML = '请输入6~16位的英文数字下划线'
                // 先输入一个正确的数据，再输入一个错误的数据，就会出现覆盖错误
                // 既有right类又有error类，添加了2个类，下面的就会覆盖上面的，所以error没有起效果，所以删除移除或者更简单一点className，因为className会覆盖类名，反正我们当前只能有一个类名，所以我们这样写就行了
                // span.classList.add('error')
                span.className = 'error'
            }
        })
    </script>

</body>

</html>

在这里插入图片描述在这里插入图片描述在这里插入图片描述
修饰符直接写在正则表达式后面
在这里插入图片描述在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则修饰符</title>
</head>

<body>
    <script>
        console.log(/^java$/.test('java'))
        console.log(/^java$/.test('JAVA'))
        // 加上i，匹配的时候不区分大小写
        console.log(/^java$/i.test('JAVA'))
        // vscode里面ctrl+h是查找替换，有替换一个和全部替换
        const str = 'java是一门编程语言，学完JAVA工资很高哦'
        // str.replace(/java/i, '前端')
        const re = str.replace(/java/ig, '前端')
        // 没有被替换掉，str得到的还是原先的字符串,这时候我们就考虑它替换完之后有一个返回值，所以就不是打印str
        // 发现只有第一个java被替换掉了，我们这种查找替换只能查找一个，但我们要的是全局替换，ig或者gi都可以，只要写上2个，意思就是不但不区分大小写而且还全局替换
        // js中的或是||，而正则里面的或是|
        // 这样也能替换掉
        // const re = str.replace(/java|JAVA/g, '前端')
        console.log(re)
    </script>
</body>

</html>

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤敏感词</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <div></div>
    <script>
        // 其实也可以把中间选出来（button），上一个兄弟下一个兄弟,介于nextElementSibling也挺长，所以还是获取吧
        const tx = document.querySelector('textarea')
        const btn = document.querySelector('button')
        const div = document.querySelector('div')
        btn.addEventListener('click', function () {
            // console.log(tx.value)
            // div.innerHTML = tx.value
            // 过滤一下，做一个替换
            div.innerHTML = tx.value.replace(/怪力乱神|玄乎的事/g, '****')
            // 可以把表单清空，当它填充完之后，让它的tx.value = 空 即可
            tx.value = ''
        })
    </script>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/975577.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

异步驱动电机总成汇总

异步驱动电机总成汇总

特斯拉双电机 蔚来ET7异步电驱 蔚来ET5异步电驱 问界M5异步电驱 比亚迪海豹异步异步电驱 汇川800v异步电驱 阿维塔异步电驱 小鹏G6异步电驱 小鹏G9异步电驱 大众ID4异步电驱 奥迪etron异步电驱 欢迎补充&#xff5e;&#xff5e;&#xff5e;欢迎转载&#xff01;&#xff01;&…
阅读更多...
适合心理法律在线咨询预约含视频图文电话咨询功能的小程序开发

适合心理法律在线咨询预约含视频图文电话咨询功能的小程序开发

目前智能手机普及&#xff0c;很多以前需要线下咨询的场景都被搬到了线上&#xff0c;这样既可以使咨询者更方便&#xff0c;也可以使被咨询者接待效率更高&#xff0c;服务更多咨询者。基于此我们开发了专门的一款具有线上咨询功能的小程序&#xff0c;同时为了方便被咨询者服…
阅读更多...
算法笔记：点四叉树

算法笔记：点四叉树

点四叉树是一种用于主要是针对空间点存储与索引的树形数据结构在点四叉树中&#xff0c;空间被分割成四个矩形&#xff0c;四个不同的多边形对应于SW、NW、SE、NE四个象限 1 基本操作 1.1 初始化 创建一个根节点&#xff0c;该节点代表整个二维空间区域 1.2 插入点 当一个新…
阅读更多...
深入理解 JVM 之——垃圾回收与内存分配策略

深入理解 JVM 之——垃圾回收与内存分配策略

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 垃圾回收策略 说起垃圾收集&#xff08;Garbage Collection&#xff0c;下文简称GC&#xff09;&#xff0c;有不少人把这项技术当作Java语言的伴生产物。事实上&#xff0c;垃圾收集的历史远远比Java久远&…
阅读更多...
【力扣周赛】第 360 场周赛（贪心 ⭐树上倍增）

【力扣周赛】第 360 场周赛（贪心 ⭐树上倍增）

文章目录 竞赛链接Q1&#xff1a;8015. 距离原点最远的点&#xff08;贪心&#xff09;Q2&#xff1a;8022. 找出美丽数组的最小和&#xff08;贪心&#xff09;Q3&#xff1a;2835. 使子序列的和等于目标的最少操作次数&#xff08;贪心&#xff09;思路竞赛时丑陋代码&#x…
阅读更多...
SquirrelMail实现Web方式收发邮件_xionglling的博客-CSDN博客

SquirrelMail实现Web方式收发邮件_xionglling的博客-CSDN博客

SquirrelMail实现Web方式收发邮件_xionglling的博客-CSDN博客小松鼠实现Web邮件服务SquirrelMail 是一个用PHP开发的Web邮件系统。它内置纯PHP支持的IMAP和SMTP协议&#xff0c;所有页面都遵循 HTML 4.0标准(没有使用任何 JavaScript 代码)&#xff0c;以便最大限度兼容各种多浏…
阅读更多...
java对象的组成部分

java对象的组成部分

在 HotSpot 虚拟机里&#xff0c;对象在堆内存中的存储布局可以划分为三个部分&#xff1a;对象头&#xff08;Header&#xff09;、实例数据&#xff08;Instance Data&#xff09;和对齐填充&#xff08;Padding&#xff09; 对象头主要由两部分组成&#xff1a; 第一部分存…
阅读更多...
详细介绍 display: block（块级元素）、inline-block（行内块元素）和inline（行内元素）的差别

详细介绍 display: block（块级元素）、inline-block（行内块元素）和inline（行内元素）的差别

html元素的类型主要可分为块级元素、行内元素、行内块元素分别对应的各自的display属性&#xff0c;block、inline、inline-block html的标签都被默认设置了对应的display属性值&#xff0c;例如 块级元素&#xff1a;默认设置display:block的元素 <div>、<h1>~…
阅读更多...
无涯教程-JavaScript - NETWORKDAYS函数

无涯教程-JavaScript - NETWORKDAYS函数

描述 NETWORKDAYS函数返回start_date和end_date之间的整个工作日数。工作日不包括周末和节假日中确定的任何日期。 语法 NETWORKDAYS (start_date, end_date, [holidays])争论 Argument描述Required/OptionalStart_dateA date that represents the start date.RequiredEnd_…
阅读更多...
软件游戏丢失d3dcompiler_47.dll怎么办？这个几个解决方法可修复

软件游戏丢失d3dcompiler_47.dll怎么办？这个几个解决方法可修复

当我们在玩软件游戏时&#xff0c;有时候会出现丢失 d3dcompiler_47.dll 的问题&#xff0c;这让我们感到非常困扰。d3dcompiler_47.dll 是 DirectX 中的一个重要组件&#xff0c;如果它丢失了&#xff0c;那么很多游戏就无法正常运行。我将和大家分享一下我在解决软件游戏丢失…
阅读更多...
美妆+七人拼团模式：如何打造新型社交电商营销方式

美妆+七人拼团模式：如何打造新型社交电商营销方式

美妆是一个充满竞争和创新的行业&#xff0c;要想在市场上获得优势&#xff0c;就需要不断寻找新的营销方式&#xff0c;吸引和留住消费者。七人拼团模式就是一种结合了社交电商和拼购玩法的新型商业模式&#xff0c;它可以利用社交网络的裂变效应&#xff0c;增加品牌曝光度和…
阅读更多...
我国元宇宙相关专利数居世界第二，中创元宇宙发展取得阶段性进步！

我国元宇宙相关专利数居世界第二，中创元宇宙发展取得阶段性进步！

元宇宙是工业和互联网的下一次大变革方向&#xff0c;将划分出一个时代 9月2日&#xff0c;2023年中国国际服务贸易交易会&#xff08;以下简称“服贸会”&#xff09; 在京召开。 在同期举行的数字贸易发展趋势和前沿高峰论坛上&#xff0c;我国元宇宙产业生态在各方的支持下…
阅读更多...
2.IDE的优化与插件

2.IDE的优化与插件

文章目录 后端IDEA配置maven配置git配置名字插件安装参考资料 前端vs codeopenssh远程环境开发 后端IDEA 配置maven 参考&#xff1a;https://blog.csdn.net/weixin_44458365/article/details/118416385 -DarchetypeCataloginternal注意&#xff1a;一旦勾选下面的选项&…
阅读更多...
SIP mini对讲 SV-10/SV-10W 86型sip对讲终端

SIP mini对讲 SV-10/SV-10W 86型sip对讲终端

SIP mini对讲 SV-10/SV-10W 86型sip对讲终端 A10系列是专门针对室内用户需求研发的一款SIP mini 对讲产品&#xff0c;集智能安防、音频对讲和广播功能于一体&#xff0c;功能强大&#xff0c;性价比高。它外观小巧&#xff0c;支持按键图标/功能自定义&#xff0c;配备3个可编…
阅读更多...
Git常用命令用法

Git常用命令用法

参考视频&#xff1a;真的是全能保姆 git、github 保姆级教程入门&#xff0c;工作和协作必备技术&#xff0c;github提交pr - pull request_哔哩哔哩_bilibili 1.Git初始化 首先设置名称和邮箱。然后初始化一下&#xff0c;然后就创建了一个空的Git仓库。 PS D:\golang\oth…
阅读更多...
手机word怎么转pdf？这几种方法很简单

手机word怎么转pdf？这几种方法很简单

手机word怎么转pdf&#xff1f;将word文档转换为PDF文件&#xff0c;在很多场合都非常有用。比如&#xff0c;你可能需要在公司或学校中分享一份重要的文档&#xff0c;或者你想将一份简历或报告以PDF格式发送给招聘人员或老师。无论是哪种情况&#xff0c;将word文档转换为PDF…
阅读更多...
Nginx一主一从配置Keepalive

Nginx一主一从配置Keepalive

文章目录 机器规划监控Nginx进程安装配置Keepalive验证高可用性 机器规划 主机vip内网ipNginx1192.168.xxx.xx192.168.xxx.abNginx2192.168.xxx.xx192.168.xxx.cd 监控Nginx进程 Nginx监控脚本&#xff0c;监控nginx&#xff0c;如果nginx停了&#xff0c;那么杀掉keepalive…
阅读更多...
性能强悍价格到位，老牌NAS也玩性价比

性能强悍价格到位，老牌NAS也玩性价比

前几天看到站内爆料铁威马的优惠信息&#xff0c;搭载 N5095 的 F4-423 到手不到 1900&#xff0c;一看之下着实有些心动&#xff0c;说起来我折腾了这么多 NAS&#xff0c;铁威马还真没试过。稍作思考直接下单&#xff0c;毕竟能够存在这么多年的 NAS 品牌&#xff0c;没点自己…
阅读更多...
Java I/O模型发展以及Netty网络模型的设计思想

Java I/O模型发展以及Netty网络模型的设计思想

Java I/O模型发展以及Netty网络模型的设计思想 I/O模型Java BIOJava NIOJava AIO NIO Reactor网络模型单Reactor单线程模型单Reactor多线程模型主从Reactor多线程模型 Netty通信框架 前言&#xff1a; BIO、NIO的代码实践参考&#xff1a;Java分别用BIO、NIO实现简单的客户端服…
阅读更多...
Redis Redis介绍、安装 - Redis客户端

Redis Redis介绍、安装 - Redis客户端

目录 redis是什么&#xff0c;他的应用场景是什么&#xff1f; Redis的一些主要特点和应用场景&#xff1a; redis的官方网站&#xff1a;Redis redis是键值型数据库&#xff1a;&#xff08;也就是key-value模式&#xff09;&#xff08;跟python的字典很像&#xff09; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023