第十八节 JS中的正则表达式
复习字符串操作：
search 查找
substring 获取子字符串
charAt 获取某个字符
split 分割字符串，获取数组
var str = 'abcdefghijk';
alert(str.search('b')); //返回1，表示b在字符串中的位置是1，不存在的字符返回-1
alert(str.substring(2,5)); //包含开头不包含结尾，所以返回cde
alert(str.substring(3)); //返回defghijk
alert(str.charAt(3)); //d
alert(str.split('')); //返回“a,b,c,d,e,f,g,h,i,j,k”
找出字符串中的所有数字
用传统字符串操作完成
//找出str1中的所有数字
var str1 = '12 sfdg-=/*sfgh85gdhj8745';
var arr = [];
var tmp = ''; for (var i = 0; i < str1.length; i++) {
if (str1.charAt(i) >= '0' && str1.charAt(i) <= 9) {
tmp+=str1.charAt(i);
} else {
if (tmp){
arr.push(tmp);
tmp = '';
}
}
}
if (tmp){
arr.push(tmp);
tmp = '';
}
alert(arr); //返回12,85,8745
用正则表达式完成
var str1 = '12 sfdg-=/*sfgh85gdhj8745';
alert(str1.match(/\d+/g)); //返回12,85,8745，其中\d表示实数，g=global(全局、全部)
什么是正则表达式：
什么是正则：其实就是一种规则或模式，比如说邮箱的表示规则是："一串英文、数字和下划线组合@一串英文数字组合.一串英文"
正则表达是也是一种，强大的字符串匹配工具，是一种正常人类很难读懂的文字
RegExp对象
JS风格——new RegExp('a', 'i');
perl风格——/a/i
字符串与正则表达式：
search：字符串搜索
返回出现的位置
忽略大小写：i——ignore
判断浏览器类型
// var re = new RegExp('a', 'i'); //最简单的正则表达式，什么也不表示，就表示一个“a”本身，JS风格的写法，其中i=ignore表示忽略大小写
var re = /a/i; //另一种写法，意义与上句相同，是一种perl风格的写法，其中i=ignore表示忽略大小写
var str = 'abcdef';
alert(str.search(re)); //返回“0”，表示a在字符串的第0位
match：获取匹配的项目
量词：表示个数，即被求项目的个数；
+：表示若干
量词变化：\d、\d\d和\d+
全局匹配：g——global
例子：找出所有数字
//找第一个数字出现的位置，
var str = 'abf ,=-1sdf65';
var re = /\d/g; //其中\d表示数字，g=global，找到全部
alert(str.match(re)); //返回1,6,5 var re1 = /\d+/g; //所以上面不带加号，表示一个数字一个数字获取的，而现在是一串数字一串数字获取的
alert(str.match(re1)); //返回1,65
replace
替换所有匹配
返回替换后的字符串
//replace的使用
var str = 'alghqaerghjcvbagc';
// alert(str.replace('a','0')); //返回0lghqaerghjcvbagc，可见该句只把字符串中的第一个a替换成了0，qita没变 //当我们用正则表达式时：
// var re = /a/;
// alert(str.replace(re, '0')); //返回0lghqaerghjcvbagc，与上面一样 var re = /a/g;
alert(str.replace(re, '0')); //返回0lghq0erghjcvb0gc，此时a全部被替换成0
例子：敏感词过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>敏感词过滤</title>
<script>
window.onload = function () {
var oTxt1 = document.getElementById('txt1');
var oTxt2 = document.getElementById('txt2');
var oBtn = document.getElementById('btn1'); oBtn.onclick = function () {
var re = /a|g|j|d|S/gi; //把agjS作为敏感词过滤掉，g表示全部，i表示忽略大小写，gi或ig不影响 oTxt2.value = oTxt1.value.replace(re, '***');
};
};
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br>
<button id="btn1">过滤</button><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
</body>
</html>
字符串：[]在正则表达式中被称作元字符，具有以下功能
任意字符：
[abc]：表示“或”——任选的意思，即任选一个“[]”内的字母，例子：o[usb]t——ost、obt、out
范围：
[a-z]、[0-9]（相当于\d）例子：id[0-9]——id0、id5
排除：
[^a]（除了a以外的其他字符）例子：o[^0-9]t——oat、o?t、o t（除了数字之外）、[^a-z0-9]（除了英文和数字）
组合：
[a-z0-9A-Z]
实例：采集小说，说白了就是偷小说，在原来网站上打开某个小说，然后查看打开网页的源码，然后把文字复制出来。然后再把文本里面掺杂的HTML标签过滤掉，下面是实现方法
自定义innerText方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>采集网页小说</title>
<script>
window.onload = function () {
var oTxt1 = document.getElementById('txt1');
var oTxt2 = document.getElementById('txt2');
var oBtn = document.getElementById('btn1'); oBtn.onclick = function () {
var re = /<[^<>]+>/g; //<内部除了“<>”外的所有字符+>
oTxt2.value = oTxt1.value.replace(re, '');
};
};
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="100"></textarea><br>
<button id="btn1">过滤</button><br>
<textarea id="txt2" rows="10" cols="100"></textarea>
</body>
</html>
转义字符：
. （点：通配符，表示任意字符）：尽量少用或不用，因为容易出错
\d（数字，即0-9——[0-9]）
\w（英文、数字和下划线——[a-z0-9_]）
\s（空白字符：空格、Tab等）
\D（除了数字——[^0-9]）
\W（除了英文、数字和下划线——[^a-z0-9_]）
\S（除了空白字符：空格、Tab等）
量词：其实就是指某个值出现的次数
常用量词：
{n,m}，至少出现n次，最多m次
{n,} 至少n次
* 任意次，相当于{0,}，不建议使用，经常出错，所以几乎用不到
? 0次或一次，即可有可无，等价于{0,1}
+ 一次或任意次，即至少一次，等价于{1,}
{n} 正好出现n次
例子：查找QQ号（目前QQ号大多是为5-11为，且第一个数字不能为0），则有：[1-9]\d{4,10}
<script>
window.onload = function () {
var oTxt = document.getElementById('txt1');
var oBtn = document.getElementById('btn1'); oBtn.onclick = function () {
var txt = oTxt.value;
var re = /^[1-9]\d{4,10}$/;
if (txt.match(re)) {
alert("这串数字符合QQ号的规则！");
} else {
alert("这串数字不符合QQ号的规则！");
}
};
};
</script>
<body>
<input id="txt1" type="text"/>
<button id="btn1">检查一串数字是否符合QQ号的规则</button>
</body>
再如：固定电话的号码：区号（第一位为0，共3-4为）（区号可有可无）-号码（一般为8为，首位不能为0）-分机号（一般不超过5位，可有可无），则有：(0\d{2,3}-)?[1-9]\d{7}(-\d{1,5})?
常用正则例子：邮箱（一串英文、数字和下划线组合@一串英文数字组合.一串英文）校验——（\w+@[a-z0-9]+\.[a-z]——其中“\.”表示对“.”的转义，因为“.”在正则表达式中有特殊含义）
行首：字符串的开头，在正则表达式中用“^”表示行首
行尾：字符串的结尾，在正则表达式中用“$”表示行尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邮箱校验</title>
<script>
window.onload = function () {
var oTxt = document.getElementById('txt1');
var oBtn = document.getElementById('btn1'); oBtn.onclick = function () {
var re = /^\w+@[a-z0-9]+\.[a-z]+$/i; if (re.test(oTxt.value)) { //正则自带测试匹配的函数 test
alert("是合法邮箱！");
} else {
alert("邮箱不合法！");
}
};
};
//但是test()有一个小问题：只要字符串的部分符合要求，它就返回true，所以我们要把行首和行尾封住，
// 如“/^\w+@[a-z0-9]+\.[a-z]+$/i”，意思就是说，只有和行首和行尾中间的东西匹配成功，才表示匹配成功
</script>
</head>
<body>
<input id="txt1" type="text"/>
<button id="btn1">邮箱校验</button>
</body>
</html>
第十八节 JS中的正则表达式的更多相关文章
- JavaScript -- 时光流逝（六）：js中的正则表达式 -- RegExp 对象
JavaScript -- 知识点回顾篇(六):js中的正则表达式 -- RegExp 对象 1. js正则表达式匹配字符之含义 查找以八进制数 规定的字符. 查找以十六进制数 规定 ...
- JS中应用正则表达式转换大小写
JS中应用正则表达式转换大小写,代码很简单,看代码: 以下首字母大写,其它字母小写 <script type="text/javascript"> function r ...
- 如何在JS中应用正则表达式
背景:在之前的随笔中写过C#中如何使用正则表达式,这篇随笔主要讲如何在js中应用正则表达式 如下代码: $("#zhengze").click(function () { var ...
- JS中给正则表达式加变量
前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下. 一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...
- js中的正则表达式的运用
正则表达式是一个拆分字符串并查询相关信息的过程:是现代开发中很重要的一环.作为一个web开发人员必须牢牢掌握这项技能,才能尽情得在js中驰骋. 1.创建正则表达式: 正则表达式(regular exp ...
- 【js 正则表达式】记录所有在js中使用正则表达式的情况
说实话,对正则表达式有些许的畏惧感,之前的每次只要碰到需要正则表达式去匹配的情况,都会刻意的躲过或者直接从度娘处获取. 此时此刻,感觉到了某一个特定的点去触及她.但笔者对于正则表达式使用上的理解是这样 ...
- js中的正则表达式
一.正则中的汉字 常见的:/[^\x00-\x7F]+?/ /^[\u2E80-\u9FFF]+$/ 过滤汉字即是:string.replace(/^[\u2E80-\u9FFF]+$/g, &quo ...
- js中的正则表达式入门
什么是正则表达式呢? 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个字符串是否含有某种子串.将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等 ...
- 浅谈js中的正则表达式
很多时候多会被正则表达式搞的晕头转向,最近抽出时间对正则表达式进行了系统的学习,整理如下: 正则表达式的创建 两种方法,一种是直接写,由包含在斜杠之间的模式组成:另一种是调用RegExp对象的构造函数 ...
随机推荐
- Promise 用法
Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 Promise的构造函数接收一个参数,是 ...
- ArcGIS JavaScript开发过程中，底图产生拼接缝问题
ArcGIS JS开发过程中,地图产生了拼接缝 上图调用的是天地图,确认原地图服务是没有这种缝隙的. 其他人电脑上测试,发现没有此问题. 纠结了半天,群里问了大神,大神说是浏览器设置了缩放.... 取 ...
- swust oj 237
Calculate Sum-Of-Absolute-Differences 1000(ms) 65535(kb) 131 / 683 给你N个正整数,求两两之差的绝对值之和. 比如有4个数分别为 3, ...
- PDF文件怎么转换成PPT
在日常办公中大家都会发现PDF文件目前是比较常见的一种文件,有的时候大家会需要将PDF转换成PPT为了去更好的演示,毕竟PPT文件在演示方面具有着较好的特点,那如何将PDF文件转换成PPT文件呢,今天 ...
- 20165311 《网络对抗技术》 Kali安装
一.目的要求 下载 安装 网络 共享 软件源 二.主要步骤 从官网下载软件安装包 安装的比较顺利 具体截图就不放上来了 安装结果图: 网络配置和共享文件夹设置 网络配置: 由于我之前安装虚拟机,所以并 ...
- ide phpStorm更换主题
#主题下载地址 http://www.phpstorm-themes.com #更换方式 1.将主题配置保存在 xxx.icls(如果是xml也保存成.icls) 2.打开phpStorm设置(中上方 ...
- Android创建列表并为列表添加数据
在Android开发中经常会用到ListView,也就是列表,而列表的内容需要如何决定呢,很好的方法是使用各种adapter 首先来看看用entries添加列表内容 在布局文件中,创建一个ListVi ...
- 2018-2019-2 网络对抗技术 20165225 Exp5 MSF基础应用
2018-2019-2 网络对抗技术 20165225 Exp5 MSF基础应用 验前准备 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个主动攻 ...
- Java学习-051-Detected both log4j-over-slf4j.jar AND bound slf4j-log4j12.jar on the class path, preempting StackOverflowError
错误信息:Detected both log4j-over-slf4j.jar AND bound slf4j-log4j12.jar on the class path, preempting St ...
- vue-cli 创建项目失败
vue-cli 创建一个vue项目报错 npm code 404. 尝试解决方法都有,我是第3种方法生效 更新npm 重新安装nodejs vue-cli@3.0.1 在创建项目的时候,不能开启其他v ...