Skip to content

Latest commit

 

History

History
266 lines (240 loc) · 7.6 KB

07正则表达式编程.md

File metadata and controls

266 lines (240 loc) · 7.6 KB

第七章 正则表达式编程

1.相关 API 注意要点

  • String#search
  • String#split
  • String#match
  • String#replace
  • RegExp#test
  • RegExp#exec

1.1 search 和 match 的参数问题

search 和 match，会把字符串转换为正则的

var string = "2017.06.27"; console.log( string.search(".") ); // => 0
//需要修改成下列形式之一 console.log( string.search("\\.") ); console.log( string.search(/\./) ); // => 4
// => 4
console.log( string.match(".") );
// => ["2", index: 0, input: "2017.06.27"] //需要修改成下列形式之一
console.log( string.match("\\.") ); console.log( string.match(/\./) );
// => [".", index: 4, input: "2017.06.27"] // => [".", index: 4, input: "2017.06.27"]
console.log( string.split(".") );
// => ["2017", "06", "27"]
console.log( string.replace(".", "/") );
// => "2017/06.27"

1.2 match 返回结果的格式问题

match 返回结果的格式，与正则对象是否有修饰符 g 有关

var string = "2017.06.27";
var regex1 = /\b(\d+)\b/;
var regex2 = /\b(\d+)\b/g;
console.log( string.match(regex1) );
console.log( string.match(regex2) );
// => ["2017", "2017", index: 0, input: "2017.06.27"]
// => ["2017", "06", "27"]

1.3 exec 比 match 更强大

当正则没有 g 时，使用 match 返回的信息比较多。但是有 g 后，就没有关键的信息 index 了

var string = "2017.06.27";
var regex2 = /\b(\d+)\b/g;
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
// => ["2017", "2017", index: 0, input: "2017.06.27"]
// => 4
// => ["06", "06", index: 5, input: "2017.06.27"]
// => 7
// => ["27", "27", index: 8, input: "2017.06.27"]
// => 10
// => null
// => 0

1.4 修饰符 g，对 exex 和 test 的影响

  • 字符串的四个方法，每次匹配时，都是从 0 开始的，即 lastIndex 属性始终不变
  • 正则实例的两个方法 exec、test，当正则是全局匹配时，每一次匹配完成后，都会修改 lastIndex
var regex = /a/g;
console.log( regex.test("a"), regex.lastIndex );
console.log( regex.test("aba"), regex.lastIndex );
console.log( regex.test("ababc"), regex.lastIndex );
// => true 1
// => true 3
// => false 0

var regex = /a/;
console.log( regex.test("a"), regex.lastIndex );
console.log( regex.test("aba"), regex.lastIndex );
console.log( regex.test("ababc"), regex.lastIndex );
// => true 0
// => true 0
// => true 0

1.5 test 整体匹配时需要使用 ^ 和 $

整体匹配，正则前后需要添加开头和结尾

console.log( /123/.test("a123b") );
// => true
console.log( /^123$/.test("a123b") );
// => false
console.log( /^123$/.test("123") );
// => true

1.6 split 相关注意事项

  • 它可以有第二个参数，表示结果数组的最大长度
  • 正则使用分组时，结果数组中是包含分隔符的
var string = "html,css,javascript";
console.log( string.split(/,/, 2) );
// =>["html", "css"]

var string = "html,css,javascript";
console.log( string.split(/(,)/) );
// =>["html", ",", "css", ",", "javascript"]

1.7 replace 是很强大的

第二个参数是字符串时，如下的字符有特殊的含义

属性 描述
$1,$2,...,$99 匹配第 1-99 个 分组里捕获的文本
$& 匹配到的子串文本
$ ` 匹配到的子串的左边文本
$' 匹配到的子串的右边文本
$$ 美元符号 
var result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2");
console.log(result);
// => "5=2+3"

var result = "2,3,5".replace(/(\d+)/g, "$&$&$&");
console.log(result);
// => "222,333,555"

// = => =2+3=5=
var result = "2+3=5".replace(/=/, "$&$`$&$'$&");
console.log(result);
// => "2+3=2+3=5=5"

1.8 使用构造函数需要注意的问题

不推荐使用

1.9 修饰符

修饰符 描述
g 全局匹配，即找到所有匹配的，单词是 global
i 忽略字母大小写，单词是 ingoreCase
m 多行匹配，只影响 ^ 和 $，二者变成行的概念，即行开头和行结尾。单词是 multiline 
var regex = /\w/img;
console.log( regex.global );
console.log( regex.ignoreCase );
console.log( regex.multiline );
// => true
// => true
// => true

1.10 source 属性

正则本身

var className = "high";
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)"); console.log( regex.source )
// => (^|\s)high(\s|$) 即字符串"(^|\\s)high(\\s|$)"

1.11 构造函数属性

静态属性 描述 简写形式
RegExp.input 最近一次目标字符串 RegExp["$_"]
RegExp.lastMatch 最近一次匹配的文本 RegExp["$&"]
RegExp.lastParen 最近一次捕获的文本 RegExp["$+"]
RegExp.leftContext 目标字符串中lastMatch之前的文本 RegExp["$`"]
RegExp.rightContext 目标字符串中lastMatch之后的文本 RegExp["$'"] 
var regex = /([abc])(\d)/g;
var string = "a1b2c3d4e5";
string.match(regex);
console.log( RegExp.input );
console.log( RegExp["$_"]);
// => "a1b2c3d4e5"
console.log( RegExp.lastMatch );
console.log( RegExp["$&"] );
// => "c3"
console.log( RegExp.lastParen );
console.log( RegExp["$+"] );
// => "3"
console.log( RegExp.leftContext );
console.log( RegExp["$`"] );
// => "a1b2"
console.log( RegExp.rightContext );
console.log( RegExp["$'"] );
  // => "d4e5"

2.真实案例

2.1 使用构造函数生成正则表达式

比如要获取 className 为 "high" 的 dom 元素

<p class="high">1111</p>
<p class="high">2222</p>
<p>3333</p>
<script>
function getElementsByClassName (className) {
    var elements = document.getElementsByTagName("*");
    var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
    var result = [];
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (regex.test(element.className)) {
            result.push(element)
        }
}
    return result;
}
var highs = getElementsByClassName('high');
highs.forEach(function (item) {
    item.style.color = 'red';
});
</script>

2.2 使用字符串保存数据

var utils = {};
  "Boolean|Number|String|Function|Array|Date|RegExp|Object|Error".split("|").forEach(fun
  ction (item) {
      utils["is" + item] = function (obj) {
          return {}.toString.call(obj) == "[object " + item + "]";
}; });
console.log( utils.isArray([1, 2, 3]) );
// => true

2.3 if 语句中使用正则替代 &&

var readyRE = /complete|loaded|interactive/;
function ready (callback) {
    if (readyRE.test(document.readyState) && document.body) {
      callback() 
    }
    else {
        document.addEventListener('DOMContentLoaded', function () {
            callback()
        },false );
    } 
};
ready(function () { alert("加载完毕!")});

2.4 使用强大的 replace

因为 replace 方法比较强大，有时用它根本不是为了替换，只是拿其匹配到的信息来做文章

function compress (source) {
    var keys = {};
    source.replace(/([^=&]+)=([^&]*)/g, function (full, key, value) {
        keys[key] = (keys[key] ? keys[key] + ',' : '') + value;
    });
    var result = [];
    for (var key in keys) {
        result.push(key + '=' + keys[key]);
    }
    return result.join('&');
}
console.log( compress("a=1&b=2&a=3&b=4") );
// => "a=1,3&b=2,4"

参考