百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

笔记:前端自学基础之正则表达式

xsobi 2025-01-06 16:07 1 浏览

转义字符"\"

多行字符串:

document.body.innerHTML = "\

<div></div>\

<span><\span>\

";

字符串换行符\n;行结束:\r;制表符:\t(缩进)

正则表达式 RegExp

正则表达式的作用:匹配特殊字符或有特殊搭配原则的字符的最佳选择。 贪婪匹配原则。

两种创建方式:

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

1、字面量 (推荐) /pattern/attributes

var reg1 = /abc/i;
var str = "abcd";
reg1.test(str);//true 返回true或者false
str.match(reg1);//["abc"] 返回的是数组

2、new RegExp(pattern,attributes);

var str = "abcd"
var reg2 = new RegExp("abc","i");
注:
若 var reg2 = new RegExp(reg1);则此时reg1与reg2内部值相同,但是指向两个引用。
但若 var reg2 = RegExp(reg1);则此时reg1与reg2内部值相同,且指向同一个引用。

修饰符:

i:执行对大小写不敏感的匹配;

g:执行全局匹配(查找所有匹配而非在找到第一个匹配后停止);

m :执行多行匹配。

var reg = /^a/g;
var reg2 = /^a/gm;
var str = "abcde\na";//包含换行
str.match(reg);//["a"]
str.match(reg2);//["a","a"]多行匹配

一个方括号代表一位!(red|blue\green)匹配"red"或"blue"或"green"

var reg = /[0123456789][0123456789][0123456789]/g;//表示全局匹配连续的三个数字
var str = "12309u98723lashgkjghajh";
str.match(reg);//["123","987"]

元字符也代表一位!方括号里也可以写元字符! var reg = /[\w\d]/g;

\w === [0-9A-z_] \d === [0-9] \s === [\t\n\r\v\f ] 最后一个是空格 \b === 单次边界 . === [^\r\n]

\W === [^\w] \D === [^\d] \S === [^\s] \B ===非单次边界

var reg1 = /\bcde/g;//单次边界必须是在c之前的那个
var reg2 = /\bc/g;//匹配的是第二个c
var str = "abc cde fgh"'
str.match(reg1);//"cde"结果中不包含前面的空格
str.match(reg2);//"c"结果中不包含前面的空格
unicode编码 \uxxxx后面四位一般指常见的第一层的所有unicode编码,实际应该为\u01xxxx。另外十五层表示为(\u020000-\u02ffff)-(\u100000-\u10ffff)
var reg = /\u8001\u9093\u8eab\u4f53\u597d/g;
var str = "老邓身体好";
str.match(reg);//"老邓身体好"

贪婪匹配原则,尽量匹配最多的。n+ : {1,} n* : {0,}


reg.exec()和lastIndex相对应相匹配,且lastIndex可以手动修改。不使用全局匹配时,lastIndex值始终为0.

匹配连续出现的相同字符:var reg = /(\w)\1\1\1/g \1表示反向引用第一个子表达式的内容也就是第一个\w,这样一来,字符串如"aaaa"、"bbbb"都能匹配出来。如果要匹配出"aabb",则需要reg = /(\w)\1(\w)\2/g,这里的\2表示反向引用第二个子表达式,也就是第二个\w。

var str = "aabb";
var reg = /(\w)\1(\w)\2/;
console.log(reg.exec(str));//["aabb","a","b",index:0,input:"aabb"]
var str = "aabb";
var reg1 = /(\w)\1(\w)\2/;
var reg2 = /(\w)\1(\w)\2/g;
console.log(str.match(reg1));//["aabb","a","b",index:0,input:"aabb"]
//返回匹配结果和两个子表达式的内容
console.log(str.match(reg2));//["aabb"]
//全局搜索时,返回的结果中不包含子表达式的内容

search匹配不到的话,返回-1,匹配到的话,返回匹配到的位置,且仅仅返回匹配到的第一个字符的位置,其后再有匹配到的也不会返回结果。所以search只管能不能匹配到,而不管能匹配到多少,更不用说其他匹配成功的字符位置了。

对于split方法,如果正则表达式中含有子表达式,则会在每一截分割的结果后跟着子表达式的内容。不管是不是全局搜索。

var str = "aa";
str1 = str.replace("a","b");
console.log(str1);//ba replace方法只对字符串的第一个指定字符进行了替换操作,它没有访问全局的能力
console.log(str);//aa replace方法不更改原来的字符串
 
var reg = /a/g;
str1 = str.replace(reg,"b");
console.log(str1);//bb 使用正则表达式全局匹配,可以全局替换
console.log(str);//aa 对原来的字符串依旧没有影响

replace方法的第二个参数必须是字符串格式(或者是用function但是返回的是字符串),其内部使用$1时表示的是第一个参数正则表达式的第一个子表达式,$2表示的是第一个参数正则表达式的第二个子表达式。(replace方法的精华)

var reg = /(\w)\1(\w)\2/g;
var str = "aabb";
console.log(str.replace(reg,"$2$2$1$1"));//bbaa
console.log(str.replace(reg,function($,$1,$2){
 return $2 + $2 + $1 + $1;
}));//bbaa

replace方法的第二个参数使用function时,系统自动传参。传递的第一个参数是全局匹配时每一次匹配到的str中的字符(串),往后依次为正则表达式匹配出的第一个子表达式第二个子表达式等。

e.g:将the-first-name变成theFirstName(小驼峰式)

var reg = /-(\w)/g;
var str = "the-first-name";
str.replace(reg,function($,$1){
 return $1.toUpperCase
});//theFirstName

全局匹配中,匹配了多少次,function就会执行多少次!

正向预查 正向断言

var str = "abaaaaaa";
var reg = /a(?=b)/g;//这里的(?=b)表示a后面需要跟一个b,但是b不参与选择,只参与修饰限定。
str.match(reg);//"a" 这里只能选出一个"a"
 
var str = "abaaaaaa";
var reg = /a(?!b)/g;//这里的(?!b)表示a后面不能跟b,此时的括号内容也只参与修饰限定。
str.match(reg);//"a","a","a","a","a","a" 这里能选出六个"a"

非贪婪匹配

将默认的贪婪匹配更改成为非贪婪匹配的方法为:在正则表达式内部末尾加一个?


var str = "aaaaaa";
var reg1 = /a+?/g;
var reg2 = /a+/g;
var reg3 = // 
str.match(reg1);//["a","a","a","a","a","a"]
str.match(reg2);//["aaaaaa"]

练习

将var str = "10000000000" 匹配替换为10,000,000,000

var str = "10000000000";
var reg = /(\d\d\d)/g;
console.log(str.split('').reverse().join('').replace(reg,function($,$1){
	return $1+',';
}).split('').reverse().join(''));//'10,000,000,000' 解法一
var reg2 = /(?=(\B)(\d{3})+$)/g;
console.log(str.replace(reg2,","));//'10,000,000,000' 解法二






原文链接:https://blog.csdn.net/qq_38349067/article/details/103364736

相关推荐

全网最详细解决Windows下Mysql数据库安装后忘记初始root 密码方法

一、准备重置root的初始化密码Win+R键启动命令输入窗口;输入cmd打开命令执行窗口;##界面如下##输入命令:netstopmysqld#此操作会停止当前运行的...

Spring Boot数据库密码加密的配置方法

前言由于系统安全的考虑,配置文件中不能出现明文密码的问题,本文就给大家详细介绍下springboot配置数据库密码加密的方法,下面话不多说了,来一起看看详细的介绍吧...

Mysql 8.4数据库安装、新建用户和数据库、表单

1、下载MySQL数据库yuminstall-ywgetperlnet-toolslibtirpc#安装wget和perl、net-tools、libtirpcwgethtt...

mysql5.7安装教程

首先下载mysql的rpm包wgethttps://mirrors.ustc.edu.cn/mysql-ftp/Downloads/MySQL-5.7/mysql-community-client...

MySQL管理授权和数据库的备份和还原详解

一般管理用户和授权由DBA去执行,DBA为数据库管理员一、管理用户1.添加用户...

数据库迁移有什么技巧?|分享强大的database迁移和同步工具

概述DBConvertStudio是一款强大的跨数据库迁移和同步软件,可在不同数据库格式之间转换数据库结构和数据。它将成熟、稳定、久经考验的DBConvert和DBSync核心与改进的现代...

Mysql解压版安装过程

Mysql是目前软件开发中使用最多的关系型数据库,具体安装步骤如下:第一步:Mysql官网下载最新版(mysql解压版(mysql-5.7.17-winx64)),Mysql官方下载地址为:https...

MySQL5.7升级到8.0过程详解

前言:不知不觉,MySQL8.0已经有好多个GA小版本了。目前互联网上也有很多关于MySQL8.0的内容了,MySQL8.0版本基本已到稳定期,相信很多小伙伴已经在接触8.0了。本篇文章主要介绍从5....

10种常见的MySQL错误,你可中招?

【51CTO.com快译】如果未能对MySQL8进行恰当的配置,您非但可能遇到无法顺利访问、或调用MySQL的窘境,而且还可能给真实的应用生产环境带来巨大的影响。本文列举了十种MySQL...

忘记MySQL密码怎么办?一招教你搞定

在安装完MySQL或者是在使用MySQL时,最尴尬的就是忘记密码了,墨菲定律也告诉我们,如果一件事有可能出错,那么它一定会出错。那如果我们不小心忘记了MySQL的密码,该如何处理呢?别着急...

Windows 安装解压版本的 MySql

1、下载解压版本的MySql到https://downloads.mysql.com/archives/community/网站,根据自己需要安装的版本进行选择下载,这里下载不要选择MSII...

爆破SSH/MySQL账户竟如此简单

友情提示:初入安全,小白一个,本文重在学习与经验分享!背景使用Kali自带的MSF工具对SSH的账号密码进行爆破。1.实验环境本次实验通过MSF,可直接对SSH的账号密码进行爆破。KaliIP:1...

Mysql8忘记密码/重置密码

Mysql8忘记密码/重置密码UBUNTU下Mysql8忘记密码/重置密码步骤如下:先说下大概步骤:修改配置文件,使得用空密码可以进入mysql。然后置当前root用户为空密码。再次修改配置文件,不能...

wamp查看MySQL密码 MySQL console输入密码闪退 重置mysql密码

wampserver的MySQL数据库用户名为root初始密码为空,但是部分同学通过MySQLconsole访问数据库输入密码的时候出现窗口闪退,常见的问题是原来有改过密码或者你的配置文件要求密码不...

Mysql数据库操作指引(六)——账号密码及权限管理

简介:在MySQL数据库中,为了保证数据的安全性,数据管理员需要根据需要创建账户,并为每个账户赋予不同的权限,以满足不同用户的需求。...