javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js正则表达式与元字符

JavaScript中正则表达式与元字符使用教程

作者：半日月

正则表达式(Regular Expression)是用于匹配字符串中字符组合的,通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式这篇文章主要介绍了JavaScript中正则表达式与元字符使用的相关资料,需要的朋友可以参考下

前言

正则表达式是 用于匹配字符串中字符组合的 模式。在js中，正则表达式也是对象；通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

如果看不懂正则表达式的定义没关系，我们主要要搞清楚正则表达式的作用，在js中正则表达式的使用场景包括：验证表单，用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）；过滤掉页面内容中的一些敏感词（替换）；或者从字符串中获取我们想要的特定部分（提取）。

即：表单验证、过滤敏感词、提取特定字符串。

正则表达式的使用

使用正则表达式分为两个步骤，首先定义一个正则表达式对象，然后利用正则表达式检测所需要匹配的数据。首先说明如何定义一个正则表达式，在js中定义正则表达式的语法有两种，方法一：const 变量名 = /表达式/

1. 定义正则表达式

// 定义规则，正则表达式的定义    
    // const 变量名 = /表达式/
    const reg = /oo/

在声明变量时，将字面量用 / / 包裹起来，就定义了一个正则表达式对象，其中变量的值就是正则表达式字面量。

2.判断是否有符合规则的字符串

然后利用正则表达式对象的test()方法来查看正则表达式与指定的字符串是否匹配，返回值为布尔类型数据。语法： regObj.test(被检测的字符串)

<script>
    const Früh = "foobar";
    // 定义规则，正则表达式的定义    
    // const 变量名 = /表达式/
    const reg = /oo/          
    console.log(reg.test(Früh));
      
  </script>

exec()方法

在一个指定的字符串中执行搜索操作，语法：regObj.exec(被检测的字符串)，如果匹配成功返回值为一个数组，否则为null。

元字符

普通字符仅描述他们本身，例如字母、数字，在字符串匹配中只能匹配与他们相同的字符；元字符是一些具有特殊含义的字符，例如当规定用户输入为26个英文字母时，可以通过元字符 [a-z] 来进行匹配。

元字符的分类

边界符（表示位置），量词（表示重复次数），字符类（比如\d 表示0~9）

边界符（位置符）：用来提示字符所处的位置，其中^表示匹配行首的字符，$表示匹配行尾的字符。

如果^ 和 $ 同时出现在一个匹配规则里，那么表示必须精确匹配，即当字符串与正则表达式全等时，匹配结果才为true。

console.log('-------------------');
    console.log(/花/.test('花花'));   // true
    console.log(/花/.test('小花'));   // true
    console.log('-----------------');
    // 边界符 ^ 和 $
    console.log(/^花/.test('花'));    // true
    console.log(/^花/.test('花花'));  // true
    console.log(/^花/.test('小花'));  // flase
    console.log(/^花$/.test('花')); // true   当^和$同时存在时，只有只有这一种情况为true
    console.log(/^花$/.test('花花')); // flase
    console.log(/^花$/.test('小花')); // flase
    console.log(/^花hua$/.test('花a')); // flase
    console.log(/^花hua$/.test('花hua')); // true

量词

设定某个模式出现的次数。*: 重复0次或更多次；+：重复一次或更多次；?：重复0次或一次；{n}：重复n次；{n,}：重复n次或以上，{n，m}：重复n到m次。

在以下案例中对于/^花*$/ 表示的含义是字符串只能为空或者只包含字符“花”，即以“花”开头，以“花”结尾，“花”的数量为0或者更多——所以当字符串包含其他字符时匹配失败。

// 量词 * 
    console.log('------------------------------');
    console.log(/^花$/.test('花')); // 
    console.log(/花$/.test('花')); 
    console.log(/^花/.test('花')); 
    console.log(/花*/.test('花')); 
    console.log(/花*/.test('')); 
    console.log(/^花*$/.test('')); 
    console.log(/^花*$/.test('花花')); // 以上为ture
    console.log(/^花*$/.test('小花花')); // 
    console.log(/^花*$/.test(' 花花')); 
    console.log(/^花*$/.test('花朵')); 
    console.log(/^花*$/.test('花好花')); // 以上为flase
    
// 量词 + 出现次数等于或多于一次 
    console.log('------------------------------');
    console.log(/^花$/.test('花')); // 
    console.log(/花$/.test('花')); 
    console.log(/^花/.test('花')); 
    console.log(/花+/.test('花')); 
    console.log(/花+/.test('')); 
    console.log(/^花+$/.test('')); 
    console.log(/^花+$/.test('花花')); // 
    console.log(/^花+$/.test('小花花')); // 
    console.log(/^花+$/.test(' 花花')); 
    console.log(/^花+$/.test('花朵')); 
    console.log(/^花+$/.test('花好花')); // ttttfftffff

字符类

匹配字符串中是否有某字符集合里面的字符。字符类需要了解起码这三个符号："[]","^","."。

[ ]：匹配字符集合，字符串只要包含[……]里任意一个字符，都返回true。

 // 字符类 [abc] 
    console.log('----------------');
    console.log(/[abc]/.test('a'));
    console.log(/[abc]/.test('ab'));
    console.log(/^[abc]$/.test('a'));
    console.log(/^[abc]$/.test('ab'));
    console.log(/^[abc]{2}$/.test('ab'));  // tttft
    // [a-z] 表示26个字母
    console.log('----------------');
    console.log(/^[a-z]$/.test('j'));
    console.log(/^[a-z]$/.test('J'));
    console.log(/^[0-9]$/.test('J'));
    console.log(/^[0-9]$/.test('2'));
    console.log(/^[0-9a-zA-Z]$/.test('2'));
    console.log(/^[0-9a-zA-Z]$/.test('p'));
    console.log(/^[0-9a-zA-Z]$/.test('P')); // tfftttt

QQ号的正则表达式：  

    /^[1-9][0-9]{4,}$/  // 第一个qq号为10000，qq号的格式是以1开头，最少五位数。

[ ]括号里加上^，表示取反。比如[^a-z] 表示匹配除了小写字母以外的所有字符。“.” 表示匹配除换行符之外的任何单个字符。

简易表单验证

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .right {
      color: green;
    }
    .error {
      color: brown;
    }
  </style>
</head>
<body>
  <input type="text">
  <span>haohaohao</span>

  <script>
    const input = document.querySelector('input')
    const reg = /^[a-zA-Z0-9-_]{6,16}$/
    const span = document.querySelector('span')
    input.addEventListener('blur', function(){
      if(reg.test(input.value)){
        span.className = 'right'
        span.innerHTML = '输入合法'
      } else {
        span.className = 'error'
        span.innerHTML = '输入不合法'
      }
    })
  </script>
</body>
</html>

字符类中的预定义

就是一些常见模式的简写。

日期的格式：

^\d{4}-\d{1,2}-\d{1,2}

修饰符

用来约束正则执行的某些细节，例如是否区分大小写，是否支持多行匹配。

语法： /表达式/修饰符

主要了解修饰符‘i’和修饰符‘g’。i 表示ignore，在正则匹配时不区分大小写；g 表示global，匹配所以满足正则表达式的结果。

replace方法

语法： 字符串.replace(/正则表达式/，'替换的文本')   

字符串按照正则表达式查找，查找到对应子字符串就替换文本。替换常用于过滤敏感词。

console.log('---------修饰符 and replace替换---------------');
    console.log(/^java$/.test('java'));
    console.log(/^java$/.test('JAVA'));
    console.log(/^java$/i.test('JAVA'));
    console.log(/^java$/i.test('Java'));
    const str = 'java是一本编程语言，学完JAVA可以送外卖'
    console.log(str.replace(/java/, '前端'));
    console.log(str.replace(/java/i, '前端'));
    console.log(str.replace(/java/g, '前端'));
    console.log(str.replace(/java/ig, '前端'));
    console.log(str.replace(/java|JAVA/g, '前端'));

以上案例中，最后一个 |  表示 或 ，等同于 i 。

屏蔽敏感词案例

注意当使用逻辑或"|"的时候，以及正则表达式内容时候，不要加空格，空格也会作为字符参与匹配。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <textarea name="" id=""></textarea>
  <button>发布</button>
  <div></div>

  <script>
    const text = document.querySelector('textarea')
    const btn = document.querySelector('button')
    const div = document.querySelector('div')
    btn.addEventListener('click', function(){
      
      div.innerHTML = text.value.replace(/激情|麻痹|美目/g, '**')
      text.value = ''
    })
  </script>

</body>
</html>

总结

到此这篇关于JavaScript中正则表达式与元字符使用的文章就介绍到这了,更多相关js正则表达式与元字符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文