前端正则练习

正则表达式

1、创建正则表达式

a、使用一个正则表达式字面量

const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;

b、调用RegExp对象的构造函数

const regex = new RegExp(pattern,[,flags]);

2、特殊字符

^      --匹配输入的开始
$      --匹配输入的结束
\*     --0次或多次 {0,}
\+     --1次或多次 {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 --非单词边界

3、使用正则表达式的方法

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

4、练习

1 匹配结尾的数字 
  /\d+$/ 2 统一空格数,字符串内如有空格,但是空格的数量可能不一致,通过正则将空格的个数统一变为一个
  let reg = /\s+/g
  str.replace(reg," ")
3 判断字符串是不是由数字组成
  str.test(/^\d+$/)
4 电话号码正则
  -区号必填为3-4位
  -区号之后用“-”与电话号码连接,电话号码为7-8位的数字
  -分机号码为3-4位,非必填,但若填写则以“-”与电话号码相连接
  /^\d{3,4}-\d{7,8}(-\d{3-4})?$/
5、手机号码正则表达式,正则验证手机号,忽略前面的0,支持130-139,150-159。忽略前面的0之后判断它是11位的
  /^0*1(3|5)\d{9}$/
6、使用正则表达式实现删除字符串中的空格(字符串前后的空格)
  function trim(str){
    let reg = /^\s+|\s+$/g;
    return str.replace(reg,'');
  }
7、限制文本框只能输入数字和两位小数点等等
  /^\d*\.\d{0,2}$/
8、只能输入小写的英文字母和小数点,和冒号,正反斜杠(:./\)
  /^[a-z\.:\/\\]*$/
9、替换小数点前内容为指定内容
  例如:infomarket.php?id=197替换为test.php?id=197
  var reg=/^[^\.]+/ //任何非小数点开头的进行替换
  var target = '---------'
  str = str.replace(reg,target)
10、只匹配中文的正则表达式
  /[\u4E00-\u9FA5\uf900-\ufa2d]/ig
11、返回字符串的中文字符个数
  先去掉非中文字符,再返回length属性
  function cLength(str){
    var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;
    //匹配非中文的正则表达式
    var temp = str.replace(reg,'');
    return temp.length;
  }
12、正则表达式取得匹配IP地址前三段
  只要匹配最后一段并且替换为空字符串就行了
  function getPreThrstr(str){
    let reg = /\.\d{1,3}$/;
    return str.replace(reg,'');
  }
13、匹配<ul>与</ul>之间的内容
  /<ul>[\s\S]+?</ul>/i
14、用正则表达式获取文件名
  c:\images\tupian\006.jpg
  可能是直接在盘符目录下,也可能在好几层目录下,要求替换到只剩文件名
  首先匹配非左右斜线字符0或多个,然后是左右斜线一个或者多个
  function getFileName(str){
    var reg = /[^\\\/]*[\\\/]+/g;
    // xxx\ 或是 xxx/
    str = str.replace(reg,'');
    return str;
  }
15、绝对路径变相对路径
  "http://23.123.22.12/images/somepic.gif"转换为:"/images/somepic.gif"
  var reg = /http:\/\/[^\/]+/
  str = str.replace(reg,'')
16、用户名正则
  用于用户名注册,用户名只能用中文、英文、数字、下划线、4-16个字符
  /^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}/
17、匹配英文地址
  规则如下:
  包含“点”,“字母”,“空格”,“逗号”,“数字”,但是开头和结尾不能是除字母外任何字符
  /^[a-zA-Z][\.a-zA-Z,0-9]*[a-zA-Z]$/
18、正则匹配价格
  开头数字若干位,可能有一个小数点,小数点后面可以有两位数字
  /^\d+(\.\d{2})?$/
19、身份证号码的匹配
  身份证号码可以是15位或者18位,其中最后一位可以是X。其他全是数字
  /^(\d{14}|\d{17})(X|x)$/
20、单词首字母大写
  每单词首字母大写,其他小写。如blue idea转换为Blue Idea,BLUE IDEA也转换为B略Idea
  function firstCharUpper(str){
    str = str.toLowerCase();
    let reg=/\b(\w)/g;
    return str.replace(reg,m=>m.toUpperCase());
  }
21、正则验证日期格式
  yyyy-mm-dd格式
  4位数字,横线,1或者2位数字,再横线,最后又是1或者2位数字。
  /^\d{4}-\d{1,2}-\d{1,2}$/
22、去掉文件的后缀名
  www.abc.com/dc/fda.asp变为www.abc.com/dc/fda
  function removeExp(str){
    return str.replace(/\.\w$/,'');
  }
23、验证邮箱的正则表达式
  开始必须是一个或者多个单词字符或者是-,加上@,然后又是一个或者多个单词字符或者是-。然后是点“.”和单词字符和-的组合,可以有一个或者多个组合。
  /^[\w-]+@\w+\.\w+$/
24、正则判断标签是否闭合
  例如:<img xxx="xxx" 就是没有闭合的标签;
  <p>p的内容,同样也是没闭合的标签
  标签可能有两种方式闭合,<img xxx="xxx" />或者是<p>xxx</p>
  /<([a-z]+)(\s*\w*?\s*=\s*".+?")*(\s*?)>[\s\S]*?(<\/\l>)+|\s*\/>)/i
25、正则判断是否为数字与字母的混合
  不能小于12位,且必须为字母和数字的混合
  /^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i
26、将阿拉伯数字替换为中文大写形式
  function replaceReg(reg,str){
    let arr = ["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
    let reg=/\d/g;
    return str.replace(reg,function(m){return arr[m];});
  }
27、去掉标签的所有属性
  <td style="width:23px;height:26px;" align="left">***</td>
  变成没有任何属性的
  <td>***</td>
  思路:非捕获匹配属性,捕获匹配标签,使用捕获结果替换掉字符串。正则如下:
  /(<td)\s(?:\s*\w*?\s*=\s*".+?"*?\s*?(>)/

原博地址:https://blog.csdn.net/CS13477062349/article/details/88892845

posted @ 2020-12-21 15:00  前端小瑶  阅读(500)  评论(0编辑  收藏  举报