1、JavaScript正则表达式课程概要

  方便查找字符串、数字、特殊字串等等

2、正则表达式的介绍

  RegExp是正则表达式的缩写

  当检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp就是这种模式

  简单的模式可以是一个单独的字符串

  更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等

  可以规定字符串中的检索位置,以及要检索的字符类型,等等

3、正则表达式的使用

3.1两种定义正则表达式变量的方式

var patt1 = new RegExp("hello");
var patt2 = /world/ ;

3.2  test()方法

  test()方法检索字符串中的指定值,返回值是true或false

var pat = /my/;
var str = "this is my code...";
console.log(pat.test(str));//true

3.3  exec()方法

  exec()方法检索字符串中的指定值,返回值是被找到的值。如果没有发现匹配,则返回null返回的只有第一次遇见的值,且长度只有1

var pat = /hello/;
console.log(pat.exec("oh hello world hello!"));/*alert打印出的是hello*/
/*console控制台打印出的是一个对象
* 其中打印出的是"hello",index:3,input:"oh hello world!",groups:undefined
*
* 0:"hello" 这里应该就是实现了打印对象名得到hello值。
* groups:undefined
* index:3
* input:"oh hello world!"
* 下面还有一堆每个对象都有的方法
* */

3.4.  正则表达式类型

  /pattern/attributes 参数attributes是一个可选的字符串,常用属性"g"(用于指定全局匹配)"l"(用于指定不区分大小写的匹配)

//不区分大小写
var str = "Visit Hunger";
var patt1 = /hunger/i;
console.log(str.match(patt1));
//全局匹配
var str = "hello hunger valley!I am hunger";
var patt1 = /hunger/g;
console.log(str.match(patt1));
//不区分大小写,全局匹配
var str = "hello Hunger valley!I am hunger";
var patt1 = /hunger/gi;
console.log(str.match(patt1));

3.5字符串正则

1.search

字符串查找(返回第一个查找到的位置)
var str = "Visit W3School! W3School2";
console.log(str.search(/w3school/));//-1
console.log(str.search(/w3school/i));//

2.match

字符串匹配(返回匹配的值的数组)
var str = "1 plus 2 equal 33";
console.log(console.log(str.match(/\d+/))); // [1]
//d就是数字,+就是联合
console.log(str.match(/\d+/g));//[1,2,33]

3.replace

字符串替换(返回替换后的字符串)
var str = "Hello Hunger! oh I am hunger";
console.log(str.replace(/Hunger/,"valley"));
console.log(str.replace(/hunger/ig,"hunger666"));/*全局,不区分大小写替换*/

4.split

字符串分割(按照给定分隔符将字符串分割为数组,返回按照分隔符分割之后的数组)
var str = "Hello Hunger    , oh I am Hunger";
str.split("");/*给定空的话返回单个字符的数组*/
/*
* var str = "Hello Hunger , oh I am Hunger";
str.split(" ");
* 给一个空格的话有问题,具体是算法的问题,不知道算法怎么写的,反正结果很有趣。
* */
str.split(/\s+/);/*\s+代表一个或多个空格的意思*/

4、正则表达式的使用2

给出个正则表达式书写工具网址

http://tool.oschina.net/regex/#(这个是用来写正则表达式的)

https://regexper.com(这个是将给定的正则表达式转换为流程图的一个工具)

JavaScript正则表达式在线测试工具:

http://tools.jb51.net/regex/javascript

正则表达式在线生成工具:

http://tools.jb51.net/regex/create_reg

正则写法笔记

[abc]查找方括号内的任何字符
var str = "Is this all there isaaa?"
var patt = /[a-b]/g;
console.log(str.match(patt));
//["a", "a", "a", "a"]
[^abc]查找任何不存在方括号之间的字符
var str = "hello hunger!";
var patt = /[^hij]/g;
console.log(str.match(patt));
//["e", "l", "l", "o", " ", "u", "n", "g", "e", "r", "!"]
[0-9]查找任何从0到9的数字
[a-z]查找任何从小写a到小写z的字符
[A-Z]查找任何从大写A到大写Z的字符
[A-z]查找任何从大写A到小写z的字符
[adgk]查找任何给定集合的任何字符
[^adgk]查找任何给定集合外的任何字符
red|blue|green查找任何指定的选项
var str = "hello hunger! How are you?"
var patt = /hello|you/g;
console.log(str.match(patt));
//["hello", "you"]
查找单个字符,除了换行和行结束符
var str = "That's hot";
var patt = /h.t/g;
console.log(str.match(patt));
//["hat", "hot"]
\w查找单个单词字符(字母、数字、下划线)
var str = "Give 100%1;";
var patt = /\w/g;
console.log(str.match(patt));
//["G", "i", "v", "e", "1", "0", "0", "1"]
\W查找单个非单词字符
var str = "Give 100%;";
var patt = /\W/g;
console.log(str.match(patt));
//[" ", "%", ";"]
\d查找单个数字字符
var str = "Give 100%!";
var patt = /\d/g;
console.log(str.match(patt));
// ["1", "0", "0"]
\D查找非数字字符
var str = "Give 100%";
var patt = /\D/g;
console.log(str.match(patt));
//["G", "i", "v", "e", " ", "%"]
\s查找空白字符(空格、tab、换行、回车)
var str = "Is this all there is?";
var patt = /\s/g;
console.log(str.match(patt));
//[" ", " ", " ", " "]
\S查找非空白字符
var str = "Is this all there is?";
var patt = /\S/g;
console.log(str.match(patt));
//["I", "s", "t", "h", "i", "s", "a", "l", "l", "t", "h", "e", "r", "e", "i", "s", "?"]
\b匹配单词边界

/\bm/匹配"moon"中的'm'  /oo\b/不匹配"moon"中的'oo',因为'oo'后面的'n'是一个但词字符;

/oon\b/匹配"moon"中的'oon',因为'oon'位于字符串中的末端,后面没有单词字符;

var str = "hello Hunger";
var patt = /\bHung/g;
console.log(str.match(patt));
//["Hung"]
//"\b在前面就是检测的前面的匹配,在后面就是检测的后面的匹配。"
\B匹配非单词边界
\n查找换行符
var str = "hello Hunger.\n be a PE";
var patt = /\n/g;
console.log(str.search(patt));
//
n+匹配任何包含至少一个n的字符串
var str = "Hello HHunger! Hello World!";
var patt = /H+/g;
console.log(str.match(patt));
//["H", "HH", "H"]
var str = "Hello Hunger! Hello World!";
var patt2 = /\w+/g;
console.log(str.match(patt2));
//["Hello", "Hunger", "Hello", "World"]
n*匹配任何包含零个或多个n的字符串。
var str = "hellooo Hunger! Hello World!";
var patt = /lo*/g;
console.log(str.match(patt));
//["l", "looo", "l", "lo", "l"]
n?匹配任何包含零个或一个n的字符串
var str = "1, 100 or 1000?";
var patt = /10?/g;
console.log(str.match(patt));
//["1", "10", "10"]
n{X}匹配包含X个n的序列的字符串
var str = "100, 1000 or 10000?";
var patt = /\d{4}/g;
console.log(str.match(patt));
//["1000", "1000"]
//这里只返回了前四位数字,后面再长也没有检测了。
n{X,Y}匹配包含X或Y个n的序列的字符串
var str = "100, 1000 or 10000?";
var patt = /\d{3,4}/g;
console.log(str.match(patt));
//["100", "1000", "1000"]
n{X,}匹配包含至少X个n的序列的字符串
var str = "100, 1000 or 10000?";
var patt = /\d{3,}/g;
console.log(str.match(patt));
//["100", "1000", "10000"]
n$匹配任何结尾为n的字符串
var str = "Is this his";
var patt = /is$/g;
console.log(str.match(patt));
//["is"]
//这里检测的是给定的字符串(str)的结尾,我试了下str的结尾如果不是his而是hi则结果为null,我还试了就算不加参数g结果也是null,
//所以这里默认检测的是整个字符串。
^n匹配任何开头为n的字符串。
var str = "Is this his noo nyy";
var patt = /^Is/g;
console.log(str.match(patt));
//["Is"]
//和上面的n$是一样的原理,是检测的整体的

web前端学习(四)JavaScript学习笔记部分(10)-- JavaScript正则表达式的更多相关文章

  1. web前端--知识点,笔记叠加(javascript,jquery,html5+css3.0,ajax)

    函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...

  2. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  3. 想做web前端project师应该学习些什么?

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  4. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

  5. web前端开发控件学习笔记之jqgrid+ztree+echarts

    版权声明:本文为博主原创文章,转载请注明出处.   作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...

  6. 2022年Web前端开发流程和学习路线(详尽版)

    前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...

  7. 最适合2018年自学的web前端零基础系统学习视频+资料

    这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

  8. web前端零基础入门学习!前端真不难!

    现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...

  9. 史上最全的web前端开发程序员学习清单!

    今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...

  10. WEB 前端模块化,读文笔记

    文章链接 WEB 前端模块化都有什么? 知识点 根据平台划分 浏览器 AMD.CMD 存在网络瓶颈,使用异步加载 非浏览器 CommonJS 直接操作 IO,同步加载 浏览器 AMD 依赖前置 req ...

随机推荐

  1. linux /bin/find 报错:paths must precede expression 及find应用

    1.问题描述,运行下面的命令,清楚日志 [resin@xx ~]$ ssh xxx  "/usr/bin/find /data/logs/`dirname st_qu/stdout.log` ...

  2. 在js中使用Razor

    @foreach (var tem in Model) { <text> time.push("@tem.CreateTime.ToString("G")&q ...

  3. Stopwatch 计时器类

    C#_Stopwatch 类   命名空间:System.Diagnostics Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量多个时间间隔的总运行时间.在典型的 Stopwatc ...

  4. Data Dependency

    https://en.wikipedia.org/wiki/Data_dependency (There’s some misleading expression on the flow/data d ...

  5. Python3基础笔记_元组

    # Python3 元组 ''' Python 的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组中只包含一个元素时,需要在元素后面添加逗号,否则括号会被当作运 ...

  6. LUOGU P1342 请柬(最短路)

    传送门 解题思路 又是一道语文题,弄清楚题意之后其实就能想出来了,从1跑一遍最短路,把$dis[n]$加入答案.在建个反图跑一遍最短路,把$dis[n]_$加入最短路就行了.第一遍是去的时候,第二遍是 ...

  7. com.rabbitmq.client.ShutdownSignalException: channel error; protocol method: #method<channel.close>(reply-code=404, reply-text=NOT_FOUND - no queue 'springCloudBus.anonymous.6Xa99MDZTJyHKdPqMyoVEA' in

    项目启动报此异常,解决方式:用root权限登陆rabbitmq,admin处添加vhost

  8. 苹果CMS

    本篇将主要讲解使用过程中普遍遇到的“问题”,这些问题并非是BUG,通常是需要我们自己去注意的一些点.(会结合用户反馈持续补充)http://www.maccms.com/doc/v10/faq.htm ...

  9. 密码学笔记(4)——RSA的其他攻击

    上一篇详细分析了几种分解因子的算法,这是攻击RSA密码最为明显的算法,这一篇中我们考虑是否有不用分解模数n就可以解密RSA的密文的方法,这是因为前面也提到,当n比较大的时候进行分解成素数的乘积是非常困 ...

  10. myeclipse 无法部署项目到jboss服务器 部署不上去

    关于myeclipse部署项目到jboss点击add deployments没有反应的问题,如图 此处点击右键,选择add deployments没有反应,原因是默认的web-root folder为 ...