正则表达式

创建正则表达式

  1. 使用一个正则表达式字面量
const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;
  1. 调用RegExp对象的构造函数
const regex = new RegExp(pattern, [, flags])

特殊字符

  • ^ 匹配输入的开始
  • $ 匹配输入的结束
  • * 0次或多次 {0,}
  • + 1次或多次 {1,}
  • ?
    • 0次或者1次 {0,1}。
    • 用于先行断言
    • 如果紧跟在任何量词 *、 +、? 或 {} 的后面,将会使量词变为非贪婪
      • 对 "123abc" 用 /\d+/ 将会返回 "123",
      • 用 /\d+?/,那么就只会匹配到 "1"。
  • . 匹配除换行符之外的任何单个字符
  • (x) 匹配 'x' 并且记住匹配项
  • (?:x) 匹配 'x' 但是不记住匹配项
  • x(?=y) 配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找。
  • x(?!y) 匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找。
  • x|y 匹配‘x’或者‘y’。
  • {n} 重复n次
  • {n, m} 匹配至少n次,最多m次
  • [xyz] 代表 x 或 y 或 z
  • [^xyz] 不是 x 或 y 或 z
  • \d 数字
  • \D 非数字
  • \s 空白字符,包括空格、制表符、换页符和换行符。
  • \S 非空白字符
  • \w 单词字符(字母、数字或者下划线) [A-Za-z0-9_]
  • \W 非单字字符。[^A-Za-z0-9_]
  • \3 表示第三个分组
  • \b 词的边界
    • /\bm/匹配“moon”中得‘m’;
  • \B 非单词边界

使用正则表达式的方法

  • exec 一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回null)。
  • test 一个在字符串中测试是否匹配的RegExp方法,它返回true或false。
  • match 一个在字符串中执行查找匹配的String方法,它返回一个数组或者在未匹配到时返回null。
  • search 一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。
  • replace 一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。
  • split 一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的String方法。

练习

匹配结尾的数字

/\d+$/g

统一空格个数

字符串内如有空格,但是空格的数量可能不一致,通过正则将空格的个数统一变为一个。

let reg = /\s+/g
str.replace(reg, " ");

判断字符串是不是由数字组成

str.test(/^\d+$/);

电话号码正则

  • 区号必填为3-4位的数字
  • 区号之后用“-”与电话号码连接电话号码为7-8位的数字
  • 分机号码为3-4位的数字,非必填,但若填写则以“-”与电话号码相连接
/^\d{3,4}-\d{7,8}(-\d{3,4})?$/

手机号码正则表达式

正则验证手机号,忽略前面的0,支持130-139,150-159。忽略前面0之后判断它是11位的。

/^0*1(3|5)\d{9}$/

使用正则表达式实现删除字符串中的空格

funtion trim(str) {
let reg = /^\s+|\s+$/g
return str.replace(reg, '');
}

限制文本框只能输入数字和两位小数点等等

/^\d*\.\d{0,2}$/

只能输入小写的英文字母和小数点,和冒号,正反斜杠(:./)

/^[a-z\.:\/\\]*$/

替换小数点前内容为指定内容

例如:infomarket.php?id=197 替换为 test.php?id=197

var reg = /^[^\.]+/;
var target = '---------';
str = str.replace(reg, target)

只匹配中文的正则表达式

/[\u4E00-\u9FA5\uf900-\ufa2d]/ig

返回字符串的中文字符个数

先去掉非中文字符,再返回length属性。

function cLength(str){
var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;
//匹配非中文的正则表达式
var temp = str.replace(reg,'');
return temp.length;
}

正则表达式取得匹配IP地址前三段

只要匹配掉最后一段并且替换为空字符串就行了

function getPreThrstr(str) {
let reg = /\.\d{1,3}$/;
return str.replace(reg,'');
}

匹配

之间的内容

/<ul>[\s\S]+?</ul>/i

用正则表达式获得文件名

c:\images\tupian\006.jpg

可能是直接在盘符根目录下,也可能在好几层目录下,要求替换到只剩文件名。

首先匹配非左右斜线字符0或多个,然后是左右斜线一个或者多个。

function getFileName(str){
var reg = /[^\\\/]*[\\\/]+/g;
// xxx\ 或是 xxx/
str = str.replace(reg,'');
return str;
}

绝对路径变相对路径

"http://23.123.22.12/image/somepic.gif"转换为:"/image/somepic.gif"

var reg = /http:\/\/[^\/]+/;
str = str.replace(reg,"");

用户名正则

用于用户名注册,,用户名只 能用 中文、英文、数字、下划线、4-16个字符。

/^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/

匹配英文地址

规则如下:

包含 "点", "字母","空格","逗号","数字",但开头和结尾不能是除字母外任何字符。

/^[a-zA-Z][\.a-zA-Z,0-9]*[a-zA-Z]$/

正则匹配价格

开头数字若干位,可能有一个小数点,小数点后面可以有两位数字。

/^\d+(\.\d{2})?$/

身份证号码的匹配

身份证号码可以是15位或者是18位,其中最后一位可以是X。其它全是数字

/^(\d{14}|\d{17})(X|x)$/

单词首字母大写

每单词首字大写,其他小写。如blue idea转换为Blue Idea,BLUE IDEA也转换为Blue Idea

function firstCharUpper(str) {
str = str.toLowerCase();
let reg = /\b(\w)/g;
return str.replace(reg, m => m.toUpperCase());
}

正则验证日期格式

yyyy-mm-dd格式

4位数字,横线,1或者2位数字,再横线,最后又是1或者2位数字。

/^\d{4}-\d{1,2}-\d{1,2}$/

去掉文件的后缀名

www.abc.com/dc/fda.asp 变为 www.abc.com/dc/fda

function removeExp(str) {
return str.replace(/\.\w$/,'')
}

验证邮箱的正则表达式

开始必须是一个或者多个单词字符或者是-,加上@,然后又是一个或者多个单词字符或者是-。然后是点“.”和单词字符和-的组合,可以有一个或者

多个组合。

/^[\w-]+@\w+\.\w+$/

正则判断标签是否闭合

例如:<img xxx=”xxx” 就是没有闭合的标签;

p的内容,同样也是没闭合的标签。

标签可能有两种方式闭合, 或者是

xxx

/<([a-z]+)(\s*\w*?\s*=\s*".+?")*(\s*?>[\s\S]*?(<\/\1>)+|\s*\/>)/i

正则判断是否为数字与字母的混合

不能小于12位,且必须为字母和数字的混

/^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i

将阿拉伯数字替换为中文大写形式

function replaceReg(reg,str){
let arr=["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
let reg = /\d/g;
return str.replace(reg,function(m){return arr[m];})
}

去掉标签的所有属性

***

变成没有任何属性的

***

思路:非捕获匹配属性,捕获匹配标签,使用捕获结果替换掉字符串。正则如下:
```js
/( )/
```

JS基础-正则的更多相关文章

  1. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  2. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  3. js基础查漏补缺(更新)

    js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...

  4. 前端面试题目汇总摘录(JS 基础篇)

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

  5. day51 JS基础

    复习 1.字体图标 用i标签, 设置类名, 与第三方字体图标库进行图标匹配 <link rel="stylesheet" href="font-awesome-4. ...

  6. 10慕课网《进击Node.js基础(一)》初识promise

    首先用最简单的方式实现一个动画效果 <!doctype> <html> <head> <title>Promise animation</titl ...

  7. 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.02更新)

    温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...

  8. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

  9. JS基础-全方面掌握继承

    前言 上篇文章详细解析了原型.原型链的相关知识点,这篇文章讲的是和原型链有密切关联的继承,它是前端基础中很重要的一个知识点,它对于代码复用来说非常有用,本篇将详细解析JS中的各种继承方式和优缺点进行, ...

随机推荐

  1. Spring Bean的生命周期、后置处理器、定义继承

    目录: 了解Spring的基本概念 Spring简单的示例 Spring Bean的定义及作用域 1.Bean的生命周期 Bean的生命周期可以简单的理解为:Bean的定义——Bean的初始化——Be ...

  2. .NET Core 3 WPF MVVM框架 Prism系列之数据绑定

    一.安装Prism 1.使用程序包管理控制台 Install-Package Prism.Unity -Version 7.2.0.1367 也可以去掉‘-Version 7.2.0.1367’获取最 ...

  3. supervisor服务

    描述: 遇到各种各样的各种坑, 可以通过python2 的pip安装, 可以通过apt安装, 不支持python3: 如若用apt安装可能会自动启动并且加入开机自启(不保证成功),pip安装一定不会需 ...

  4. 【Spring】简述@Configuration配置类注册BeanDefinition到Spring容器的过程

    概述 本文以SpringBoot应用为基础,尝试分析基于注解@Configuration的配置类是如何向Spring容器注册BeanDefinition的过程 其中主要分析了 Configuratio ...

  5. Java基础知识总结之垃圾回收机制

    垃圾回收机制 Java垃圾回收机制是Java语言的重要功能之一.当程序创建对象,数组等引用类型对象时,系统会自动在内存区为之分配一块内存,对象就保存在这块内存区内,当这块内存不再被任何变量引用时,这块 ...

  6. 2019-11-19:xxe漏洞利用,笔记

    xxe,也就是xml,外部实体注入攻击,漏洞是对非安全的外部实体数据进行处理时引发的安全问题,要了解xxe,就必须懂得xml的一些规则xml是用于标记电子文件使其具有结构性的标记语言,可以用来标记数据 ...

  7. day 25 方法和函数 反射

    特殊成员的补充: # __str__ class Foo(object): def __init__(self): pass def func(self): pass def __str__(self ...

  8. 天了噜,为什么外链css要放在头部,js要放在尾部?

    我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后.为什么要这样子处理,今天参考一些资料好好分析下. 为什么外链css为什么要放头部? ...

  9. Linux如何切换图形界面和命令行界面

    在命令行,输入 init 3 命令,并按回车键执行,切换到命令行界面 切换到命令行界面后,在界面上只显示一个闪烁的光标,按下 Ctrl+Alt+F6(非虚拟机)或者 Alt+F6(虚拟机),显示用户登 ...

  10. e = e || window.event的区别及用法

    本文链接:https://blog.csdn.net/qq_41348029/article/details/81288481 e = e || window.event 在做事件处理时,用于区分IE ...