首页 > 其他分享 >Web APIs - 第6章笔记

Web APIs - 第6章笔记

时间：2024-12-20 14:31:55浏览次数：11  
标签：Web console log APIs reg2 笔记 test const true

正则表达式

什么是正则表达式? 正则表达式（Regular Expression）是一种字符串匹配的模式（规则）

使用场景：

  • 例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)
  • 过滤掉页面内容中的一些敏感词和高亮搜索关键字(替换)
  • 从字符串中获取我们想要的特定部分(提取 )

正则基本使用

正则基本使用分为两步：

举例：

<!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>
    .box,.box1,.box2 {
      width: 500px;
      height: 90px;
      border: 1px solid rgba(0,0,0,0.3);
    }
  </style>
</head>

<body>
  <h5>原字符串</h5>
  <div class="box">
    在这个信息爆炸的时代，保持有效的个人联系至关重要。以下是几个关键人物的联系方式，方便大家在需要时能够迅速取得联系。
    张经理负责业务拓展,手机号为13800138000;技术支援的小李随时待命解决您的问题,可拨打13700137000。
  </div>

<h5>将手机号码变红：</h5>
  <div class="box1">

  </div>

  <h5>提炼手机号码：</h5>
  <div class="box2">

  </div>

  <script>  
    let str = `在这个信息爆炸的时代，保持有效的个人联系至关重要。以下是几个关键人物的联系方式，方便大家在需要时能够迅速取得联系。
    张经理负责业务拓展,手机号为13800138000;技术支援的小李随时待命解决您的问题,可拨打13700137000。`

    // const reg2 = /(1[0-9]{10})/g
    const reg2 = /(13800138000)/g
    
    document.write(`<br><b>13800138000是否存在:</b>`)
    document.write(reg2.test(str))
     
    let repStr = str.replace(reg2,`<span style="color:red;">$1</span>`)
    let res = str.match(reg2)

    document.querySelector('.box1').innerHTML = repStr
 
    document.querySelector('.box2').innerHTML = res.join('<br>')


  </script>
</body>

</html>

  1. 定义规则
const reg =  /表达式/
    • 其中 / / 是正则表达式字面量
    • 正则表达式也是对象
  1. 使用正则
    • test()方法 用来查看正则表达式与指定的字符串是否匹配
      • 如果正则表达式与指定的字符串匹配 ，返回true，否则false
    • replace()方法 用来替换正则表达式匹配的内容
      • 返回替换以后的完整字符串
      • ✨注意：如果要想使用 $1 则需要配合 （）
    • match() 用来提取指定内容
      • 返回提取到的内容数组
      • ✨注意：如果给正则表达式加了()的时候，需要在正则表达式后面加 g 才能提取正常个数的数据 例如： /(表达式)/g
      • ✨g 是单词 global 的缩写，匹配所有满足正则表达式的结果
      • ✨i 是单词 ignore 的缩写，正则匹配时字母不区分大小写

元字符

  1. 普通字符:
  • 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字等
  • 普通字符只能够匹配字符串中与它们相同的字符。
  • 比如： /13800138000/ 只固定匹配 13800138000 这个手机号码
  • 比如，规定用户只能输入英文26个英文字母，使用普通字符表达 /[abcdefghijklmnopqrstuvwxyz]/

  1. 元字符(特殊字符）
  • 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
  • 比如，匹配手机号码，换成元字符的写法：/1[0-9]{10}/
  • 比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/

边界符

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

如果 ^ 和 $ 在一起，表示必须是精确匹配

<body>
  <script>
    // 元字符之边界符
    // 1. 匹配开头的位置 ^
    const reg = /^web/
    console.log(reg.test('web前端'))  // true
    console.log(reg.test('前端web'))  // false
    console.log(reg.test('前端web学习'))  // false
    console.log(reg.test('we'))  // false

    // 2. 匹配结束的位置 $
    const reg1 = /web$/
    console.log(reg1.test('web前端'))  //  false
    console.log(reg1.test('前端web'))  // true
    console.log(reg1.test('前端web学习'))  // false
    console.log(reg1.test('we'))  // false  

    // 3. 精确匹配 ^ $
    const reg2 = /^web$/
    console.log(reg2.test('web前端'))  //  false
    console.log(reg2.test('前端web'))  // false
    console.log(reg2.test('前端web学习'))  // false
    console.log(reg2.test('we'))  // false 
    console.log(reg2.test('web'))  // true
    console.log(reg2.test('webweb'))  // flase 
  </script>

</body>
量词

量词用来设定某个模式重复次数

注意： 逗号左右两侧千万不要出现空格

<body>
  <script>
    // 元字符之量词
    // 1. * 重复次数 >= 0 次
    const reg1 = /^w*$/
    console.log(reg1.test(''))  // true
    console.log(reg1.test('w'))  // true
    console.log(reg1.test('ww'))  // true
    console.log('-----------------------')

    // 2. + 重复次数 >= 1 次
    const reg2 = /^w+$/
    console.log(reg2.test(''))  // false
    console.log(reg2.test('w'))  // true
    console.log(reg2.test('ww'))  // true
    console.log('-----------------------')

    // 3. ? 重复次数  0 || 1 
    const reg3 = /^w?$/
    console.log(reg3.test(''))  // true
    console.log(reg3.test('w'))  // true
    console.log(reg3.test('ww'))  // false
    console.log('-----------------------')


    // 4. {n} 重复 n 次
    const reg4 = /^w{3}$/
    console.log(reg4.test(''))  // false
    console.log(reg4.test('w'))  // flase
    console.log(reg4.test('ww'))  // false
    console.log(reg4.test('www'))  // true
    console.log(reg4.test('wwww'))  // false
    console.log('-----------------------')

    // 5. {n,} 重复次数 >= n 
    const reg5 = /^w{2,}$/
    console.log(reg5.test(''))  // false
    console.log(reg5.test('w'))  // false
    console.log(reg5.test('ww'))  // true
    console.log(reg5.test('www'))  // true
    console.log('-----------------------')

    // 6. {n,m}   n =< 重复次数 <= m
    const reg6 = /^w{2,4}$/
    console.log(reg6.test('w'))  // false
    console.log(reg6.test('ww'))  // true
    console.log(reg6.test('www'))  // true
    console.log(reg6.test('wwww'))  // true
    console.log(reg6.test('wwwww'))  // false

    // 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败

  </script>
范围

表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围

<body>
  <script>
    // 元字符之范围  []  
    // 1. [abc] 匹配包含的单个字符， 多选1
    const reg1 = /^[abc]$/
    console.log(reg1.test('a'))  // true
    console.log(reg1.test('b'))  // true
    console.log(reg1.test('c'))  // true
    console.log(reg1.test('d'))  // false
    console.log(reg1.test('ab'))  // false

    // 2. [a-z] 连字符 单个
    const reg2 = /^[a-z]$/
    console.log(reg2.test('a'))  // true
    console.log(reg2.test('p'))  // true
    console.log(reg2.test('0'))  // false
    console.log(reg2.test('A'))  // false
    // 想要包含小写字母，大写字母 ，数字
    const reg3 = /^[a-zA-Z0-9]$/
    console.log(reg3.test('B'))  // true
    console.log(reg3.test('b'))  // true
    console.log(reg3.test(9))  // true
    console.log(reg3.test(','))  // flase

    // 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
    const reg4 = /^[a-zA-Z0-9_]{6,16}$/
    console.log(reg4.test('abcd1'))  // false 
    console.log(reg4.test('abcd12'))  // true
    console.log(reg4.test('ABcd12'))  // true
    console.log(reg4.test('ABcd12_'))  // true

    // 3. [^a-z] 取反符
    const reg5 = /^[^a-z]$/
    console.log(reg5.test('a'))  // false 
    console.log(reg5.test('A'))  // true
    console.log(reg5.test(8))  // true

  </script>

</body>

案例1-练习test,match,replace

使用正则表达式实现如下需求：

  1. 使用正则表达式将【原字符串】中的所有电话号码替换成【红色】 - replace
  2. 使用正则表达式，提取出所有的电话号码 - match
  3. 判断是否存在136开头的电话号码 - test

/(1[0-9]{10})/g

/(136[0-9]{8})/g

<!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>
    .box,.box1,.box2 {
      width: 500px;
      height: 90px;
      border: 1px solid rgba(0,0,0,0.3);
    }
  </style>
</head>

<body>
  <h5>原字符串</h5>
  <div class="box">
    在这个信息爆炸的时代，保持有效的个人联系至关重要。以下是几个关键人物的联系方式，方便大家在需要时能够迅速取得联系。
    张经理负责业务拓展,手机号为13800138000;技术支援的小李随时待命解决您的问题,可拨打13700137000。
  </div>

<h5>将手机号码变红：</h5>
  <div class="box1">

  </div>

  <h5>提炼手机号码：</h5>
  <div class="box2">

  </div>

  <script>  
    let str = `在这个信息爆炸的时代，保持有效的个人联系至关重要。以下是几个关键人物的联系方式，方便大家在需要时能够迅速取得联系。
    张经理负责业务拓展,手机号为13800138000;技术支援的小李随时待命解决您的问题,可拨打13700137000。`

    const reg2 = /(1[0-9]{10})/g
    // const reg2 = /(13800138000)/
    // const reg2 = /(1\d{10})/g
    
    document.write(`<br><b>否存在136开头的电话号码:</b>`)
       const reg3 = /(136[0-9]{8})/g
    document.write(reg3.test(str))
    
     
    let repStr = str.replace(reg2,`<span style="color:red;">$1</span>`)
    let res = str.match(reg2)

    console.log(res);
    

    document.querySelector('.box1').innerHTML = repStr
 
    document.querySelector('.box2').innerHTML = res.join('<br>')
   


  </script>
</body>

</html>
案例2:用户名验证

Web,console,log,APIs,reg2,笔记,test,const,true
From： https://blog.csdn.net/weixin_67448099/article/details/144601589

相关文章

  • OSG开发笔记（四十）：使用OSG自绘拟合球形顶点
    ​若该文为原创文章，未经允许不得转载本文章博客地址：https://blog.csdn.net/qq21497936/article/details/144609131各位读者，知识无穷而人力有穷，要么改需求，要么找专业人士，要么自己研究长沙红胖子Qt（长沙创微智科）博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、......
  • OSG开发笔记（四十）：使用OSG自绘拟合球形顶点
    前言  OSG内置的几何图形并没有球面，那么绘制球面先要绘制球面的组成顶点，本篇解说绘制球面组成顶点的详细过程。 Demo    组成面的时候，为了看到是否正确，取中间的几个圆环：       回顾OSG坐标系理解  OSG的坐标系类似于Qt场景坐标系，场景......
  • nginx安装教程笔记（包含访问控制）
    目录一、nginx的安装二、访问控制基于授权访问控制基于客户端的访问控制一、nginx的安装1.安装组件yum-yinstallpcre-develzlib-develgccgcc-c++make2.创建用户useradd-M-s/sbin/nologinnginx3.解压源码包并编译安装tarzxvfnginx-1.12.0.tar.g......
  • 微信小程序、H5、Web 和 App 是不同的移动应用开发和部署形式。每种形式都有其特定的
    微信小程序、H5、Web和App是不同的移动应用开发和部署形式。每种形式都有其特定的技术架构、使用场景和优缺点。以下是这些平台的详细对比，按关键因素表格化：对比维度微信小程序H5WebNativeApp平台支持微信平台（需安装微信）任何支持浏览器的设备（手机、PC、平板等）......
  • python毕设 基于web的养宠系统的实现程序+论文
    本系统（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。系统程序文件列表开题报告内容一、选题背景关于宠物管理系统的研究，现有研究主要以宠物领养、销售等传统功能为主。专门针对基于web的综合性养宠系统，涵盖宠物帮遛、遛宠信息等功......
  • javaweb地方农产品特产展销系统
    目录项目介绍具体实现截图开发核心技术：写作提纲开发过程思路核心代码部分展示实验方案：详细视频演示源码获取方式项目介绍选题则旨在通过标签分类管理等方式，实现管理员；个人中心、用户管理、特产商品管理、商品类型管理、我的收藏管理、系统管理、订单管理，用户；个人中......
  • fastq和fastqc测序格式介绍 | 生物专业最值得看的哈佛生信笔记01
    测序技术简介第一代测序技术,即Sanger测序,通过在四条不同的车道上进行反应,最终确定DNA序列。目前主流的第二代测序技术,即lllumina的测序技术,通过在玻璃片上进行大规模平行测序,实现快速、高效的DNA测序。第三代测序技术,虽然目前还处于原型阶段,但具有单分子测序的潜......
  • 笔记day4
    文章目录1复习2开发Search模块中的TypeNav商品分类菜单（过渡动画效果）3商品分类三级列表可以进行优化4合并params与query参数5开发Home首页中的ListContainer组件与Floor组件6swiper1复习商品分类的三级列表由静态变为动态形式【获取服务器数据：解决代理跨域问题......
  • 《程序员修炼之道：从小工到专家》读书笔记（五）
    第四章注重实效的偏执这一章节围绕着“偏执”这一独特视角展开，强调在软件开发领域，适当的偏执并非是无端的担忧，而是一种保障项目成功、提升软件质量、应对复杂多变环境的必备特质。它倡导开发者要时刻警惕潜在问题，对代码、系统、流程中的不确定性保持高度敏感，提前预防风险，以确......
  • C++学习笔记
    C++学习一、基础语法：1.整型:short:2字节，1字节占8位，可表示的数据范围是-2^15~2^15-1,第一位表示正负，所以数据范围只能是15次方int:4字节long:4字节longlong:8字节2.sizeof统计数据类型(变量)所占内存的字节大小3.浮点型：float:4字节floata=3.14fdouble:......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99