1. 小括号在正则中:

1.1 小括号:表示分组

1.2 分组之后,,每个组都有一个序号,从左到右,依次为1,2,3.......;可以使用 RegExp.$1,RegExp.$2,RegExp.$3分别获取匹配后的各组的结果

     <script>
// 小括号: 对匹配进行分组
// 分组之后, 每个组都有一个序号, 从左到右 依次为1, 2.....
var str = 'abca';
// var re = /(a)(b)ca/;
var re = /(a)(b)c\1/; // 正则表达式同 /(a)(b)ca/ ;
console.log(str.match(re));
//引用分组: \+组序号 引用子组的内容
console.log(RegExp.$1); // 获取第一个子组的匹配内容 ,结果为 a
console.log(RegExp.$2); // 获取第一个子组的匹配内容 结果为 b
</script>

2. 中括号[]:中括号里面的内容,作为一个整体,提配一个字符或者位置

2.1

     <script>
// 中括号[]: 中括号里面的内容 是作为一个整体 匹配一个字符或者位置
var str = 'a%c';
var re = /abc/;
console.log(re.test(str)); //false
var re = /a[bc]c/;
console.log(re.test(str)); //false
var re = /a[a-zA-Z0-9]c/;
console.log(re.test(str)); //false
//^:脱字符, 用在中括号中 表示非, 用在中括号外面 表示 以....开头
var re = /a[^a-zA-Z0-9]c/;
console.log(re.test(str)); //true
</script>

2.2

  <script>
var regex1 = /a[123]b/;
var regex2 = /a[123]b/g;
var string = "a0b a1b a2b a3b a4b";
console.log(string.match(regex1)); // ["a1b"]
console.log(string.match(regex2)); // ["a1b", "a2b", "a3b"]
</script>

3. 贪婪与惰性匹配

3.1 贪婪匹配

     <script>
// 贪婪匹配,匹配全局
var regex = /\d{2,5}/g; //全局匹配2个到5个数字
var string = "123 1234 12345 123456";
console.log(string.match(regex)); // ["123", "1234", "12345", "12345"]
</script>

3.2 惰性匹配:在正则表达式里加一个 “?”号

 <script>
//?--> 懒惰,能匹配到2个, 我就不会去匹配5个
var regex = /\d{2,5}?/g; // 全局懒惰匹配,匹配2个到5个数字
var string = "1231234 123 451 23456";
console.log(string.match(regex)); //["12","31","23","12","45","23","45"]
</script>

4.分支:

4.1

  <script>
// \b: 边界( 空格 )
// 分析:
// 1,先分析一个字符串的 所有位置上的 字符组成的可能性
// 2,再分析 整体组合规则, 一般在这个时候, 碰到最多的情况就是分组
// 3,再思考每个分支的具体条件 var regex = /#([0-9a-fA-F]{6}\b|[0-9a-fA-F]{3}\b)/g;
var string = "#ffbbad #Fc01DF #FFF #ffE #f38a 222 33355462";
console.log(string.match(regex)); //["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]
</script>

4.2

 <script>
var regex = /nice|good/;
var regex1 = /nice|good/g;
var string = "idea good idea, nice try.";
console.log(string.match(regex)); // ["good", index: 5, input: "idea good idea, nice try."]
console.log(string.match(regex1)); // ["good", "nice"] var regex3 = /good|goodbye/g;
var string = "goodbye";
console.log(string.match(regex3)); // ["good"] var regex4 = /goodbye|good/;
var regex5 = /good|goodbye/;
//因为goodbye包含good, 如果想匹配goodbye, 需要把goodbye写在左边
var string = "goodbye";
console.log(string.match(regex4)); //["goodbye", index: 0, input: "goodbye"]
console.log(string.match(regex5)); //["good", index: 0, input: "goodbye"]
</script>

5. 敏感词过滤:

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function() {
var aT = document.querySelectorAll("textarea");
var oBtn = document.querySelector("input");
oBtn.onclick = function() {
//| 叫做分支
var re = /Sb|你妹的|靠/ig;
// repalce 第一个参数 代表要匹配的正则表达式
// replace 第二个参数 function
aT[1].value = aT[0].value.replace(re, function(s, s1, s2) {
// replace()的function(s,s1,s2)中有三个参数,第一个是传入的待提换的字符串s,第二个是该字符串在整体字符串中的位置s1,第三个是整个字符串s2
var temp = "";
for (var i = 0; i < s.length; i++) {
temp += "*";
}
return temp;
});
}
}
</script>
</head> <body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
<input type="button" value="替换">
<br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
</body> </html>

运行结果:

js 正则函数初级之二的更多相关文章

  1. js 正则函数初级

    1.test :正则匹配字符串,如果成功则返回true,若果失败则返回false 格式:/正则表达式/.test(字符串) 默认吗匹配规则,区分大小写:如果不区分大小写,则加修饰符 i 例子: < ...

  2. node.js的初级使用

    node.js的初级使用 作为一个全栈开发员怎么能不会node.js了?至少得会用node搭载环境吧!话不多说直接开干! 一.下载与安装: 官网:http://nodejs.cn/ 中文文档:http ...

  3. 【three.js详解之二】渲染器篇

    [three.js详解之二]渲染器篇   本篇文章将详细讲解three.js中渲染器(renderer)的设置方法. three.js文档中渲染器的分支如下: Renderers CanvasRend ...

  4. js算法集合(二) javascript实现斐波那契数列 (兔子数列)

    js算法集合(二)  斐波那契数列 ★ 上一次我跟大家分享一下做水仙花数的算法的思路,并对其扩展到自幂数的算法,这次,我们来对斐波那契数列进行研究,来加深对循环的理解.     Javascript实 ...

  5. jquery.qrcode.min.js(支持中文转化二维码)

    详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前 ...

  6. require.js实现js模块化编程(二):RequireJS Optimizer

    require.js实现js模块化编程(二):RequireJS Optimizer 这一节,我们主要学习一下require.js所提供的一个优化工具r.js的用法. 1.认识RequireJS Op ...

  7. php中向前台js中传送一个二维数组

    在php中向前台js中传送一个二维数组,并在前台js接收获取其中值的全过程方法: (1),方法说明:现在后台将数组发送到前台 echo json_encode($result); 然后再在js页面中的 ...

  8. Web前端-Vue.js必备框架(二)

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  9. js的事件机制二

    js的事件机制二 1.给合适的HTML标签添加合适的事件 onchange-----select下拉框 onload-----body标签 单双击-----用户会进行点击动作的HTML元素 鼠标事件 ...

随机推荐

  1. 廖雪峰Java2面向对象编程-2数据封装-1方法

    1.数据封装 一个class可以包含多个field.直接把field用public暴露给外部可能破坏了封装,例如传入不合理的数值(年龄填入1000).如下 public class Person { ...

  2. HTML-CSS font-family:中文字体的英文名称

    本文转自网络,找不到原地址了,在这里保留了作者名. font-family:中文字体的英文名称 ellisontang 发表于2011-07-15 16:33 宋体* SimSun 黑体* SimHe ...

  3. 为什么QQ空间和QQ邮箱都是IE默认打开?

    为什么QQ空间和QQ邮箱都是IE默认打开? 我已经设置成chrome为默认浏览器了 原文转载至:https://zhidao.baidu.com/question/390662851068217285 ...

  4. arcgis for android 读取shp文件中文乱码解决方法

    设置注册表默认字符,即可解决中文乱码问题. 'dbfDefault' 设置方法1.开始--运行,输入”Regedit“,打开注册表.2.如是用的是 10.x 版本 ArcGIS Desktop,定位到 ...

  5. curl 与wget的区别

    CURL与wget的区别 当想要直接通过linux 命令行下载文件,马上就能想到两个工具:wget 和 CURL.它们有很多一样的特征,可以很轻易的完成一些相同的任务,虽然它们有一些相似的特征,但它们 ...

  6. 第31课 老生常谈的两个宏(linux)

    1. Linux内核中常用的两个宏定义 (1)offsetof宏:用于计算TYPE结构体中MEMBER成员的偏移位置 #ifndef offsetof #define offsetof(TYPE, M ...

  7. TensorFlow使用基础-Tensor

    使用 TensorFlow 之前你需要了解关于 TensorFlow 的以下基础知识 :• 使用图 (graphs) 来表示计算 .• 在会话 ( Session ) 中执行图 .• 使用张量 (te ...

  8. idea vs

    F8对应vs的F10F7对应vs的F11F9对应vs的F5  ctrl+.对应vs的alt+回车  shift+alt+s   查找文本的出现位置就用Ctrl+F/Ctrl+Shift+F在当前窗口或 ...

  9. protocol buf安装

    1:下载安装包 $wget https://github.com/google/protobuf/archive/v2.6.1.zip $unzip protobuf-2.6.1.zip $cd pr ...

  10. 使用nginx secure_link指令实现下载防盗链

    一.安装nginx并检查是否已安装模块 [root@img_server ~]# nginx -V #输出nginx所有已安装模块,检查是否有ngx_http_secure_link_module 二 ...