欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

渡一教育公开课web前端开发JavaScript精英课学习笔记(十九)正则表达式

程序员文章站 2024-03-17 13:29:46
...

正则表达式

转义符号  \ ;多行字符串 ;文本换行符 \n等

<body></body>
<script>
  //多行字符串
  document.body.innerHTML = "\
  <h1>正则表达式</h1>\
  <div>编辑器多行演示</div>\
  ";
  //转义字符 \
  var str = 'abcd\'\n\\\tefg'
  document.write(str);
  console.log(str);
</script>

正则匹配语法

<h1>正则表达式匹配语法</h1>
<script>
  //[xxx]包含表达式中的字符,
  testRegExp('[]使用',
    /[0-9A-z][ab][cd][d]/g, 
    'abcd') 
  //[^xxx]不包含表达式中字符,
  testRegExp('^不包含',
    /[^0-9][ab][cd][d]/g, 
    '1abcdzbdd') 
  //(stra|strb)[0]包含字符串stra或strb加0的字符,
  testRegExp('|包含字符串a或b',
    /(abc|bcd)[0]/g, 
    '1abc0dzbddxabcd0') 
  //元字符 \w相当于[0-z] \W相当于[^\w] 小写代表包含、大写代表不包含,\w字符\d数字\s空白\r回车\n换行\v垂直制表\f分页\t制表\b单词边界 【.】点表示除了\r\n以外的所有字符 [\u0000-\uffff]Unicode编码
  testRegExp('\\w元字符',
    /\w\w/g, 
    '1abc0dzbddxabcd0') 
  //重复次数 n+,n*,n{x},n{x,y},n?,?代表最少匹配(正则默认贪婪匹配,量词加上?变成非贪婪匹配)。
  testRegExp('n*字符重复次数',
    /\w{1,3}?/g,//  /\w{1,3}/g
    'abc') 
    testRegExp('非贪婪匹配1',
    /\w{0,3}?/g,
    'abc') 
    testRegExp('非贪婪匹配2',
    /\w??/g,
    'abc') 
    testRegExp('非贪婪匹配3',
    /\w*?/g,
    'abc') 
  //开头^,结尾$。检验一个字符串首尾是否(都)含有数字
  testRegExp('^开头$结尾',
    /^\d|\d$/gi, ///^\d\w*\d$/gi, 
    'abc123') 

    testRegExp('()表达式',
    /(\w)\1(\w)\2/g, 
    'aaaabbccddddaaeeaaffaaggaa') 

  testRegExp('正向预查或正向断言',
    /abc(?!b)/g,///abc(?=b)
    'abccaaaabcaabcb')
    //输出Unicode
    // for(var i =0x9000; i < 0x90ff;i++){
    //   document.write('\\u' + i.toString(16) + ":" + String.fromCharCode(i) + "<br>");
    // }
  function testRegExp(msg,reg,str){
    var b = reg.test(str);
    var s = str.match(reg);
    console.log(msg,b,s);
  }
</script>

RegExp对象

参考资料 W3CSchool

两种创建方式:使用字面量 /abc/ 或创建对象 new RegExp();

<h1>正则表达式</h1>
<script>
  //字面量 后面 i 忽略大小写。
  // g 属性全局匹配。
  // m 属性多行匹配。
  var reg = /abc/i;
  var str = 'abcd';
  var r = reg.test(str);
  console.log(r);
  //对象方式 可传入字符串或现有的正则表达式。不使用new关键字返回原正则引用,new 返回新对象。
  reg = new RegExp("abce");
  r = reg.test(str);
  console.log(r);
</script>

RegExp对象成员

<h1>正则表达式</h1>
<script>
  var reg = /abc/igm;
  var str = 'abcd';
  var r = reg.test(str);
  console.log(r);
  //正则表达式属性
  console.log(reg.ignoreCase);//是否区分大小写
  console.log(reg.multiline);//是否多行匹配
  console.log(reg.global);//是否全部匹配
  console.log(reg.source);//正则语句
  console.log(reg.lastIndex);//匹配到字符串索引

  reg = /ab/g;
  str = 'ababab';
  //正则表达式方法
  //exec 执行一次匹配,把lastIndex改为下一次开始匹配的位置,g属性为false时 lastIndex 永远是 0.
  console.log(reg.lastIndex,reg.exec(str));
  console.log(reg.lastIndex,reg.exec(str));
  console.log(reg.lastIndex,reg.exec(str));
  console.log(reg.lastIndex,reg.exec(str));
  console.log(reg.lastIndex,reg.exec(str));
  console.log(reg.lastIndex,reg.exec(str));
  console.log(reg.lastIndex,reg.exec(str));

</script>

字符串应用正则表达式

<h1>正则表达式字符串的应用</h1>
<script>
   var reg = /(\w)\1(\w)\2/g;
   var reg1 = /(\w)\1(\w)\2/;
  var str = 'aaaabbccddddaaeeaaffaaggaa';
  //str.match方法,正则参数无g属性返回第一个匹配对象,有g属性返回匹配的数组。
  console.log(str.match(reg));
  console.log(str.match(reg1));
  //str.search方法,返回第一个匹配的索引,没匹配到返回-1。
  console.log(str.search(reg));
  //str.split方法,按正则匹配拆分字符串。但含有子表达式时,将子表达式的值一起返回。所以使用这个方法时,不使用子表达式。
  console.log(str.split(reg));
  //str.replace方法,传入的参数不带g属性时,只能替换第一个匹配的字符,带g属性时才全部替换。
  console.log(str,str.replace(reg,'x'));
  console.log(str,str.replace(reg1,'x'));
  //str.replace方法,替换参数可以使用$引用正则里的子表达式。
  console.log(str,str.replace(reg,'$2$2$1$1'))
  //str.replace方法,替换参数可以使用函数。函数第一个参数代表匹配的内容,第二个参数代表第一个子表达式内容,第三个参数代表第二个子表达式内容,以此类推。
  console.log(str,str.replace(reg,function($,$1,$2){
    console.log($,$1,$2);
    return '|' + $1 + $1 + $2 + $2 + '|'
  }));
  //the-first-name 转成小驼峰式
  console.log('the-first-name','the-first-name'.replace(
    /[-](\w)/g,
    function($,$1){
      return $1.toUpperCase();
  }));

    //添加千分位号
    var a = '100000000000';
    var b = /(?=(\B)(\d{3})+$)/g;
    console.log('添加千分位号',a.replace(b,','));
    //字符串去重
    var a = 'aaaaabbbbbbcccccccdddddddddd';
    var b = /(\w)\1*/g;
    console.log('字符串去重',a.replace(b,'$1'));

</script>