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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
webpack打包多页面的方法
Nov 30 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
python argparser的具体使用
2019/11/10 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
酒店总经理职务说明书
2014/02/26 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
博士导师推荐信
2015/03/25 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
导游词之上海豫园
2019/10/24 职场文书