JS经典正则表达式笔试题汇总


Posted in Javascript onDecember 15, 2016

本文实例总结了JS经典正则表达式笔试题。分享给大家供大家参考,具体如下:

一.复习字符串的传统操作

如何获取一个字符串中的数字字符,并按数组形式输出,如

dgfhfgh254bhku289fgdhdy675gfh

输出[254,289,675]

分析:循环用charAt()的方法获取到每一个子字符串,判断他是不是在0~9之间,是就把他扔到准备好的数组里

var str="dgfhfgh254bhku289fgdhdy675gfh";
findNum(str);
function findNum(){
 var arr=[];
 for(var i=0;i<str.length;i++){
  if(str.charAt(i)<='9'&&str.charAt(i)>='0'){
   arr.push(str.charAt(i));
   alert(arr);
  }
 }
}

但是这样会输出[2,5,4,2,8,9,6,7,5]和我们想要的结果有点偏差,于是我们需要一个新的空的字符串,每次碰到是数字走if,碰到字符走else,走else的时候把之前那些数字存放到新的空的字符串里,然后通过push添加到数组,然后清空字符串,一以便下次重新存放

var str="dgfhfgh254bhku289fgdhdy675";
findNum(str);
function findNum(){
 var arr=[];
 var result="";
 for(var i=0;i<str.length;i++){
  if(str.charAt(i)<='9'&&str.charAt(i)>='0'){
   result+=str.charAt(i);  //注意添加方向不要反了
  }
  else{
   if(result){
    arr.push(result);
    result="";
   }
  }
 }
 alert(arr)
}

还有个隐患:如果最后以数字结尾,则最后不会进入else,最后几位数字会读不到,因此for循环外面再添加一遍else里面的if循环

二.什么是正则,有什么用

正则:也叫做规则,让计算机能够读懂人类的规则

*前端哪些地方用到正则?

比如注册页面输入用户名,我们给定一套规则,判断他输入的对不对

*范围?

正则都是用来操作字符串的(即不要用他去操作对象什么的)

*怎么写?

正则也是一个系统对象,跟数组、json一样,也有个写法规则

简写   var re=//;  //只写两斜杠,浏览器会认为是注释,所以尽量不要给他为空,注意两斜杠之间不要有引号

全称   var re=new RegExp();  //Reg是正则的简写,Exp是表达式的简写

大部分情况用简写,只有一种情况用全称写法:正则需要传参的时候

注:全称写法用到\时,需要两个\\,否则是转义字符

三.正则表达式的常用方法

1.test

正则去匹配字符串,如果匹配成功就返回真,匹配失败就返回假

写法:正则.test(字符串)

如:

var str='abcdef';
var re=/b/; //bc一个整体也在字符串中,弹出true,但是写bd,弹出false,因为字符串中没有bd这么一个整体
alert(re.test(str));

弹出true

扩展:

检测一个字符串是不是全是数字

var str='8621t56461';
var re=//;
if(re.test(str)){
 alert("不全是数字");
}
else{
 alert("全是数字");
}

两斜杠之间要写什么呢?引入转义字符

\s(\S):空格(非空格)

\d(\D):数字(非数字)

\w(\W):字符(非字符)   字符包括字母、数字、下划线

2.search

正则去匹配字符串,如果匹配成功,就返回匹配成功的位置,如果匹配失败就返回-1

search的写法:字符串.search(正则)

如:

var str="abcdef";
var re=/b/;
alert(str.search(re));
//返回1
var re=/w/;
//返回-1
var re=/B/;
//返回-1

正则中的默认:是区分大小写的

如果要不区分大小写,在正则的最后加标识i

var re=/B/i

完整写法:

var re=new RegExp("B","i");

3.match

正则去匹配字符串,如果匹配成功,就返回匹配成功的数组,如果匹配不成功,就返回null

match的写法:字符串.match(正则)

比如上面例子要找出数字

var str="dgfhfgh254bhku289fgdhdy675";
var re=/\d/;
alert(str.match(re));
//输出2

为什么后面的不找了?

正则默认:正则匹配成功就会结束,不会继续匹配

如果想要全部查找,就要加标识g(全局匹配)

var re=/\d/g;
//输出2,5,4,2,8,9,6,7,5

跟我们想要的结果还是有偏差,如果要连着找到,而不是一个个分开,则需要

var re=/\d\d/g; //两个两个找
var re=/\d\d\d/g; //三个三个找

但是个数不一定时怎么找,引进量词

量词:匹配不确定的位置

+:至少出现一次

var re=/\d+/g;

就实现上面的效果了

4.replace

正则去匹配字符串,匹配成功的字符去替换新的字符串

replace的写法:字符串.replace(正则,新的字符串)

如:

var str="aaa";
var re=/a/;
str=str.replace(re,"b");
alert(str);
//输出baa

敏感词过滤例子

str.replace(re,"*");

但是如果有很多词要过滤,不能写成一整段,这样匹配不到,怎样把一个词一个词分开呢

|:或的意思

新的问题:所有敏感词都会替换成一颗星,怎样做到几个字几颗星呢?

replace()的第二个参数,可以是字符串,可以是回调函数

str.replace(re,function(){
 return '*';
});

现在和上面那句话作用一样

回调函数的第一个参数,就是匹配成功的字符,即可以通过第一个参数的长度,来给他返回几颗星

str.replace(re,function(str){
 var result='';
 for(var i=0;i<str.length;i++){
  result+='*';
 }
 return result;
});

四.正则表达式字符类

字符类:一组相似的元素(用[]表示[]的整体代表一个字符,()是分组和子项的意思)

1.任意字符

[abc]

如o[usb]t--obt、ost、out

2.范围

[a-z]、[0-9]

如id[0-9]--id0、id5

3.排除

[^a]

如o[^0-9]t--oat、o?t、o t

例子:过滤标签

过滤掉<>(如<div>、</div>、<h2 class="sfsdf">)

var re=/<[\w\W]+>/g;  //中括号里是或的关系,也就是字符或非字符都有了,包括了斜杠,引号等

另一种做法:    var re=/<[^>]+>/g;

五.正则表达式转义字符

.(点):任意字符       \.:真正的点

\s(\S):空格(非空格)

\d(\D):数字(非数字)

\w(\W):字符(非字符)   字符包括字母、数字、下划线

\数字:重复子项(\1:重复的第一个子项,\2:重复的第二个子项...)

var str="abca";
var re=/(a)(b)(c)\1/ ; //true,为什么不用var re=/(a)(b)(c)\a/ ;一样能匹配成功,\数字,用于不确定的子项字符
var re=/(a)(b)(c)\2/ ; //false
alert(re.teat(str));

例子:找某个字符串中出现最多的字符和它一共出现多少次

var str="vbbbbhybbfhbbgbbb";
var arr=str.split("");
str=arr.sort().join("");
var value=""; //存放出现最多的字符
var index=0; //存放次数
var re=/(\w)\1+/g;

没有\1,re就是一整个排好序的字符串,有了\1就是出现过的有重复的取出来像这样bbb...,hh

str.replace(re,function($0,$1){ //$0代表整体,$1代表第一个子项
 if(index<$0.length){ //$0:每一组重复的元素
  index=$0.length;
  value=$1;
 }
})
alert('出现最多的字符是'+value+',出现次数是'+index);

\b(\B):独立的部分(非独立的部分)  独立的部分(起始、结束、空格)

如:

var str="onetwo";
var re=/\bone/; //起始位置,true
var re=/one\b/; //false,要true,one和two之间加空格或者只有one
alert(re.test(str));

独立部分应用举例

之前有用到用封装好的函数来获取className

function getByClass(oparent,sClass){
 var aEle=oparent.getElementsByTagName("*");
 var aResult=[];
 var i;
 for(i=0;i<aEle.length;i++){
  if(aEle[i].className==sClass){
   aResult.push(aEle[i]);
  }
 }
 return aResult;
};

这个会有bug

<div class="box1"></div>
<div class="box1box2"></div>
<div class="box1 box2"></div>

用这个方法获取box1,只能获取到第一个

用正则来改写

function getByClass(oparent,sClass){
 var aEle=oparent.getElementsByTagName("*");
 var aResult=[];
 var i;
 var re=new RegExp('\\b'+sClass+'\\b')
 for(i=0;i<aEle.length;i++){
  if(re.test(aEle[i].className)){
   aResult.push(aEle[i]);
  }
 }
 return aResult;
};

六.量词

不确定的字符个数

量词:{}

{4,7}   最少出现4次,最多出现7次

{4,}     最少出现4次

{4}      正好出现4次

+是{}的简写,相当于(1,)

? 相当于{0,1}    //出现0次或者1次

* 相当于{0,}     //至少出现0次,可以没有

七.正则收尾

^:正则的最开始位置,表示起始的意思

$:正则的最后,表示结束的意思

例子:去掉字符串里的空格

var re=/^\s+|\s+$/g;
str.replace(re,"");

例子:检测邮箱

var re=/^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/;

八.前向声明和反前向声明

(?=) :前向声明

(?!):反前向声明

举例

var str="abacad";
var re=/a(?=b)/g;
str=str.replace(re,"*");
alert(str);

输出:*bacad

如果改为

var re=/a(?!b)/g;

输出:ab*c*d

Javascript 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
vue 自定义组件的写法与用法详解
Mar 04 Javascript
javascript中闭包概念与用法深入理解
Dec 15 #Javascript
javascript读取文本节点方法小结
Dec 15 #Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 #Javascript
jQuery validate插件功能与用法详解
Dec 15 #Javascript
EditPlus 正则表达式 实战(3)
Dec 15 #Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 #Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 #Javascript
You might like
php中的观察者模式简单实例
2015/01/20 PHP
php检测文本的编码
2015/07/26 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python批量发送post请求的实现代码
2018/05/05 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python中dict和set的用法讲解
2019/03/28 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
精彩自我鉴定
2014/01/16 职场文书
《匆匆》教学反思
2014/02/22 职场文书
检讨书范文1000字
2015/01/28 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android