重学js-正则(4)

最新推荐文章于 2024-05-09 08:30:00 发布

weixin_43756060

最新推荐文章于 2024-05-09 08:30:00 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/weixin_43756060/article/details/106024473

版权

重学前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

正则的作用

查找
替换
数据有效性验证

创建正则表达式

字面量或直接量

var str1='i love js';
var pattern=/js/;

构造函数

new RegExp('js','igm')
new RegExp(变量,'igm')

模式修饰符

g 全局匹配

exec：无论是否全局匹配，都会返回分组中匹配到的内容；
无论是否全局匹配都只返回当前匹配到的内容，而不是所有；
只不过全局匹配时可以继续匹配下去。

match: 只有非全局匹配，才会返回分组中匹配到的内容；
全局匹配只会一次返回所有匹配到的字符。

replace：非全局匹配，只替换第一个匹配到的内容；
全局匹配替换所有匹配到的内容。

test、search、split：没区别

i 忽略大小写
m 多行匹配

多行匹配起作用的条件

全局匹配
使用^或$

// 构造函数的形式
var str1='i love Js';
var pattern=new RegExp('js','i');
pattern.test(str1);
pattern.exec(str1);

// 字面量的形式
var str1='i love Js';
var pattern=/js/i;
pattern.test(str1);
pattern.exec(str1);

当正则匹配式是不固定的使用构造函数的方式比较方便，直接传递变量就可以了

简单的转义字符反斜杠\

\n 换行符
\t 制表符
\xnn 由十六进制数nn指定的拉丁字符
\uxxxx 由十六进制数xxxx指定的Unicode字符

正则的方法

test
exec

var str1='i love js';
var pattern=/js/;
pattern.test(str1);  //找到返回true；找不到返回false
pattern.exec(str1);  // 将找到的字符串扔到数组中，返回一个数组；找不到返回null

字符类

总结：

字符类：

[…]和[^…]（取反）方括号内的任意一个字符；
.除换行符之外的任意一个字符；
\w和\W（取反）任何字母、数字以及下划线组成的一个字符；
\d和\D（取反）任意一个数字;
\s和\S（取反）任何Unicode空白符（eg. 空格、制表、\n);

重复(量词)
{n,m} n<=x<=m
{n,} x>=n
{n} x=n
? {0,1}
   {1,}
    {0,}
非贪婪匹配

{n,m}?
{n,}?
{n}?
??
+?
*?

普通字符

字母
数字
没有特殊含义的字符
中文

字符

转义字符：反斜杠 \
匹配任意一字符：[]
取反：[^]

var str='javascript';
// 匹配j或s任意一字符
var patten=/[js]/;
// 匹配除js字符以外的字符
var patten1=/[^js]/;
// 匹配小写英文字母
var patten2=/[a-z]/;
var patten3=/[c-z]/;

patten.exce(str); // j
patten1.exce(str); // a
patten2.exce(str); // j
patten3.exce(str); // c


var str1='abc帅';
// 匹配汉字
var patten4=/[\u4e00-\u9fa5]/;
patten4.exce(str1); // 帅

var str2='Javascript';
// 匹配任意一大写或小写字母
var patten5=/[a-zA-Z]/;
patten5.exce(str2) //J

var str3='00544';
// 匹配任意数字
var patten6=/[0-9]/;
patten6.exce(str3) //0

var str='3.1415926';
// 匹配除换行符以外的所有字符
var pattern=/./;
// 匹配小数点
var pattern1=/\./;
console.log(pattern.exec(str)); //3


// /[a-zA-Z0-9_]/  等同于 /\w/
// /[^a-zA-Z0-9_]/  等同于 /\W/

// 数字的别名
// /[0-9]/  等同于 /\d/
// /[^0-9]/  等同于 /\D/

// 匹配空格、制表符的别名
// / / 等同于 /\s/;
// /^ / 等同于 /\S/;

重复匹配

var str='110';
// 匹配3个数字
var pattern=/\d{3}/;

// 匹配大于等于1，小于等于2个字符
var pattern1=/\d{1,2}/;

// 匹配至少1个,两种写法
var pattern2=/\d{1,}/;
var pattern2=/\d+/;

// 匹配0个或一个，两种写法
var pattern3=/\d{0,1}/;
var pattern4=/\d?/;

// 可以匹配0次或更多
var pattern5=/\d*/;

正则中的贪婪匹配

默认是贪婪匹配的

var str='<p><strong>第一个</strong></p><p><strong>第二个</strong></p>';
// 默认是贪婪匹配字符串中的所有strong
var pattern=/<strong>.*<\/strong>/;

// 取消贪婪匹配,？最多匹配1次
var pattern1=/<strong>.*?<\/strong>/;

选择、分组和引用

总结

|选择，匹配该符号左边或右边的东西
(…)分组统一操作；捕获括号中的内容；
(?:…)非捕获分组
\n 第n个捕获性分组的引用（eg. \1 \2 \3…）

捕获到的内容

exec返回的数组中
/\1/ 模式中
replace的第二个参数中，$1
RegExp.$1

| 或

// 匹配字符串中的html或css或js
var p=/html|css|js/

()分组

var str='abab';
// + 至少匹配一次
// ()分组匹配ab
var pattern=/(ab)+/;

//捕获分组
var str1='abcd';
var pattern1=/(ab)c/; // abc ab
// 非捕获
var pattern2=/(?:ab)c/; // abc
var pattern3=/(ab)(c)/; // abc ab c


// 分组匹配代指
var Str='<p><strong>第一个</strong></p><p><strong>第二个</strong></p>';
// \1代表分组1：(a-bA-Z]+)
var Pare=/<[(a-bA-Z]+)>(.*?)<\/\1>/

指定匹配位置

总结

^ 首匹配
$ 尾匹配
\b和\B单词边界，即\w和\W之间的位置
(?=p)和(?!=p)前瞻性匹配，只有接下来的字符=p，才匹配之前的内容

首匹配

var str='js';
// 必须js开头
var p=/^js/

// /[^0-9]/ 表示除了数字之外的所有字符，^表示取反

尾匹配

var str='html js';
// 匹配js结尾
var p=/js$/

全部匹配

var str = '122d6789';
// 必须全部是数字组成
var p=/^\d+$/;
// 第二种写法:匹配里面是否有非数字，匹配上了就说明字符串不是全部由数字组成
var p1=/\D/

边界匹配
例如通过classname获取元素兼容性处理

<ul>
    <li class="odd ass">1</li>
    <li class="even">2</li>
    <li class="odd">3</li>
    <li class="even">4</li>
</ul>
<script>
   function getEleByClass(classNames,parent){
      parent = parent || document;
      if(!document.getElementsByClassName){
          return parent.getElementsByClassName(classNames);
      }else{
          // 获取父元素下的所有元素
          var eleList=parent.getElementsByTagName('*');
          var nodeList=[];

          // var pattern = new RegExp('(^|\\s+)' + classNames + '($|\\s+)');
          // 使用边界值\b
          var pattern = new RegExp('\\b' + classNames + '\\b');

         // 判断是否包含传递的class名字
          for(var i=0;i<eleList.length;i++){
               // 使用全等只能判断一个class名字，如果是 a odd b这样的就无法判断，只能使用正则匹配
               // 要匹配的名字在名字的开头 add a b   ^
               // 要匹配的名字在名字的结尾 a b odd   $
               // 要匹配的名字在名字的中间 a odd b   
               // if(eleList[i].className===classNames){
              //     nodeList.push(eleList[i])
               // }
                    
               if(pattern.test(eleList[i].className)){
                   nodeList.push(eleList[i])
                }
          }
          return nodeList;
      }
     }
     getEleByClass('odd')
 </script>

前瞻性匹配

var str=‘javascript';
// 匹配以script结尾的java字符
var p=/java(?=script)/;

反方向前瞻匹配

var str=‘javascript';
// 匹配不是以script结尾的java字符
var p=/java(?!script)/;

RegExp对象

RegExp对象的实例方法

test(字符串）
exec(字符串)

RegExp实例属性

判断是否写相应的修饰符，返回布尔值

ignoreCase 是否设置了i
global 是否设置了g
multiline 是否设置了m
source 字面量形式对应的字符串
lastIndex 开始搜索下一个匹配项的字符位置，默认为0

String对象中与正则表达式相关的方法

search 全局匹配对其无影响

var str='html js';
var p=/js/;
// 返回匹配的位置，加全局匹配也只是返回第一个找到的索引值
str.search(p)

match 全局匹配会有影响

var str='html js js';
var p=/js/g;
// match返回的是数组，全局匹配返回所有的匹配项，不是全局匹配返回第一个匹配项，没找到返回null
str.match(p)

// 非全局匹配才会返回分组中匹配到的内容，全局匹配只能匹配到所有匹配到的字符
var p1=/(j)s/;
str.match(p1) //['js','j']

var p2=/(j)s/g;
str.match(p2) //['js','js']


// 全局多行匹配模式
var str2='js \\n js \\n js'
var p3=/js/gm;
str2.match(p3)

// 多行匹配的作用
var p4=/js$/g;
str2.match(p4) //['js']

var p4=/js$/mg;
str2.match(p4) //['js','js','js']

split 全局匹配对其无影响

var str='html ,js,css';
// 消除空格
var p =/\s*,\s*/;
str.split(p);

replace 全局匹配全部替换

var str='i love js js';
var p=/js/g;
str.replace(p,'html')

var str1='1111-11-11';
var p1 = /-/g;
str1.replace(p,'.')

// 将匹配到的文字加粗
var p2 = /(js)/;
str.replace(p2,'<strong>$1</strong>')


// 敏感词过滤
var str='小明张感小花’;
var p=/小明|小花/g;
str.replace(p,function($0){
	// console.log($0);
	var res='';
	for(var i=0;i<$0.length;i++){
		res += '*';
	}
	return res;
})

常用的正则表达式

QQ号码

规则：

全是数字
首位不能为0
最少5位
目前最多11位

// 首尾匹配表示验证整个字符串
// [1-9]首位首位不能为0
// \d{4,10} 最少5位，最多11位
var p=/^[1-9]\d{4,10}$/

昵称

规则：

2-18位，中英文、数字及下划线

var p=/^[\u4e00-\u9fa5a-zA-Z0-9_]{2,18}$/
var p1=/^[\u4e00-\u9fa5\w]{2,18}$/

密码

规则：

6-16位
不能用空白字符
区分大小写

var p=/^\S{6,16}$/

去除字符串首尾空白字符

// 第一种方法
var str='   aaaaa   ';
var p=/^\s+|\s+$/g;
str.replace(p,'');

// 第二种方法
var str1='   aaaaa   ';
var p1=/^\s+/;
var p2=/\s+$/;
str1.replace(p1,'').replace(p2,'');

转驼峰

var str='background-color';
var p=/-([a-z])/gi;
str.replace(p,function(all,letter){
	return letter.toUpperCase();
})

匹配html标签

var str='<p class="odd">哈哈哈</p>';
// <\/?[a-zA-Z]+(\s+[a-zA-Z]+=".*")*>
// \/?匹配/问号表示可能有可能没有，斜杠表示反斜杠
// [a-zA-Z]+ 匹配标签名
// (\s+[a-zA-Z]+=".*")* 匹配所有属性
var p=/<\/?[a-zA-Z]+(\s+[a-zA-Z]+=".*")*>/g
str.match(p)

// 逆向思考匹配
var p1=/<[^>]+>/g

邮箱

var p1 =/(?:\w+\.)*\w+@(?:\w+\.)+[a-z]/i

var p2=