Skip to content

Latest commit

 

History

History
219 lines (193 loc) · 5.42 KB

03正则表达式括号的作用.md

File metadata and controls

219 lines (193 loc) · 5.42 KB

第三章 正则表达式括号的作用

括号提供了分组，便于我们引用它

  • 在 JavaScript 里引用它
  • 在正则表达式里引用它

1.分组和分支结构

  • 分组：完整的
  • 分支：分支的
// 分组
var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) );
// => ["abab", "ab", "ababab"]


// 分支结构
// I love JavaScript
// I love Regular Expression
var regex = /^I love (JavaScript|Regular Expression)$/;
console.log( regex.test("I love JavaScript") );
console.log( regex.test("I love Regular Expression") );
// => true
// => true

2.分组引用

进行数据提取

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result1 = string.replace(regex, function () {
    return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;
});
console.log(result1);
// => "06/12/2017"

var result2 = string.replace(regex, function (match, year, month, day) {
    return month + "/" + day + "/" + year;
});
console.log(result2);
// => "06/12/2017"

3.反向引用

在正则本身里引用分组。但只能引用之前出现的分组，即反向引用。用 \1 等表示

var regex1 = /\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/;
var string1 = "2017-06-12";
var string2 = "2016-06/12";
console.log( regex1.test(string1) ); // true
// 错误！！！！
console.log( regex1.test(string2) ); // true。

var regex2 = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
console.log( regex2.test(string1) ); // true
console.log( regex2.test(string2) ); // false

3.1 括号嵌套怎么办

匹配对象括号的内容

var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
var string = "1231231233";
console.log( regex.test(string) ); // true
console.log( RegExp.$1 ); // 123
console.log( RegExp.$2 ); // 1
console.log( RegExp.$3 ); // 23
console.log( RegExp.$4 ); // 3

3.2 \10 表示什么呢

\10 是表示第 10 个分组

var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
var string = "123456789# ######"
console.log( regex.test(string) );
// => true

3.3 引用不存在的分组会怎样

正则不会报错，只是匹配 反向引用的字符本身

var regex = /\1\2\3\4\5\6\7\8\9/;
console.log( regex.test("\1\2\3\4\5\6\7\8\9") );
console.log( "\1\2\3\4\5\6\7\8\9".split("") );

3.4 分组后面有量词会怎样

最后一次的匹配

var regex = /(\d)+/;
var string = "12345";
console.log( string.match(regex) );
// => ["12345", "5", index: 0, input: "12345"]
// 分组 (\d) 捕获的数据是 "5"

// 反向引用同理
var regex = /(\d)+ \1/;
console.log( regex.test("12345 1") );
// => false
console.log( regex.test("12345 5") );
// => true

4.非捕获括号

如果只想要括号最原始的功能，但不会引用它。可以使用非捕获括号(?:p)和 (?:p1|p2|p3)

var regex = /(?:ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) );
// => ["abab", "ab", "ababab"]

5.相关案例

5.1 字符串 trim 方法模拟

// 1. 匹配开头和结尾空格
function trim1(str) {
  return str.replace(/^\s+|\s+$/g, '')
}
trim1(' abc ')

// 2. 匹配整个字符串
function trim2(str) {
  return str.replace(/^\s*(.*?)\s*$/, '$1')
}
trim2(' abc ')

5.2 将每个单词的首字母转换为大写

匹配到每个单词

function titleize(str) {
  return str.toLowerCase().replace(/(^|\s)\w/g, function(c) {
    return c.toUpperCase()
  })
}

titleize('my name is epeli')

5.3 驼峰化

正则后面的 ? 的目的，是为了应对 str 尾部的字符可能不是单词字符，比如 str 是 '-moz-transform '

function camelize(str) {
  return str.replace(/[-_\s]+(.)?/g, function(match, c) {
    return c ? c.toUpperCase() : ''
  })
}

camelize('-moz-transform')

5.4 中划线化

驼峰化的逆过程

function dasherize (str) {
    return str.replace(/([A-Z])/g, '-$1').toLowerCase();
}
console.log( dasherize('MozTransform') );
// => "-moz-transform"

5.5 HTML 转义和反转义

function escapeHTML (str) {
    var escapeChars = {
      '<' : 'lt',
      '>' : 'gt',
      '"' : 'quot',
      '&' : 'amp',
      '\'' : '#39'
    };
    return str.replace(new RegExp('[' + Object.keys(escapeChars).join('') +']', 'g'), function (match) {
        return '&' + escapeChars[match] + ';';
    });
}
console.log( escapeHTML('<div>Blah blah blah</div>') );
// => "&lt;div&gt;Blah blah blah&lt;/div&gt";

// 实体字符转换为等值的HTML 
function unescapeHTML (str) {
    var htmlEntities = {
      nbsp: ' ',
      lt: '<',
      gt: '>',
      quot: '"',
      amp: '&',
      apos: '\''
    };
    return str.replace(/\&([^;]+);/g, function (match, key) {
        if (key in htmlEntities) {
            return htmlEntities[key];
        }
        return match;
    });
}
console.log( unescapeHTML('&lt;div&gt;Blah blah blah&lt;/div&gt;') );
// => "<div>Blah blah blah</div>"

5.6 匹配成对标签

// 匹配：<p>laoyao bye bye</p>
// 不匹配：<title>wrong!</p> 

var regex = /<([^>]+)>[\d\D]*<\/\1>/;
var string1 = "<title>regular expression</title>";
var string2 = "<p>laoyao bye bye</p>";
var string3 = "<title>wrong!</p>";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // false

参考