dreamweaver 正则表达式为属性值加上双引号_【阅读整理】正则表达式 - 基础篇

前言

大家学生时代在数学卷子上的填空题，可能会遇到这样的找规律题目，比如最简单的等差数列：

已知数列：1,5,9,13,17…，求该数列的表达式是 ___________ 答案是显而易见的：4*n-3 (n为整数)

我刚接触正则表达式的时候，很自然地想到了这里。

我们构建的正则表达式，比如 /c{2,5}ode/ 很类似于数列的表达式，要去匹配的字符串比如 "code"、"ccode"、"cccode" 很类似于数列中的数字。

所以正则表达式是对目标字符串们的共性，抽象出来的表达！

正则表达式的身影出现在各种开发语言中…这里，我们走入 JavaScript 的正则世界。在开始之前，我给大家分享两个正则的在线工具：

• 可视化正则，且支持可视化效果图片导

Regulex：JavaScript Regular Expression Visualizer​jex.im

• 支持保存与分享正则、输入字符串看匹配情况，还有打怪测试

PHP, PCRE, Python, Golang and JavaScript​regex101.com

Let’s Go!!!

正则匹配的内容

正则匹配的内容有两部分，一个是字符，一个是位置。

字符很好理解，比如 "code"中的c、o；位置呢，指的是相邻字符之间的空隙，比如c和o之间、o和d之间，另外还有特殊的像开始与结束：^和$，只有一个边是字符。

这里画了一张匹配字符和位置的小结：

Demo

匹配字符demo：

• 匹配颜色16进制：这里有横向匹配，使用了量词 {6}、{3}；有纵向匹配，使用了字符组 [0-9A-Fa-f]；有多选分支，使用了管道符|

• 匹配html中的id值-方法1：比如 '<div id="container" class="main"></div>' 要找出 id="container"。 这里在量词后加?是开启了惰性匹配，惰性匹配是尽可能吃得少，而默认的贪婪匹配是尽可能吃得多，试试链接中去掉问号的结果

• 匹配html中的id值-方法2：（条条大路通罗马）这里用排除字符组明确排除双引号之间不能再有双引号

匹配位置demo：

需求：数字的千位分隔符表示，比如输入"12345678"，转为12,345,678。我们会用到str#replace：

var result = "123456789".replace(/.../)/g, ',')
console.log(result);

正则们：

• 数字的千位分割符表示-方法1：这里用了结束位置符$，从数字末尾开始；用了Positive lookahead (?=(d{3}))，找到每3位数字后面的位置；用了Negative lookahead (?!^)，排除,123,456,789这样的情况；

• 数字的千位分割符表示-2：这里用Postive lookbehind (?<=d) 代替了上一个例子中的(?!^)，这里有一个细节是当多个位置放在一起时，看作对这个位置的多个限制条件。
• 数字的千位分割符表示-3：这里用了单词和非单词边界，可以匹配多个数字。

工具：括号

括号除了提高优先级以外，还有一个重要的功能：分组。以便我们能引用它：

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

简单demo：在JavaScript中引用

注意这里的(?:p)是非捕获分组，这样的分组不能被捕获，也不能被引用

//模拟trim方法：在JavaScript中引用分组
function trim(str) {
    return str.replace(/^s*(.*?)s*$/g, "$1");
}
console.log( trim("  foobar   ") );

//将单词首字母大写：在JavaScript中引用分组
function titleize(str) {
    return str.toLowerCase().replace(/(?:^|s)w/g, function(c) {
        return c.toUpperCase();
    });
}
// console.log( titleize('My name is harden') );

简单demo：在正则表达式里引用

保证分割符前后一致

var regex = /d{4}(-|/|.)d{2}1d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false

JavaScript API使用注意事项

一共有6个API：

• str#search：返回首次匹配的位置，未找到返回 -1 ；
• str#split
• str#match：有 g ，返回的是所有匹配的内容；没有 g ，返回，首个匹配结果 + 捕获组数据（没有，返回 null ）+ 匹配结果开始位置 + 搜索的字符串；没有匹配返回 null ；
• str#replace
• regex#test：有匹配返回 true ，没有匹配返回 false ；
• regex#exec：返回 当前匹配结果 + 捕获组数据（没有，返回 null ）+ 匹配结果开始位置 + 搜索的字符串

和正则有关的操作（罗列推荐使用的方法）：

• 验证：regex#test
• 切分：str#split
• 提取（提取括号中内容）：str#match 和 regex#exec 差不多，另外str#replace在参数函数中获取数据也方便；
• 替换：str#replace

注意事项：

• str#search 和 str#match 都支持字符串和正则作参数，在字符串作参数时会自动字符串转正则。遇到元字符要转义：

var string = "2017.06.27";

console.log( string.search(".") );
// => 0
//需要修改成下列形式之一
console.log( string.search(".") );
console.log( string.search(/./) );
// => 4
// => 4

• regex#exec 和 str#match 比较：在没有修饰符g时，使用 str#match 可以获取完整信息，如果有修饰符g时，也想获得完整信息，用一下 regex#exec ：

var string = "2017.06.27";
var regex2 = /b(d+)b/g;
var result;
while ( result = regex2.exec(string) ) {
    console.log( result, 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

结尾

我猜这里的demo们的信息量有一点点爆炸 ，凝聚就是精华！

基础篇包含了： - 匹配内容：匹配字符或者位置（量词、字符组、贪婪&惰性匹配、排除字符组 balabalaba） - 括号 -> 引用 - JavaScrip的正则API们

最后扔两个非常有意思的函数，和这群API中某两个相关：

字符串压缩：str#replace

//str#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"

类型判断：字符串做信息存储，str#split

//类型判断：使用字符串存储信息
var utils = {};
"Boolean|Number|String|Function|Array|Date|RegExp|Object|Error".split("|").forEach(function(item) {
    utils["is" + item] = function(obj) {
        return {}.toString.call(obj) == "[object " + item + "]";
    };
});
console.log( utils.isArray([1, 2, 3]) );
// => true

参考链接

老姚-JS正则表达式完整教程：感谢老姚

入门教程