深入了解JavaScript中正则表达式的使用

目录
  • 一、什么是正则表达式
    • 1、正则表达式特点
    • 2、正则表达式的使用
  • 二、正则表达式中的特殊字符
    • 1、正则表达式的组成
    • 2、边界符
    • 3、字符类
    • 4、 量词符
    • 5、括号总结
    • 6、预定义类
  • 三、String类中的方法
    • 1、match()方法
    • 2、search()方法
    • 3、split()方法
    • 4、replace()方法

一、什么是正则表达式

是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。

正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。

1、正则表达式特点

正则表达式的灵活性。

逻辑性和功能性非常强。

可以迅速地用极简单的方式达到字符串的复杂控制。

2、正则表达式的使用

1、创建正则表达式

通常有两种方式可以创建。

1）通过调用 RegExp 对象的构造函数创建

var 变量名 = new RegExp(/表达式/);

2）通过字面量创建

 var 变量名 = /表达式/;

// 注释中间放表达式就是正则字面量

2、测试正则表达式

test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。

regexObj.test(str)

其中：

regexObj —写的正则表达式

str —要测试的文本

意即检测str文本是否符合写的正则表达式规范。

例如：

给定一个正则表达式var rg = /123/,判断我们输入的字符串是否符合规则。

var str = '123'
var reg1 = new RegExp(/123/);
var reg2 = /abc/;
console.log(reg1.test(str)) ;
console.log(reg2.test(str)) ;

打印结果为;

二、正则表达式中的特殊字符

1、正则表达式的组成

一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。

2、边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。

边界符 说明
^ 表示匹配行首的文本
$ 表示匹配行尾的文本

如果 ^ 和 $ 在一起，表示必须是精确匹配。

3、字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

1、[]方括号类

/[abc]/.test('andy')     // true

后面的字符串只要包含abc中任意一个字符，都返回true。

2、[-]方括号内部 范围符-

/^[a-z]$/.test(c')     // true

方括号内部加上 - 表示范围，这里表示 a 到 z 26个英文字母都可以。

3. [^] 方括号内部 取反符^

  /[^abc]/.test('andy')     // false

方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。

注意和边界符 ^ 区别，边界符写到方括号外面。

4. 字符组合

/[a-z1-9]/.test('andy')     // true

方括号内部可以使用字符组合，这里表示包含 a 到 z 的26个英文字母和 1 到 9 的数字都可以。

4、 量词符

量词符用来设定某个模式出现的次数。

量词 说明
* 重复零次或者更多次
+ 重复一次或者更多次
？ 重复0次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次 
var reg = /^a*$/;        // * 相当于>=0，可以出现0次或很多次
var reg = /^a+$/;        // + 相当于>=1，可以出现1次或很多次
var reg = /^a?$/;        // ? 相当于1||0，可以出现0次或1次
var reg = /^a{3}$/;      // {3}就是重复a字符3次
var reg = /^a{3,}$/;    // {3,}就是重复a字符 大于等于3次
var reg = /^a{3,16}$/;  // {3,16}就是重复a字符 大于等于3次 小于等于16次

比如现在做一个用户名验证的案例，如果用户名输入合法，则提示信息为：用户名合法，颜色为绿色；如果用户名输入不合法，则提示信息为：用户名不合法，并且颜色为绿色。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.js"></script>
    <style>
        .success{
            color:green;
        }
        .wrong{
            color:red;
        }
    </style>
</head>
<body>
    <label for="">用户名：
        <input type="text" class="uname"><span></span>
    </label>
    <script>
       $(function(){
        var reg = /^[a-zA-Z0-9_-]{6,16}$/;
        $('.uname').bind('blur',function(){
            let str = $(this).val();
            if($('input').val === null){
                $('span').removeClass();
            }
            if(reg.test(str)){
                if($('span').hasClass('wrong'))
               $('span').removeClass()
                $('span').html('输入格式正确');
                $('span').addClass('success')
            }else{
                $('span').html('输入格式错误');
                $('span').addClass('wrong')
            }
        })
       })

    </script>
</body>
</html>

显示效果为：

5、括号总结

大括号 量词符. 里面表示重复次数

中括号 字符集合。匹配方括号中的任意字符.

小括号 表示优先级

6、预定义类

预定义类指的是某些常见模式的简写方式。

三、String类中的方法

1、match()方法

match()方法：根据正则匹配出所有符合要求的内容匹配成功后将其保存到数组中，匹配失败则返回false。

例如：

var str = "It's is the shorthand of it is";
var reg1 = /it/gi;
str.match(reg1);    // 匹配结果：(2) ["It", "it"]
var reg2 = /^it/gi;
str.match(reg2);    // 匹配结果：["It"]
var reg3 = /s/gi;
str.match(reg3);    // 匹配结果：(4) ["s", "s", "s", "s"]
var reg4 = /s$/gi;
str.match(reg4);    // 匹配结果：["s"]

2、search()方法

search()方法：search()方法可以返回指定模式的子串在字符串首次出现的位置，相对于indexOf()方法来说功能更强大。

例如：

var str = '123*abc.456';
console.log(str.search('.*'));      	// 输出结果：0
console.log(str.search(/[\.\*]/));   	// 输出结果：3

3、split()方法

split()方法：split()方法用于根据指定的分隔符将一个字符串分割成字符串数组，其分割后的字符串数组中不包括分隔符。

例如：

按照字符串中的“@”和“.”两种分隔符进行分割。

var str = 'test@123.com';
var reg = /[@\.]/;
var split_res = str.split(reg);
console.log(split_res);    // 输出结果：(3) ["test", "123", "com"]

正则匹配方式分割字符串时，还可以指定字符串分割的次数。

var str = 'We are a family';
var reg = /\s/;
var split_res = str.split(reg, 2);
console.log(split_res);    // 输出结果：(2) ["We", "are"]

4、replace()方法

replace()方法：replace()方法用于替换字符串，用来操作的参数可以是一个字符串或正则表达式。

例如：写一个查找并替换敏感词的案例（过滤汉字和‘bad'这个单词）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="display:flex">
    <div>
        <p>过滤前的内容</p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button id = 'btn'>过滤</button>
    </div>
    <div>
        <p>过滤后的内容</p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
    <script>
        var text = document.querySelectorAll('textarea');
        console.log(text);
        var btn = document.querySelector('button');
        btn.onclick = function() {
            text[1].value = text[0].value.replace(/(bad)|[\u4e00-\u9fa5]/gi, '*');
        }
    </script>
</body>
</html>

运行效果为： 

以上就是深入了解JavaScript中正则表达式的使用的详细内容，更多关于JavaScript正则表达式的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS正则表达式常见用法实例详解

    本文实例讲述了JS正则表达式常见用法.分享给大家供大家参考,具体如下: 前言:正则表达式(regular expression)反反复复学了多次,学了又忘,忘了又学,这次打算把基本的东西都整理出来,加强记忆,也方便下次查询. 学习正则表达式之前首先需要掌握记忆这些基本概念: 1.元字符:(.,\w,\W,\d,\D,\s,/S,^,$,) 字符 含义 . 匹配除了换行符以外的任意字符. \s 代表任意空白符(换行符,制表符,空格) \S 匹配任意非空字符串 \b 匹配单词边界,匹配单词的开头和结

  • javascript中正则表达式语法详解

    好久都没有写博客了,主要是太懒了,尤其是在阳春三月,风和日丽的日子,太阳暖暖的照在身上,真想美美的睡上一觉.就导致了这篇博客拖到现在才开始动笔,javascript的正则这一块也不是什么新的东西,主要是以前本人一遇到写正则的需求就开始头大,头疼,网上剽窃,东拼西凑,反正就是各种不适应,所以我打算系统的把正则表达式看一遍,一来是自己有所提升,这一块知识点的查漏补缺,二来是给大家分享一下.好了,下面我们直接进入主题: 正则是匹配字符串特定模式的一种表达式,官方是这样说的,但我的理解不外乎就是匹配字符

  • js常用正则表达式集锦

    具体代码如下所示: <script type="text/javascript"> function validate(){ var reg = new RegExp("^[0-9]*$"); var obj = document.getElementById("name"); if(!reg.test(obj.value)){ alert("请输入数字!"); } if(!/^[0-9]*$/.test(obj.

  • JS正则表达式 整合 (值得收藏)

    url的正则表达式:包括IP,域名(domain),ftp,二级域名,域名中的文件,域名加上端口!用户名等等信息 function IsURL(str_url) { var strRegex = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@ "(([0-9]{1,3}.

  • javascript中10个正则表达式使用介绍基础篇

    在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace(). search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置. replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 1.匹配模式 正则表达式查找与模式匹配的字符串部分 在JavaScript中,它们是在正斜杠之间//或使用new RegExp() 例如: var str = "Visi

  • JavaScript 正则表达式详解

    目录 1. 正则表达式创建 2. 使用模式 2.1 使用简单模式 2.2 使用特殊字符 3. 应用 3.1 切分字符串 3.2 分组 3.3 贪婪匹配 3.4 正则表达式标志 3.5 test() 方法 4. 常用正则(参考) 总结 1. 正则表达式创建 JavaScript 有两种方式创建正则表达式: 第一种:直接通过/正则表达式/写出来 第二种:通过new RegExp('正则表达式')创建一个RegExp对象 const re1 = /ABC\-001/; const re2 = new

  • 浅谈Javascript常用正则表达式应用

    模式修饰符的可选参数 i: 忽略大小写 g: 全局匹配 m: 多行匹配 /hello/: 两个反斜杠是正则表达式的字面量表示法 两个测试方法 test const test = new RegExp('hello world', 'ig'); console.log(test.test('hello world')); // true exec 返回的是数组,有就返回数组的值,没有返回为null const test = new RegExp('hello world', 'ig'); cons

  • Javascript中正则表达式的使用及基本语法

    前面的话 正则表达式在人们的印象中可能是一堆无法理解的字符,但就是这些符号却实现了字符串的高效操作.通常的情况是,问题本身并不复杂,但没有正则表达式就成了大问题.javascript中的正则表达式作为相当重要的知识,本文将介绍正则表达式的基础语法 定义 正则表达式(Regular Expression)是一门简单语言的语法规范,是强大.便捷.高效的文本处理工具,它应用在一些方法中,对字符串中的信息实现查找.替换和提取操作 javascript中的正则表达式用RegExp对象表示,有两种写法:一种

  • JavaScript中正则表达式判断匹配规则及常用方法

    字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在. 正则表达式是一种用来匹配字符串的强有力的武器.它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它"匹配"了. \d可以匹配一个数字                 '00\d'可以匹配'007' ,'\d\d\d'可以匹配'010' \w可以匹配一个字母或数字      '\w\w'可以匹配'js' \s可以匹配一个空格(也包括Tab等空白符) \DWS都是表示匹配与

  • JavaScript中正则表达式使数字、中文或指定字符高亮显示

    <span id="span_id">span2314的23文本213</span> var htmlobj = txt.replace(/(\d+)/img, "<span style='background:red;'>$&</span>"); //var htmlobj = txt.replace(/([+\-]?[0-9]+(\.[0-9]+)?)/g, "<span style='ba

  • JavaScript中正则表达式的实际应用详解

    实际工作中,JavaScript正则表达式还是经常用到的.所以这部分的知识是非常重要的. 一.基础语法: 第一种:字面量语法 var expression=/pattern/flags; 第二种:RegExp构造函数语法 var pattern = /\w/gi; //字面量语法 var pattern = new RegExp('\\w', 'gi');//构造函数语法,这两者是等价的 这里有个注意点就是:如果正则表达式是动态的话,只能选择第二种. 其中的flags有3个标志 g:表示全局模式

  • 深入了解JavaScript中正则表达式的使用

    深入了解JavaScript中正则表达式的使用

    目录 一.什么是正则表达式 1.正则表达式特点 2.正则表达式的使用 二.正则表达式中的特殊字符 1.正则表达式的组成 2.边界符 3.字符类 4. 量词符 5.括号总结 6.预定义类 三.String类中的方法 1.match()方法 2.search()方法 3.split()方法 4.replace()方法 一.什么是正则表达式 是用于匹配字符串中字符组合的模式.在 JavaScript中,正则表达式也是对象. 正则表通常被用来检索.替换那些符合某个模式(规则)的文本,例如验证表单:用户名

  • JavaScript中正则表达式的概念与应用

    JavaScript中正则表达式的概念与应用

    今天和大家分享一些关于正则表达式的知识和在javascript中的应用.正则表达式简单却又不简单,比如以前我的老师给我们讲的时候就说这个东西入门的话二三十分钟就精通了,一旦没有入门那就可几天都补不回来.于是当初就很认真的学习并研究了它.没想到正则表达式不仅代码简洁,而且在实际的操作中为前端工程师们省事了不少.总所周知,用户在浏览页面的时候,唯一和数据打交道的就是表单了,关于表单的验证,其实有很多中方法,接下来,我就会给大家分享两种,一种是普通繁琐的方法,一种是正则表达式,看看它到底能够给表单带来

  • Javascript中正则表达式的应用详解

    目录 string search replace match: RegExp 总结 正则表达式 在前端中的应用也是比较常见的,我们在有时候也需要 用js 对某些字符串进行查找\捕获 或者 替换. js 中正则表达式 一般应用在string类型和 RegExp 两种类型中. string search search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置. 'Hello World!'.search(/world/i); // 6 返回匹

  • 简述JavaScript中正则表达式的使用方法

    简述JavaScript中正则表达式的使用方法

    正则表达式是一个对象,它描述了字符模式. JavaScript的RegExp类表示正则表达式和字符串和正则表达式定义,使用正则表达式来进行强大的模式匹配和搜索和替换文本功能的方法. 语法: 正则表达式可以用RegExp( ) 构造这样的定义: var pattern = new RegExp(pattern, attributes); or simply var pattern = /pattern/attributes; 这里是参数的说明: pattern: 一个字符串,指定正则表达式或其他正

  • 调试JavaScript中正则表达式中遇到的问题

    调试JavaScript中正则表达式中遇到的问题

    关于正则表达式中字符串测试分问题,我们一般有test()和exec()两种方法,关于这两种方法的区别我这里就不加详细阐述了,主要就是test()返回布尔值,exec()返回匹配到的字符数组,但是今天我遇到一个问题, 程序非常简单,但是里面的问题让我很想不通,在网上找答案也没有找到(个人比较菜). 复制代码 代码如下: var pattern=new RegExp("match","ig"); alert(pattern.test("Match")

随机推荐