IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript系统学习---10---正则表达式 -> 正文阅读

[JavaScript知识库]JavaScript系统学习---10---正则表达式

目录

一、正则表达式

1.1 什么是正则表达式

1.2 语法

1.3 元字符

1.4 修饰符

1.5 过滤敏感字


一、正则表达式

1.1 什么是正则表达式

1. 正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象 。

2. 通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式。

3. 正则表达式在 JavaScript中的使用场景:

????????(1)例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配) 。

????????(2)比如用户名: /^[a-z0-9_-]{3,16}$/ 。

????????(3)过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。

4.正则表达式是什么?

????????是用于匹配字符串中字符组合的模式

5.正则表达式有什么作用?

  • 表单验证(匹配
  • 过滤敏感词(替换
  • 字符串中提取我们想要的部分(提取

1.2 语法

JavaScript 中定义正则表达式的语法有两种,其中比较简单的方法是:

1. 定义正则表达式语法:

ps :? 其中 / / 是正则表达式字面量;

2.判断是否有符合规则的字符串:

????????test() 方法 用来查看正则表达式与指定的字符串是否匹配;

语法:

?比如:

如果正则表达式与指定的字符串匹配 ,返回true,否则false

3.检索(查找)符合规则的字符串:

????????exec() 方法 在一个指定字符串中执行一个搜索匹配;

语法:

?举例:

?如果匹配成功,exec() 方法返回一个数组,否则返回null

1.3 元字符

1.普通字符:

????????大多数的字符仅能够描述它们本身,这些字符称作普通字符,例如所有的字母和数字。

????????也就是说普通字符只能够匹配字符串中与它们相同的字符。

2.元字符(特殊字符)

(1)是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。

(2)比如,规定用户只能输入英文26个英文字母,普通字符的话 abcdefghijklm…..

(3)但是换成元字符写法: [a-z]

3.参考文档:

MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressionshttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

正则测试工具:

http://tool.oschina.net/regexhttp://tool.oschina.net/regex

4. 为了方便记忆和学习,我们对众多的元字符进行了分类:

  • 边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)
  • 量词 (表示重复次数)
  • 字符类 (比如 \d 表示 0~9)

(1)边界符

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

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

(2)量词

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

?(3)字符类

?????? I:? [ ] 里面加上 - 连字符,使用连字符 - 表示一个范围。

  • [a-z] 表示 a 到 z 26个英文字母都可以
  • [a-zA-Z] 表示大小写都可以
  • [0-9] 表示 0~9 的数字都可以

???????? II:: [ ] 里面加上 ^ 取反符号

比如:

  • ?????????[^a-z] 匹配除了小写字母以外的字符 ;
  • ???????? 注意要写到中括号里面;

???? ? . 匹配除换行符之外的任何单个字符;

??????? III:预定义:指的是某些常见模式的简写方式

?????????eg:

?1.4 修饰符

1. 修饰符约束正则执行的某些细节行为,如是否区分大小写、是否支持多行匹配等

2. 语法

(1)i 是单词 ignore 的缩写,正则匹配时字母不区分大小写

(2)g 是单词 global 的缩写,匹配所有满足正则表达式的结果

?3. 替换 replace 替换

?1.5 过滤敏感字

需求:要求用户不能输入敏感字

比如,这是一个 ** 的故事,而不是一个 ** 的故事。

分析:

  • ①:用户输入内容
  • ②:内容进行正则替换查找,找到敏感词,进行**
  • ③:要全局替换使用修饰符 g
<body>
    <textarea rows="5" cols=20"></textarea>
    <button>发布</button>
    <div></div>
    <script>
        let btn = document.querySelector('button');
        let textarea = document.querySelector('textarea');
        let div = document.querySelector('div');
        btn.addEventListener('click',function(){
            div.innerHTML = textarea.value.replace(/悲伤|悲桑/g,'**');
        });
    </script>
</body>

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-01 15:07:38  更:2022-06-01 15:10:25 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 17:12:05-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码