前端计划——JavaScript正则表达式快速入门

Xufc 发布于2019-08-20 17:15 / 2537人阅读

摘要：前言正则表达式时处理字符串中常用的手法，本文以简单的方式，快速展示了中正则相关的基础知识点。文末还提供了几个简单的正则相关面试题。接下来是正则部分，注意后面的并不匹配，也就是比如，实际匹配的值是和，在和后面加上，就完成了预期。

前言：正则表达式时处理字符串中常用的手法，本文以简单的方式，快速展示了JavaScript中正则相关的基础知识点。文末还提供了几个简单的正则相关面试题。个人总结，如有错误，还望指正，

JavaScript正则表达式快速入门 两种新建语法

字面量法

var patt = /w+/i;

RegExp对象法

(1)var patt = new RegExp("/w+/i");  
(2)var patt = new RegExp("w+","i");

其中第二个变量表示修饰符，在ES5中，(1)方法不允许加第二个变量，ES6中则允许，且后面的修饰符会覆盖原修饰符。

五个修饰符

i：忽视大小写
g：全局匹配
m：多行匹配
u：用于处理大于uFFFF的字符（ES6新增）
y：类似g，但是有粘连特点（ES6新增）

部分属性

1、reg.sticky

用于检测是否设置y修饰符，返回true/false（ES6新增）

2、reg.source

返回表达式正文（ES5）

3、reg.flags

返回修饰符（ES6新增）

量词系列

基础量词

? (0或1)  
* (0个及以上)  
+ (1个及以上)

开头结尾

^ 开头  
$ 结尾

指定量词

{x} 指定数量  
{x,} 大于X数量
{x,y} x,y之间

特殊

?=str 后面紧接str的

?!str 后面没有紧接str的

语法系列 RegExp方法

1、compile方法

patt.compile(newPatt)

用于编译正则，或者改变正则内容

2、exec方法

patt.exec(str)

如果找到了，返回相应的字符串，如果没有，返回null

3、test方法

patt.test(str)

如果找到了，返回true，否则返回false

String方法

1、search()

str.search(patt)

如果找到了，返回起始位置，否则返回-1

2、match()

str.match(patt)

返回一个数组，没有找到返回null

3、replace()

str.replace(patt, newValue)

替换指定的内容

4、split()

str.split("patt")

以指定内容分割为数组

部分题目 题目一：正则校验电子邮箱

var checkEmail = function(email) {
    var patt = /^([0-9A-Za-z-_.]+)@([0-9a-z]+.[a-z]{2,3}(.[a-z]{2})?)$/i
    return patt.test(email);
}
//另一种写法
/^(w)+(.w+)*@(w)+((.w{2,3}){1,3})$/;

题目二：为string添加去除前后空白字符的函数trim()

String.prototype.trim = function() {
    return this.replace(/^s+|s+$/g)
}

题目三：为数字添加","分割符，例如123456789输出123,456,789

function commafy(num) {
    return num && num.toString()
        .replace(/(d)(?=(d{3})+.)/g, x => x + ",");
}

题目简析：首先是&&，短路运算符，也就是相当于if...else，当num存在时，会返回后面的值。
接下来是正则部分，注意?=后面的并不匹配，也就是比如12345678.9，实际匹配的值是2和5，在2和5后面加上","，就完成了预期。

GPU云服务器云服务器正则表达式入门前端快速入门 web前端快速入门正则正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83429.html

前端开发收集 - 收藏集 - 掘金

摘要：责编现代化的方式开发一个图片上传工具前端掘金对于图片上传，大家一定不陌生。之深入事件机制前端掘金事件绑定的方式原生的事件绑定方式有几种想必有很多朋友说种目前，在本人目前的研究中，只有两种半两种半还有半种的且听我道来。 Ajax 与数据传输 - 前端 - 掘金背景在没有ajax之前，前端与后台传数据都是靠表单传输，使用表单的方法传输数据有一个比较大的问题就是每次提交数据都会刷新页面，用...

ygyooo 2019-08-20 17:15 评论0 收藏0
正则表达式

摘要：最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写，作用是对字符串执行模式匹配。学习目标了解正则表达式语法在中使用正则表达式在中使 JS高级技巧本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验，进行扩展延伸，同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测...

yibinnn 2019-08-21 17:57 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

JouyPub 2019-08-02 10:10 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

vslam 2019-08-30 15:53 评论0 收藏0