博客 (4)

  • 在 vue 实例化之前,jQuery 绑定事件无效

xoyozo 3 年前
2,243

版本:v2.4.1 (2019-11-15) 

    本文目标

    30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你可以在自己的程序或网页里使用它。

    如何使用本教程

    别被下面那些复杂的表达式吓倒,只要跟着我一步一步来,你会发现正则表达式其实并没有想像中的那么困难。当然,如果你看完了这篇教程之后,发现自己明白了很多,却又几乎什么都记不得,那也是很正常的——我认为,没接触过正则表达式的人在看完这篇教程后,能把提到过的语法记住80%以上的可能性为零。这里只是让你明白基本的原理,以后你还需要多练习,多使用,才能熟练掌握正则表达式。

    除了作为入门教程之外,本文还试图成为可以在日常工作中使用的正则表达式语法参考手册。就作者本人的经历来说,这个目标还是完成得不错的——你看,我自己也没能把所有的东西记下来,不是吗?

    清除格式 文本格式约定:专业术语 元字符/语法格式 正则表达式 正则表达式中的一部分(用于分析) 对其进行匹配的源字符串 对正则表达式或其中一部分的说明

    隐藏边注 本文右边有一些注释,主要是用来提供一些相关信息,或者给没有程序员背景的读者解释一些基本概念,通常可以忽略。

    本文介绍的大部分正则语法,在不同的正则表达式引擎中都可以使用,但也有一些会有所差异。本文介绍的是 .Net 下的正则表达式,其它环境下的具体情况可以在读完本文后去参考官方文档,或者查看正则表达式引擎特性对比。

    最重要的是——请给我30分钟,如果你没有使用正则表达式的经验,请不要试图在30内入门——除非你是超人                :)

    正则表达式到底是什么东西?

    在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说,正则表达式就是记录文本规则的代码。

    很可能你使用过Windows/Dos下用于文件查找的通配符(wildcard),也就是*?。如果你想查找某个目录下的所有的Word文档的话,你会搜索*.doc。在这里,*会被解释成任意的字符串。和通配符类似,正则表达式也是用来进行文本匹配的工具,只不过比起通配符,它能更精确地描述你的需求——当然,代价就是更复杂——比如你可以编写一个正则表达式,用来查找所有以0开头,后面跟着2-3个数字,然后是一个连字号“-”,最后是7或8位数字的字符串(像010-123456780376-7654321)。

    字符是计算机软件处理文字时最基本的单位,可能是字母,数字,标点符号,空格,换行符,汉字等等。字符串是0个或更多个字符的序列。文本也就是文字,字符串。说某个字符串匹配某个正则表达式,通常是指这个字符串里有一部分(或几部分分别)能满足表达式给出的条件。

    入门

    学习正则表达式的最好方法是从例子开始,理解例子之后再自己对例子进行修改,实验。下面给出了不少简单的例子,并对它们作了详细的说明。

    假设你在一篇英文小说里查找hi,你可以使用正则表达式hi

    这几乎是最简单的正则表达式了,它可以精确匹配这样的字符串:由两个字符组成,前一个字符是h,后一个是i。通常,处理正则表达式的工具会提供一个忽略大小写的选项,如果选中了这个选项,它可以匹配hi,HI,Hi,hI这四种情况中的任意一种。

    不幸的是,很多单词里包含hi这两个连续的字符,比如him,history,high等等。用hi来查找的话,这里边的hi也会被找出来。如果要精确地查找hi这个单词的话,我们应该使用\bhi\b

    \b是正则表达式规定的一个特殊代码(好吧,某些人叫它元字符,metacharacter),代表着单词的开头或结尾,也就是单词的分界处。虽然通常英文的单词是由空格,标点符号或者换行来分隔的,但是\b并不匹配这些单词分隔字符中的任何一个,它只匹配一个位置

    如果需要更精确的说法,\b匹配这样的位置:它的前一个字符和后一个字符不全是(一个是,一个不是或不存在)\w

    假如你要找的是hi后面不远处跟着一个Lucy,你应该用\bhi\b.*\bLucy\b

    这里,.是另一个元字符,匹配除了换行符以外的任意字符*同样是元字符,不过它代表的不是字符,也不是位置,而是数量——它指定*前边的内容可以连续重复使用任意次以使整个表达式得到匹配。因此,.*连在一起就意味着任意数量的不包含换行的字符。现在\bhi\b.*\bLucy\b的意思就很明显了:先是一个单词hi,然后是任意个任意字符(但不能是换行),最后是Lucy这个单词

    换行符就是'\n',ASCII编码为10(十六进制0x0A)的字符。

    如果同时使用其它元字符,我们就能构造出功能更强大的正则表达式。比如下面这个例子:

    0\d\d-\d\d\d\d\d\d\d\d匹配这样的字符串:以0开头,然后是两个数字,然后是一个连字号“-”,最后是8个数字(也就是中国的电话号码。当然,这个例子只能匹配区号为3位的情形)。

    这里的\d是个新的元字符,匹配一位数字(0,或1,或2,或……)-不是元字符,只匹配它本身——连字符(或者减号,或者中横线,或者随你怎么称呼它)。

    为了避免那么多烦人的重复,我们也可以这样写这个表达式:0\d{2}-\d{8}。这里\d后面的{2}({8})的意思是前面\d必须连续重复匹配2次(8次)

    测试正则表达式

    如果你不觉得正则表达式很难读写的话,要么你是一个天才,要么,你不是地球人。正则表达式的语法很令人头疼,即使对经常使用它的人来说也是如此。由于难于读写,容易出错,所以找一种工具对正则表达式进行测试是很有必要的。

    不同的环境下正则表达式的一些细节是不相同的,本教程介绍的是微软 .Net Framework 4.x 下正则表达式的行为,所以,我向你推荐我编写的.Net下的工具 Regester。请参考该页面的说明来安装和运行该软件。

    下面是Regester运行时的截图:

    正则表达式测试器运行截图

    你也可以试试这个在线测试工具:Wegester, JavaScript正则表达式测试器。

    元字符

    现在你已经知道几个很有用的元字符了,如\b,.,*,还有\d.正则表达式里还有更多的元字符,比如\s匹配任意的空白符,包括空格,制表符(Tab),换行符,中文全角空格等\w匹配字母或数字或下划线或汉字等

    对中文/汉字的特殊处理是由.Net提供的正则表达式引擎支持的,其它环境下的具体情况请查看相关文档。

    下面来看看更多的例子:

    \ba\w*\b匹配以字母a开头的单词——先是某个单词开始处(\b),然后是字母a,然后是任意数量的字母或数字(\w*),最后是单词结束处(\b)

    \d+匹配1个或更多连续的数字。这里的+是和*类似的元字符,不同的是*匹配重复任意次(可能是0次),而+则匹配重复1次或更多次

    \b\w{6}\b 匹配刚好6个字符的单词

    好吧,现在我们说说正则表达式里的单词是什么意思吧:就是不少于一个的连续的\w。不错,这与学习英文时要背的成千上万个同名的东西的确关系不大                :)

    表1.常用的元字符
    代码说明
    .匹配除换行符以外的任意字符
    \w匹配字母或数字或下划线或汉字
    \s匹配任意的空白符
    \d匹配数字
    \b匹配单词的开始或结束
    ^匹配字符串的开始
    $匹配字符串的结束

    元字符^(和数字6在同一个键位上的符号)和$都匹配一个位置,这和\b有点类似。^匹配你要用来查找的字符串的开头,$匹配结尾。这两个代码在验证输入的内容时非常有用,比如一个网站如果要求你填写的QQ号必须为5位到12位数字时,可以使用:^\d{5,12}$

    这里的{5,12}和前面介绍过的{2}是类似的,只不过{2}匹配只能不多不少重复2次{5,12}则是重复的次数不能少于5次,不能多于12次,否则都不匹配。

    因为使用了^$,所以输入的整个字符串都要用来和\d{5,12}来匹配,也就是说整个输入必须是5到12个数字,因此如果输入的QQ号能匹配这个正则表达式的话,那就符合要求了。

    和忽略大小写的选项类似,有些正则表达式处理工具还有一个处理多行的选项。如果选中了这个选项,^$的意义就变成了匹配行的开始处和结束处

    正则表达式引擎通常会提供一个“测试指定的字符串是否匹配一个正则表达式”的方法,如JavaScript里的RegExp.test()方法或.NET里的Regex.IsMatch()方法。这里的匹配是指是字符串里有没有符合表达式规则的部分。如果不使用^$的话,对于\d{5,12}而言,使用这样的方法就只能保证字符串里包含5到12连续位数字,而不是整个字符串就是5到12位数字。

    字符转义

    如果你想查找元字符本身的话,比如你查找.,或者*,就出现了问题:你没办法指定它们,因为它们会被解释成别的意思。这时你就得使用\来取消这些字符的特殊意义。因此,你应该使用\.\*。当然,要查找\本身,你也得用\\.

    例如:deerchao\.cn匹配deerchao.cnC:\\Windows匹配C:\Windows

    重复

    你已经看过了前面的*,+,{2},{5,12}这几个匹配重复的方式了。下面是正则表达式中所有的限定符(指定数量的代码,例如*,{5,12}等):

    表2.常用的限定符
    代码/语法说明
    *重复零次或更多次
    +重复一次或更多次
    ?重复零次或一次
    {n}重复n次
    {n,}重复n次或更多次
    {n,m}重复n到m次

    下面是一些使用重复的例子:

    Windows\d+匹配Windows后面跟1个或更多数字

    ^\w+匹配一行的第一个单词(或整个字符串的第一个单词,具体匹配哪个意思得看选项设置)

    字符类

    要想查找数字,字母或数字,空白是很简单的,因为已经有了对应这些字符集合的元字符,但是如果你想匹配没有预定义元字符的字符集合(比如元音字母a,e,i,o,u),应该怎么办?

    很简单,你只需要在方括号里列出它们就行了,像[aeiou]就匹配任何一个英文元音字母[.?!]匹配标点符号(.或?或!)

    我们也可以轻松地指定一个字符范围,像[0-9]代表的含意与\d就是完全一致的:一位数字;同理[a-z0-9A-Z_]也完全等同于\w(如果只考虑英文的话)。

    下面是一个更复杂的表达式:\(?0\d{2}[) -]?\d{8}

    这个表达式可以匹配几种格式的电话号码,像(010)88886666,或022-22334455,或02912345678等。我们对它进行一些分析吧:首先是一个转义字符\(,它能出现0次或1次(?),然后是一个0,后面跟着2个数字(\d{2}),然后是)-空格中的一个,它出现1次或不出现(?),最后是8个数字(\d{8})。

    (”和“)”也是元字符,后面的分组节里会提到,所以在这里需要使用转义。

    分枝条件

    不幸的是,刚才那个表达式也能匹配010)12345678(022-87654321这样的“不正确”的格式。要解决这个问题,我们需要用到分枝条件。正则表达式里的分枝条件指的是有几种规则,如果满足其中任意一种规则都应该当成匹配,具体方法是用|把不同的规则分隔开。听不明白?没关系,看例子:

    0\d{2}-\d{8}|0\d{3}-\d{7}这个表达式能匹配两种以连字号分隔的电话号码:一种是三位区号,8位本地号(如010-12345678),一种是4位区号,7位本地号(0376-2233445)

    \(0\d{2}\)[- ]?\d{8}|0\d{2}[- ]?\d{8}这个表达式匹配3位区号的电话号码,其中区号可以用小括号括起来,也可以不用,区号与本地号间可以用连字号或空格间隔,也可以没有间隔。你可以试试用分枝条件把这个表达式扩展成也支持4位区号的。

    \d{5}-\d{4}|\d{5}这个表达式用于匹配美国的邮政编码。美国邮编的规则是5位数字,或者用连字号间隔的9位数字。之所以要给出这个例子是因为它能说明一个问题:使用分枝条件时,要注意各个条件的顺序。如果你把它改成\d{5}|\d{5}-\d{4}的话,那么就只会匹配5位的邮编(以及9位邮编的前5位)。原因是匹配分枝条件时,将会从左到右地测试每个条件,如果满足了某个分枝的话,就不会去再管其它的条件了。

    分组

    我们已经提到了怎么重复单个字符(直接在字符后面加上限定符就行了);但如果想要重复多个字符又该怎么办?你可以用小括号来指定子表达式(也叫做分组),然后你就可以指定这个子表达式的重复次数了,你也可以对子表达式进行其它一些操作(后面会有介绍)。

    (\d{1,3}\.){3}\d{1,3}是一个简单的IP地址匹配表达式。要理解这个表达式,请按下列顺序分析它:\d{1,3}匹配1到3位的数字(\d{1,3}\.){3}匹配三位数字加上一个英文句号(这个整体也就是这个分组)重复3次,最后再加上一个一到三位的数字(\d{1,3})。

    不幸的是,它也将匹配256.300.888.999这种不可能存在的IP地址。如果能使用算术比较的话,或许能简单地解决这个问题,但是正则表达式中并不提供关于数学的任何功能,所以只能使用冗长的分组,选择,字符类来描述一个正确的IP地址:((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)

    理解这个表达式的关键是理解2[0-4]\d|25[0-5]|[01]?\d\d?,这里我就不细说了,你自己应该能分析得出来它的意义。

    IP地址中每个数字都不能大于255. 经常有人问我, 01.02.03.04 这样前面带有0的数字, 是不是正确的IP地址呢? 答案是: 是的, IP 地址里的数字可以包含有前导 0                (leading                zeroes).

    反义

    有时需要查找不属于某个能简单定义的字符类的字符。比如想查找除了数字以外,其它任意字符都行的情况,这时需要用到反义

    表3.常用的反义代码
    代码/语法说明
    \W匹配任意不是字母,数字,下划线,汉字的字符
    \S匹配任意不是空白符的字符
    \D匹配任意非数字的字符
    \B匹配不是单词开头或结束的位置
    [^x]匹配除了x以外的任意字符
    [^aeiou]匹配除了aeiou这几个字母以外的任意字符

    例子:\S+匹配不包含空白符的字符串

    <a[^>]+>匹配用尖括号括起来的以a开头的字符串

    后向引用

    使用小括号指定一个子表达式后,匹配这个子表达式的文本(也就是此分组捕获的内容)可以在表达式或其它程序中作进一步的处理。默认情况下,每个分组会自动拥有一个组号,规则是:从左向右,以分组的左括号为标志,第一个出现的分组的组号为1,第二个为2,以此类推。

    呃……其实,组号分配还不像我刚说得那么简单:

    • 分组0对应整个正则表达式

    • 实际上组号分配过程是要从左向右扫描两遍的:第一遍只给未命名组分配,第二遍只给命名组分配--因此所有命名组的组号都大于未命名的组号

    • 你可以使用(?:exp)这样的语法来剥夺一个分组对组号分配的参与权.

    后向引用用于重复搜索前面某个分组匹配的文本。例如,\1代表分组1匹配的文本。难以理解?请看示例:

    \b(\w+)\b\s+\1\b可以用来匹配重复的单词,像go                go, 或者kitty kitty。这个表达式首先是一个单词,也就是单词开始处和结束处之间的多于一个的字母或数字(\b(\w+)\b),这个单词会被捕获到编号为1的分组中,然后是1个或几个空白符(\s+),最后是分组1中捕获的内容(也就是前面匹配的那个单词)(\1)。

    你也可以自己指定子表达式的组名。要指定一个子表达式的组名,请使用这样的语法:(?<Word>\w+)(或者把尖括号换成'也行:(?'Word'\w+)),这样就把\w+的组名指定为Word了。要反向引用这个分组捕获的内容,你可以使用\k<Word>,所以上一个例子也可以写成这样:\b(?<Word>\w+)\b\s+\k<Word>\b

    使用小括号的时候,还有很多特定用途的语法。下面列出了最常用的一些:

    表4.常用分组语法
    分类代码/语法说明
    捕获(exp)匹配exp,并捕获文本到自动命名的组里
    (?<name>exp)匹配exp,并捕获文本到名称为name的组里,也可以写成(?'name'exp)
    (?:exp)匹配exp,不捕获匹配的文本,也不给此分组分配组号
    零宽断言(?=exp)匹配exp前面的位置
    (?<=exp)匹配exp后面的位置
    (?!exp)匹配后面跟的不是exp的位置
    (?<!exp)匹配前面不是exp的位置
    注释(?#comment)这种类型的分组不对正则表达式的处理产生任何影响,用于提供注释让人阅读

    我们已经讨论了前两种语法。第三个(?:exp)不会改变正则表达式的处理方式,只是这样的组匹配的内容不会像前两种那样被捕获到某个组里面,也不会拥有组号。“我为什么会想要这样做?”——好问题,你觉得为什么呢?

    零宽断言

    接下来的四个用于查找在某些内容(但并不包括这些内容)之前或之后的东西,也就是说它们像\b,^,$那样用于指定一个位置,这个位置应该满足一定的条件(即断言),因此它们也被称为零宽断言。最好还是拿例子来说明吧:

    断言用来声明一个应该为真的事实。正则表达式中只有当断言为真时才会继续进行匹配。

    (?=exp)也叫零宽度正预测先行断言,它断言自身出现的位置的后面能匹配表达式exp。比如\b\w+(?=ing\b),匹配以ing结尾的单词的前面部分(除了ing以外的部分),如查找I'm singing while you're                dancing.时,它会匹配singdanc

    (?<=exp)也叫零宽度正回顾后发断言,它断言自身出现的位置的前面能匹配表达式exp。比如(?<=\bre)\w+\b会匹配以re开头的单词的后半部分(除了re以外的部分),例如在查找reading a book时,它匹配ading

    假如你想要给一个很长的数字中每三位间加一个逗号(当然是从右边加起了),你可以这样查找需要在前面和里面添加逗号的部分:((?<=\d)\d{3})+\b,用它对1234567890进行查找时结果是234567890

    下面这个例子同时使用了这两种断言:(?<=\s)\d+(?=\s)匹配以空白符间隔的数字(再次强调,不包括这些空白符)

    负向零宽断言

    前面我们提到过怎么查找不是某个字符或不在某个字符类里的字符的方法(反义)。但是如果我们只是想要确保某个字符没有出现,但并不想去匹配它时怎么办?例如,如果我们想查找这样的单词--它里面出现了字母q,但是q后面跟的不是字母u,我们可以尝试这样:

    \b\w*q[^u]\w*\b匹配包含后面不是字母u的字母q的单词。但是如果多做测试(或者你思维足够敏锐,直接就观察出来了),你会发现,如果q出现在单词的结尾的话,像Iraq,Benq,这个表达式就会出错。这是因为[^u]总要匹配一个字符,所以如果q是单词的最后一个字符的话,后面的[^u]将会匹配q后面的单词分隔符(可能是空格,或者是句号或其它的什么),后面的\w*\b将会匹配下一个单词,于是\b\w*q[^u]\w*\b就能匹配整个Iraq fighting负向零宽断言能解决这样的问题,因为它只匹配一个位置,并不消费任何字符。现在,我们可以这样来解决这个问题:\b\w*q(?!u)\w*\b

    零宽度负预测先行断言(?!exp)断言此位置的后面不能匹配表达式exp。例如:\d{3}(?!\d)匹配三位数字,而且这三位数字的后面不能是数字\b((?!abc)\w)+\b匹配不包含连续字符串abc的单词

    同理,我们可以用(?<!exp),零宽度负回顾后发断言断言此位置的前面不能匹配表达式exp(?<![a-z])\d{7}匹配前面不是小写字母的七位数字

    一个更复杂的例子:(?<=<(\w+)>).*(?=<\/\1>)匹配不包含属性的简单HTML标签内里的内容(?<=<(\w+)>)指定了这样的前缀被尖括号括起来的单词(比如可能是<b>),然后是.*(任意的字符串),最后是一个后缀(?=<\/\1>)。注意后缀里的\/,它用到了前面提过的字符转义;\1则是一个反向引用,引用的正是捕获的第一组,前面的(\w+)匹配的内容,这样如果前缀实际上是<b>的话,后缀就是</b>了。整个表达式匹配的是<b>和</b>之间的内容(再次提醒,不包括前缀和后缀本身)。

    注释

    小括号的另一种用途是通过语法(?#comment)来包含注释。例如:2[0-4]\d(?#200-249)|25[0-5](?#250-255)|[01]?\d\d?(?#0-199)

    要包含注释的话,最好是启用“忽略模式里的空白符”选项,这样在编写表达式时能任意的添加空格,Tab,换行,而实际使用时这些都将被忽略。启用这个选项后,在#后面到这一行结束的所有文本都将被当成注释忽略掉。例如,我们可以前面的一个表达式写成这样:

          (?<=    # 断言要匹配的文本的前缀
          <(\w+)> # 查找尖括号括起来的内容
                  # (即HTML/XML标签)
          )       # 前缀结束
          .*      # 匹配任意文本
          (?=     # 断言要匹配的文本的后缀
          <\/\1>  # 查找尖括号括起来的内容
                  # 查找尖括号括起来的内容
          )       # 后缀结束

    贪婪与懒惰

    当正则表达式中包含能接受重复的限定符时,通常的行为是(在使整个表达式能得到匹配的前提下)匹配尽可能多的字符。以这个表达式为例:a.*b,它将会匹配最长的以a开始,以b结束的字符串。如果用它来搜索aabab的话,它会匹配整个字符串aabab。这被称为贪婪匹配。

    有时,我们更需要懒惰匹配,也就是匹配尽可能少的字符。前面给出的限定符都可以被转化为懒惰匹配模式,只要在它后面加上一个问号?。这样.*?就意味着匹配任意数量的重复,但是在能使整个匹配成功的前提下使用最少的重复。现在看看懒惰版的例子吧:

    a.*?b匹配最短的,以a开始,以b结束的字符串。如果把它应用于aabab的话,它会匹配aab(第一到第三个字符)ab(第四到第五个字符)

    为什么第一个匹配是aab(第一到第三个字符)而不是ab(第二到第三个字符)?简单地说,因为正则表达式有另一条规则,比懒惰/贪婪规则的优先级更高:最先开始的匹配拥有最高的优先权——The                match                that begins earliest wins。

    表5.懒惰限定符
    代码/语法说明
    *?重复任意次,但尽可能少重复
    +?重复1次或更多次,但尽可能少重复
    ??重复0次或1次,但尽可能少重复
    {n,m}?重复n到m次,但尽可能少重复
    {n,}?重复n次以上,但尽可能少重复

    处理选项

    上面介绍了几个选项如忽略大小写,处理多行等,这些选项能用来改变处理正则表达式的方式。下面是.Net中常用的正则表达式选项:

    表6.常用的处理选项
    名称说明
    IgnoreCase(忽略大小写)匹配时不区分大小写。
    Multiline(多行模式)更改^$的含义,使它们分别在任意一行的行首和行尾匹配,而不仅仅在整个字符串的开头和结尾匹配。(在此模式下,$的精确含意是:匹配\n之前的位置以及字符串结束前的位置.)
    Singleline(单行模式)更改.的含义,使它与每一个字符匹配(包括换行符\n)。
    IgnorePatternWhitespace(忽略空白)忽略表达式中的非转义空白并启用由#标记的注释。
    ExplicitCapture(显式捕获)仅捕获已被显式命名的组。

    在C#中,你可以使用Regex(String, RegexOptions)构造函数来设置正则表达式的处理选项。如:Regex regex = new                Regex(@"\ba\w{6}\b",                RegexOptions.IgnoreCase);

    一个经常被问到的问题是:是不是只能同时使用多行模式和单行模式中的一种?答案是:不是。这两个选项之间没有任何关系,除了它们的名字比较相似(以至于让人感到疑惑)以外。事实上,为了避免混淆,在最新的                    JavaScript                    中,单行模式其实名叫 dotAll,意为点可以匹配所有字符,然而在指定该选项时,用的还是 Singleline 的首字母 s.

    目前(2019/06),只有基于 Webkit/Chromium 的浏览器(如 Chrome, Safari等)才支持 dotAll 选项。

    平衡组/递归匹配

    有时我们需要匹配像( 100 * ( 50 + 15 ) )这样的可嵌套的层次性结构,这时简单地使用\(.+\)则只会匹配到最左边的左括号和最右边的右括号之间的内容(这里我们讨论的是贪婪模式,懒惰模式也有下面的问题)。假如原来的字符串里的左括号和右括号出现的次数不相等,比如( 5 / ( 3 + 2 ) ) ),那我们的匹配结果里两者的个数也不会相等。有没有办法在这样的字符串里匹配到最长的,配对的括号之间的内容呢?

    这里介绍的平衡组语法是由.Net Framework支持的;其它语言/库不一定支持这种功能,或者支持此功能但需要使用不同的语法。

    为了避免(\(把你的大脑彻底搞糊涂,我们还是用尖括号代替圆括号吧。现在我们的问题变成了如何把xx <aa                        <bbb> <bbb> aa> yy这样的字符串里,最长的配对的尖括号内的内容捕获出来?

    这里需要用到以下的语法构造:

    • (?'group') 把捕获的内容命名为group,并压入堆栈(Stack)

    • (?'-group') 从堆栈上弹出最后压入堆栈的名为group的捕获内容,如果堆栈本来为空,则本分组的匹配失败

    • (?(group)yes|no) 如果堆栈上存在以名为group的捕获内容的话,继续匹配yes部分的表达式,否则继续匹配no部分

    • (?!) 零宽负向先行断言,由于没有后缀表达式,试图匹配总是失败

    我们需要做的是每碰到了左括号,就在压入一个"Open",每碰到一个右括号,就弹出一个,到了最后就看看堆栈是否为空--如果不为空那就证明左括号比右括号多,那匹配就应该失败。正则表达式引擎会进行回溯(放弃最前面或最后面的一些字符),尽量使整个表达式得到匹配。

    <                   #最外层的左括号
      [^<>]*            #它后面非括号的内容
      (
          (
            (?'Open'<)  #左括号,压入"Open"
            [^<>]*      #左括号后面的内容
          )+
          (
            (?'-Open'>) #右括号,弹出一个"Open"
            [^<>]*      #右括号后面的内容
          )+
      )*
      (?(Open)(?!))     #最外层的右括号前检查
                        #若还有未弹出的"Open"
                        #则匹配失败
    
    >                #最外层的右括号

    平衡组的一个最常见的应用就是匹配HTML,下面这个例子可以匹配嵌套的<div>标签<div[^>]*>[^<>]*(((?'Open'<div[^>]*>)[^<>]*)+((?'-Open'</div>)[^<>]*)+)*(?(Open)(?!))</div>.

    如果你不是一个程序员(或者你自称程序员但是不知道堆栈是什么东西),你就这样理解上面的三种语法吧:第一个就是在黑板上写一个"group",第二个就是从黑板上擦掉一个"group",第三个就是看黑板上写的还有没有"group",如果有就继续匹配yes部分,否则就匹配no部分。

    还有些什么东西没提到

    上边已经描述了构造正则表达式的大量元素,但是还有很多没有提到的东西。下面是一些未提到的元素的列表,包含语法和简单的说明。你可以在网上找到更详细的参考资料来学习它们--当你需要用到它们的时候。如果你安装了MSDN            Library,你也可以在里面找到.Net下正则表达式详细的文档。这里的介绍很简略,如果你需要更详细的信息,而又没有在电脑上安装MSDN Library,可以查看关于正则表达式语言元素的MSDN在线文档

    表7.尚未详细讨论的语法
    代码/语法说明
    \a报警字符(打印它的效果是电脑嘀一声)
    \b通常是单词分界位置,但如果在字符类里使用代表退格
    \t制表符,Tab
    \r回车
    \v竖向制表符
    \f换页符
    \n换行符
    \eEscape
    \0nnASCII代码中八进制代码为nn的字符
    \xnnASCII代码中十六进制代码为nn的字符
    \unnnnUnicode代码中十六进制代码为nnnn的字符
    \cNASCII控制字符。比如\cC代表Ctrl+C
    \A字符串开头(类似^,但不受处理多行选项的影响)
    \Z字符串结尾或行尾(不受处理多行选项的影响)
    \z字符串结尾(类似$,但不受处理多行选项的影响)
    \G当前搜索的开头
    \p{name}Unicode中命名为name的字符类,例如\p{IsGreek}
    (?>exp)贪婪子表达式
    (?<x>-<y>exp)平衡组
    (?im-nsx:exp)在子表达式exp中改变处理选项
    (?im-nsx)为表达式后面的部分改变处理选项
    (?(exp)yes|no)把exp当作零宽正向先行断言,如果在这个位置能匹配,使用yes作为此组的表达式;否则使用no
    (?(exp)yes)同上,只是使用空表达式作为no
    (?(name)yes|no)如果命名为name的组捕获到了内容,使用yes作为表达式;否则使用no
    (?(name)yes)同上,只是使用空表达式作为no

    联系作者

    好吧,我承认,我骗了你,读到这里你肯定花了不止30分钟。相信我,这是我的错,而不是因为你太笨。我之所以说"30分钟",是为了让你有信心,有耐心继续下去。既然你看到了这里,那证明我的阴谋成功了。被忽悠的感觉很爽吧?

    要投诉我,或者觉得我其实可以忽悠得更高明,或者有关于正则表达式的问题, 可以发邮件到            deerchao#qq#com。如果本文给了你帮助,你可以使用支付宝或微信支付向我打赏。点击本页右上方的“打赏”即可看到支付二维码,可能你得先回到页面最顶端。

    网上的资源及本文参考文献

    更新纪录

    1. 2006-3-27 第一版

    2. 2006-10-12 第二版

      • 修正了几个细节上的错误和不准确的地方

      • 增加了对处理中文时的一些说明

      • 更改了几个术语的翻译(采用了MSDN的翻译方式)

      • 增加了平衡组的介绍

      • 放弃了对The Regulator的介绍,改用Regex Tester

    3. 2007-3-12 V2.1

      • 修正了几个小的错误

      • 增加了对处理选项(RegexOptions)的介绍

    4. 2007-5-28 V2.2

      • 重新组织了对零宽断言的介绍

      • 删除了几个不太合适的示例,添加了几个实用的示例

      • 其它一些微小的更改

    5. 2007-8-3 V2.21

      • 修改了几处文字错误

      • 修改/添加了对$,\b的精确说明

      • 承认了作者是个骗子

      • 给RegexTester添加了Singleline选项的相关功能

    6. 2008-4-13 v2.3

      • 调整了部分章节的次序

      • 修改了页面布局,删除了专门的参考节

      • 针对读者的反馈,调整了部分内容

    7. 2009-4-11 v2.3.1

      • 修改了几处文字错误

      • 添加了一些注释说明

      • 调整了一些措词

    8. 2011-8-17 v2.3.2

      • 更改了工具介绍,换用自行开发的正则表达式测试器

    9. 2013-1-10 v2.3.3

      • 说明包含前导0的IP地址是合法的

    10. 2017-6-6 v2.3.4

      • 更新测试工具

    11. 2017-6-12 v2.3.5

      • 修复分支条件章节下的错误(删除括号后的问号)

    12. 2019-6-28 v2.4

      • 提供在线 Javascript 正则表达式测试工具

      • 提到 Javascript 中的 dotAll 模式

      • 修改作者联系方式

    13. 2019-11-15 v2.4.1

      • 改进在手机浏览器下的页面布局

    d
    转自 deerchao 7 年前
    10,803

    场景:每天带笔记本电脑上班,公司使用固定 IP 上网,家里网络的网段又跟公司不一样。


    方法 1:两个网络环境分别使用有线连接和无线连接(鉴于笔记本无线网卡不支持 5G(802.11ac),或者有其它需求必须都使用有线连接的不适用此方法)。

    方法 2:修改家里路由器的局域网 IP 地址,使其网段与公司相同(虽然仅需要一次修改,但部分路由器不允许修改局域网 IP 地址);

    方法 3:使用第三方软件一键切换(有安全隐患,且可能导致电脑网络设置出现错误);

    方法 4(推荐):设置电脑网络连接同时使用两个 IP,具体方法如下:


    打开“以太网 属性”,双击“Internet 协议版本 4 (TCP/IPv4)”,配置其中一个网络环境的 IP 地址和网关(例如我在公司上网的 IP 是 192.168.1.5,网关是 192.168.1.1)

    image.png

    点击“高级”,在 IP 地址栏添加另一个网络的 IP(如 192.168.31.5),在“默认网关”处添加这个网络的网关(如 192.168.31.1)

    image.png

    这样设置后,不管到公司还是回到家,只要网线一插就能上网,不需要每天更换 IP 地址设置了。

    image.png

    (图中显示了两个网络名称)

    xoyozo 6 年前
    6,874

    原文:http://mathewsanders.com/designing-adaptive-layouts-for-iphone-6-plus/
    翻译:叮当当咚当当小胖妞呀

    从IOS6开始,苹果公司就一直建议我们使用自适应布局,但是迄今为止,我发现大家都在回避这个问题,考虑的最多的仍然是固定布局。

    iPhone 6的上市让人们很难再去逃避自适应布局这个问题,四种屏幕尺寸(如果要支持iPad就要上升到5种)、三种分辨率和转向似乎让着手于自适应布局变得更加简单。

    在文章的最后,你应该能流畅使用 storyboards、 约束(constraints)和 size class特性,这三个是Apple为开发和制作自适应布局提供的Xcode工具。

    所以下载Xcode6,给自己来杯饮料,留上一个小时的时间,让我们开始吧!

    • Storyboards
      • 模拟尺寸
    • 约束
      • 头部和尾部空间
      • 横向空间约束
      • 同等宽度约束
      • 纵横比约束
      • 约束管理
        • 添加约束
        • 检查和编辑现有约束
        • 删除约束
      • 布局问题和冲突
        • 错位视图警告
        • 约束缺失错误
    • Size Classes
      • 宽度和高度特性
      • 我们的目标…
      • 为通用的size class添加约束
      • 为iPhone纵向布局添加约束
      • 为iPhone横向布局添加约束
      • 编辑助手:设备预览
      • 为iPad布局添加约束
    • 使用布局和间隔视图
      • 布局视图样例
      • 间隔视图样例
    • 下一步

    Storyboards

    Xcode中,storyboards可以让你在屏幕上拖动和放置原生对象(例如按钮、图片、文本框和标签)并且定义每个屏幕之间如何连接。

    在Xcode专业术语中,可以看到、摸到、互动的用户界面元素,我们称之为 视图(按钮、图片、文本框、标签等等)。

    包含并管理所有那些视图的屏幕被称为 视图控制器,我倾向于交替使用这些术语。

    当我们在一个storyboard上添加视图控制器的时候,它的纵横比其实跟任何设备都不匹配,事实上,它是一个完美的600pt*600pt的正方形:

    这提醒了我们,storyboard屏幕并不代表特定硬件上的屏幕,而是 任何IOS设备的抽象表现。

    模拟尺寸

    也许你不介意在600pt*600pt的画布上操作,但是在实际大小上操作可能会更有帮助。

    我们可以非常方便的在Xcode里改变视图控制器模拟的尺寸和转向:

    约束

    向你们展示约束的最好方法是实例。

    我们先创建一个简单的包含一个屏幕的storyboard(模拟4英寸iPhone的尺寸),再添加两个相邻的正方形。

    当我们在竖屏中运行app的时候,这两个正方形完全按照我们的布局排列,当我们变成横屏时,它们仍然忠于自己的坐标:

    当我们使用iPhone 6模拟器运行项目的时候,我们可以再一次看到,我们的布局并没有自适应不同的屏幕尺寸,屏幕右边多出了可见的空白区域。

    这是由于没有约束,这些对象仍然会按照我们在storyboard上创建的x,y坐标和面积来定位。

    所以让我们开始添加约束,看看会对它们有些什么影响。

    头部和尾部空间

    我们在蓝色方块前添加10pt的头部空间约束,在红色方块后添加10pt的尾部空间约束。

    当我们运行项目的时候,约束把蓝色方块固定在屏幕左侧,把红色方块固定在右侧。

    横向空间约束

    我们在两个方块之间再添加一个10pt的横向空间约束,就像上一个约束一样,这样会让两个方块之间有一个固定的空间。

    当我们运行项目的时候,会发现一个意料之外的结果:我们所有的约束都满足了,但是为了满足所有约束,其中一个方块被拉伸了。

    这似乎告诉我们这样一件事:除非被告知,否则IOS会尽量让大多数对象都保持“自然”大小。

    同等宽度约束

    我们添加一个同等宽度约束。

    当运行项目的时候,我们可以看到两个方块宽度的增量相同。

    纵横比约束

    最后,对两个方块添加纵横比约束。

    这个约束保证了宽度和高度的比永远是相同的。

    当我们运行app的时候,我们可以看到每个方块的宽度在增加,高度也同时在增加。

    用iPhone 6模拟器运行项目,覆盖我们之前添加过的约束,你可以看到这两个正方形是如何利用可用空间来拉伸的。

    约束管理

    现在你已经看到了我们是如何使用约束的,下面我们来介绍一下具体操作。

    提示:尽量少使用约束

    添加约束的一个要点是试着挑战自己,越少使用约束越好。

    虽然我并不认为添加的约束数量能够很大程度上影响IOS的性能,但是越少的使用约束,你的布局就会越好维护。

    添加约束

    在storyboard中添加约束有三个方法:

    1. 约束弹窗也许最好的方法就是选择一个或多个对象,从其中一个弹窗中添加约束。我认为这是个很好的方法,因为可以看到现有约束的范围。如果有一条约束不可用,可能就意味着你需要两个或更多对象来实施这条约束。
    2. ctrl + 拖动你可以按住ctrl键,同时拖动到一个对象上(可以是相邻对象、父级对象或者是自身),会出现一个浮层告诉你可以被添加的约束有哪些。这是我最喜欢的添加约束的方法,因为你不需要把你的鼠标移动到大老远的底部再回到对象。
    3. 菜单/绑定你也可以选择一个或多个对象,在菜单中点击 editor -> pin来选择约束,这其实是最没有效率的方法,但是如果你发现自己不停的重复添加一种约束,也许为一个或多个选项添加绑定更合理一点。

    检查和编辑现有约束

    检查视图中应用的约束最简单的办法就是选择视图,切换到Size检查面板。

    或者在文档大纲层次面板中切换constant数值。

    无论是哪种方法,选择约束可以让你直接更新它。

    删除约束

    同样的,约束也可以通过高亮+点击删除按钮来删除。

    要删除一个视图的所有约束,或者屏幕中的所有约束,在布局问题弹窗中有一条捷径:

    布局问题和冲突

    当我们在storyboard中添加约束的时候,Xcode总会给出一些关于这些约束的警告或者错误。

    有时候这些问题可以忽略不计,但是更多的时候,它们必须被解决。

    查看约束警告和错误最好在文档大纲面板中,每个视图控制器会有一个红色或者黄色的icon来表示是不是有布局问题:

    错位视图警告

    一个比较常见的警告是错位视图警告,如果约束规定这个视图应该在的地方,和这个视图实际在的地方不匹配,那么这种警告随时会出现。

    当你转换模拟尺寸或者不小心用鼠标移动了一个视图,这些警告也会出现。

    点击一个错位的视图,屏幕上会出现一个虚线框,告诉你约束规定了这个视图应该在的位置。

    如果点击警告,会出现一个带有几个选项的浮层,你可以选择让Xcode更新约束来匹配storyboard上的位置,也可以让Xcode更新框架来移动或者拉伸视图,使它们回到约束规定的位置。

    缺失约束错误

    让我们回到一开始蓝方块和红方块的例子,我们没有添加过一个关于纵向位置的约束,但当我们运行app的时候看起来完全没问题,因为IOS会认为纵向位置就是我们在storyboard上放置的位置,不过为了避免一些意料之外的行为,我们最好还是规定一下。

    在 顶部布局向导添加顶部空间约束可以消除一些说不定道不明的约束和错误。

    Size Classes

    为了在大多数基础布局或者更高级的布局上使用约束,你需要同时使用size classes。

    Size classes是一种能够告诉你物理设备宽度和高度的特性。

    当我们在storyboard的屏幕上添加对象或者约束时,只有设备符合当前的宽高特性,对象才会显现,约束才会被应用。

    这是一个非常有用的方法,它让我们确定了不同设备和转向下布局的变化。

    高度和宽度特性

    使用 紧凑(compact)、 任意(any)和 正常(regular)这三种的组合,可以让我们确定一些范围内的设备布局。

    虽然不能涉及每一个变化(比如不能确定iPhone 6 Plus的竖向模式,也不能让iPad的转向消失),但是大多数的变化都可以确定。

    我们说过,介绍size classes最简单的方法是实例,所以让我们看一个例子。

    我们的目标…

    作为例子,我们做一个Instagram详情页的简单版本,可以适应大屏和转向。

    我们的目标是创建一个布局,它可以机智的适应更大的iPhone 6设备(我说的机智,是指只有照片会放大,其他的元素如头像照片仍然不变),并且当设备横屏的时候,图片和元数据会并肩排列,而不是像竖屏时的上下排列。

    为通用的size class添加约束

    跟之前的例子不同,这次我们不使用模拟尺寸度量,我们使用通用size class的抽象方形布局,这样会使我们记住,为这个size class添加的任何视图和约束,只能是那些添加在任意屏幕尺寸和转向上的视图和约束。

    我们需要用到这些约束:

    除了必要的空间、间隙和纵横比约束,我们还需要让某些对象排列在顶部或者底部。

    现在,在你的storyboard上添加视图和约束吧。做这步的时候,我的storyboard长这样:

    注意,现在我们有了所有转向上所需要的元素,但是我没有费心完成每个转向上的布局,下一步我们才会做!

    为iPhone纵向布局添加约束

    现在,我们把size class切换到 紧凑宽度和 正常高度,这个尺寸特性的组合适用于任何竖屏下的iPhone设备。

    如果要切换size classes,点击storyboard中下方的size class标签,选择你想要看到的宽高组合。

    注意,当你切换size class时,视图控制器的尺寸会更新来显示新的抽象布局。

    最后,你可以重新定位、拉伸视图和添加竖屏上的约束了。这里有一些我添加到竖向布局上的约束:

    这是我做到这步时,我的storyboard的样子:

    在这个阶段,你可以用任何的iPhone模拟器(3.5、4、4.7或者5.5英寸屏幕)来运行你的项目,看看竖屏情况下的布局是否合理,虽然如果转向成横屏时,布局看上去会一团糟。

    注意,我们没有固定图片的宽度,我们只是简单地把图片的左右边缘固定在屏幕两侧。当变为更大的iPhone 6屏幕尺寸时,图片会被拉伸,又因为我们添加了一个固定图片纵横比的约束,所以高度也会同时增加。

    为iPhone横向布局添加约束

    现在切换size class到 任意宽度和 紧凑高度,这种尺寸特性的组合适用于任何横屏下的iPhone设备,并且会为了满足横屏视图下的目标更新布局。

    这次,图片的顶部、左边和底部边缘都被固定在父级视图的边缘。

    这个局部另一个有意思的地方是,在评论标签上添加的尾部空间约束。

    当图片的约束使得图片变大的时候,这个标签上的约束会使得自身变窄。为了适应这种视图下的文本,文本高度需要增加到两行——的确如此!

    下图是我做到这步时storyboard的样子。注意,在文档大纲中,一些约束会稍稍渐隐,这些约束是在竖向视图中我们添加的,它们仍然存在,但是当我们选中当前的宽高特性时,它们不会被应用。

    也要注意,当你转换宽高特性时,storyboard会更新以便显示你为那些特性增加的约束。太棒了!

    现在运行项目,我们会发现当转向改变时,我们有了一个既适用于横屏又适用于竖屏的布局,更棒的是在转向时,会有一个完美的过渡动画。

    我把整个过渡动画放慢,这样你们能看的更加清楚。注意动画中也有层级关系,正由于此,即使在正常布局下视图并没有重叠,我们也需要考虑如何安排视图的层级关系……

    编辑助手:设备预览

    Xcode另外一个很有用的东西:设备预览助手。你不再需要无数次运行项目来检查你的布局是否正确,你只需要使用编辑助手storyboard预览,选择你想要的所有设备和转向就可以了。

    这并不是完美的(比如导航条的颜色在这个例子中缺失了),但是它却是一个很好地选择,它可以让你把你自己的语言切换到双倍长度伪语言,可以在你的storyboard中重复任何文本。

    这是我storyboard上的预览助手,它展示了一个3.5英寸横屏和4英寸竖屏的iPhone,你可以看到我还需要再加工加工来适应更长的标签……-_-

    为iPad布局添加约束

    现在,切换size classes到 正常宽度和 正常高度,这是iPad横屏和竖屏的特性。

    就像之前一样,我们重新定位、拉伸我们的视图。对于iPad布局,我决定使用固定尺寸的图片(所以它不会像在iPhone上那样切换横竖屏时会改变大小),元数据都显示在图片底部。

    下图是我在重新排列视图并添加了约束之后的storyboard:

    到现在为止,我们为某些特别的size class特性添加了约束,但是现在我们要尝试些不同的东西。

    由于iPad上会有多余的空间,我们不要仅仅只是重排视图,让我们来加一点额外的内容。对于这个例子来说,我们再加两张图片(也许是在这张主照片之前和之后拍摄的照片)。

    这是我的storyboard更新之后的样子:

    我原本可以手动输入这些次级图片的宽高,但我没有,取而代之的是我让它们的尺寸变成主图片的某个比例。

    这样做的好处是如果我们决定改变主图片的尺寸,布局的其他部分会自动的计算并且更新次级图片的宽高,而不用我们手动输入。

    这是一张我截的图,我改变了主图片的宽度约束,可以看到其他的部分也随之更新了。

    我没有在iPad模拟器上运行项目并截屏,不过这里有一些横屏和竖屏的效果图:

    使用布局和间隔视图

    Xcode中有些约束我们可以随时运用,但是对于一些些常见的布局,我们需要一点帮助。

    布局视图样例

    要把一个视图的边缘固定在父级视图的边缘,或者把它固定在父级视图的正中心是件很简单的事情,~~但是我没有发现简便的方法,让视图固定在离正中心有一段固定距离的地方。~~感谢Jeff Nouwen指出,在把视图固定在中间后,你可以改变constant值来达到你的期望。

    理论上来说,我们需要的是一个‘ 中心排列导向’,即任何视图都能水平和垂直居中与父级视图中:

    为了实现这个目标,通过现在我们可以使用的约束,我们把我们的视图嵌入一个外层视图(这个外层视图没有背景色,只是为了帮助我们布局而存在),可以把它定位在父级视图的中间。

    通过这个方法,你的约束看起来可能像这样:

    现在我比较喜欢让我的布局层级尽量平。另外一个不使用外层视图的方法,我叫它 布局视图

    使用这种方法,我倾向于在storyboard中添加一个颜色明亮的视图,然后把它的hidden属性设置为true,你仍然可以在storyboard布局中看到它(虽然稍稍渐隐),但是运行模拟器的时候它不会出现。

    现在你在你的视图和布局视图中可以添加 居中排列(align center to center)

    间隔视图样例

    之前我们看到了我们是如何固定视图边缘到父级视图边缘的间隙,使得当父级视图变大时,间隙约束也会让视图变大。

    但是如果我们想要视图仍然保持原来的大小,在父级视图变大时,视图之间的间隙也变大呢?

    理论上来说,我们想要某种类似 同等宽度约束的约束,只不过同等宽度约束是作用在视图上,我们想让它作用在约束上。

    此时我们需要添加 间隔视图来帮助我们布局,但由于我们不想在运行app时看到它们,我们会把它们的hidden属性设置为true

    使用这项技术的方法,是为每一个你想要等比增长的间隙添加一个间隔视图,把其他视图的边缘固定在间隔视图的边缘上,然后为所有的间隔视图添加 同等宽度约束

    下一步

    现在希望你们已经完全有信心开始探索应用约束的布局了。

    不要指望能即刻成功,Xcode是一个非常复杂的工具,除了storyboard和约束之外它还有很多其他功能,有些功能刚开始使用会觉得很神秘和困惑。就像其他复杂的工具一样,在你熟悉它的怪癖之前你还需要一段适应时间,但是我建议你尽早的去熟悉它,因为我预计(至少我希望)下一代设计师会更多地使用Xcode这样的工具而非Photoshop。

    如果你是一位创建设计规范的设计师,并想让IOS开发者遵循你的规范,你应该开始考虑和你的设计团队沟通的最好方法。也许你会创建一个视觉语言来描述你想要应用的约束。

    我个人认为,设计师应该更多地承担一些他们创建工作上的责任,而不是让一个前端开发人员重新创建设计意图,而设计师只是管理storyboard文件。

    如果你发现这个教程上有任何难以理解的地方,或者有错误的敌方,请让我知道,我会尽快更新这篇文章。

    转自 携程设计委员会 10 年前
    4,992