JS高级面向对象(五)-正则表达式

五，正则表达式

正则表达式的作用：

1. 在输入框进行匹配字符
2. 替换字符
3. 提取字符

1，创建正则表达式

1. 利用 RegExp对象来创建正则表达式

   var re = new RegExp(/123/);
   console.log(re);
   console.log(typeof re);
   

2. 利用字面量创建正则表达式

   var re = /123/;
   

2，测试字符

• 利用 reObject.test() 来测试字符是否满足条件

  var re = /123/;
  console.log(re.test('123')); // true	只要包含123的字符返回都是true
  console.log(re.test('12')); // false
  console.log(re.test(1234)); // true
  

3，原字符类

var re1 = /^123$/			// 内容必须是123
var re2 = /[abc]/			// 只要包含a或b或c都返回true
var re2 = /^[abc]$/			// 只有abc三者中的一个才为true
var re2 = /^[a-z]$/			// 只要是26个英文中任何一个就true
var re2 = /^[a-zA-Z]$/		// 只要是26个英文中任何一个就true(不分大小写)
var re2 = /^[a-z0-9_-]$/	// 用户名标准
var re2 = /^[^a-z0-9_-]$/	// []里面的^是取反的意思，不能包含[]里面的内容

4，量词符

• * 相当于 >= 0 可以出现 0 次或者很多次

• + 相当于 >= 1 可以出现 1 次或者很多次

• ? 相当于 1 || 0 出现 1 次或 0 次

• {n} 前面字符重复次数等于 n 次

• {n, } 前面字符重复次数大于等于 3

• {n,m} 前面字符重复次数大于等于 n，并小于等于16（注意： n和m之间不能有空格）

• () 表示优先级，例如(123){3} 代表 123 出现的次数必须是3次

• 案例：

  var re = /^[a-zA-Z0-9_-]{6,16}$/    // 输入的值必须是在[]中出现的，并且次数是在6~16次
  

5，正则替换

• 字符串的替代方法

  // 替换replace
  var str = 'green 和 red';
  console.log(str.replace('green', 'yellow'));
  

• re正则表达式字符串替换

  var str = 'red 和 red 在 red';
  var newStr = str.replace(/red/, 'green');
  console.log(newStr);
  

• 正则表达式参数

  1. g ：全局匹配

  2. i ：忽略大小写

  3. gi ：全局匹配 + 忽略大小写

     var text = document.querySelector('textarea');
     var btn = document.querySelector('button');
     var div = document.querySelector('div');
     btn.addEventListener('click', function() {
         div.innerHTML = text.value.replace(/sb/gi, '*')	// 全局都匹配,忽略大小写,把sb替换成**
     })