javascript回溯,回溯的用法

为什么这句 返回 有时候无法返回到上一个历史页面呢？

如果清空了浏览器的历史记录的话，就无法返回了，因为这个函数是通过浏览器的历史记录来进行回溯的。

相关问答

Q1: 正则表达式

首先我们要了解正则表达式是什么，它是一种匹配模式， 不仅能匹配匹配字符，还能匹配位置 ，不少人忽略了匹配字符这个作用，往往碰到这种问题就手足无措。

如果正则只有精确匹配是没有多大意义的，比如：

正则表达式的强大之处在于它的模糊匹配，分为横向模糊和纵向模糊

横向模糊：一个正则可匹配的字符串的长度不是固定的，可以是多种情况的

其实现的方式是使用量词：

比如：

横向模糊匹配到了多种情况，案例中用的正则是/ab{2,5}c/g，后面多了g，它是正则的一个修饰符。表示全局匹配，即在目标字符串中按顺序找到满足匹配模式的所有子串，强调的是“所有”，而不只是“第一个”。

纵向模糊：一个正则匹配的字符串，具体到某一位字符时，它可以不是某个确定的字符，可以有多种可能

其实现的方式是使用范围类

-表示连字符，在此处作特殊用处，但是如果我要匹配'a-z'这三个字符呢？可以这么写：

这样引擎就不会认为它们是一个氛围了， 符号在范围类中起取反的作用， a表示除了a的所有字符。

系统根据范围类又预定义了一些类方便我们使用：

不加g就是惰性匹配，我匹配完一个就不敢了，懒得再干其他事儿了，加了g就是贪婪模式了,我现在精力无限，会尽可能的干事儿，但是我还有些理智，不会干超出能力之外的事儿，比如你给我的范围是{2,5}，我会尽可能做5件事儿，但是不会超过5件事,反正只要在能力范围内，越多越好

此时我既想尽可能的匹配又想让它不那么贪婪有没有办法呢？办法是有的, 贪婪模式一般作用在量词这里，限制在量词这里就好了 ，可以在量词这里加一个？即可搞定。

其中/\d{2,5}?/表示，虽然2到5次都行，当2个就够的时候，就不在往下尝试了。

此时就达到了我们的要求,不过这里完全是为了讲解贪婪模式和惰性模式，并不推荐这么做，我完全可以将{2,5}改成{2}，一样的效果

知道了惰性模式的原理，我们完全可以鼓捣出其他的各式各样的情形：

一个模式可以实现横向和纵向模糊匹配。而多选分支可以支持多个子模式任选其一

具体形式如下：(p1|p2|p3)，其中p1、p2和p3是子模式，用“|”（管道符）分隔，表示其中任何之一

但有个事实我们应该注意，比如我用/good|goodbye/，去匹配"goodbye"字符串时，结果是"good"

而把正则改成/goodbye|good/，结果是

也就是说，分支结构也是惰性的，即当前面的分支匹配上了，后面的就不再尝试了

并且，使用分支的时候注意使用括号，

匹配字符，无非就是范围类、量词和分支结构的组合使用罢了

分析：

表示一个16进制字符，可以用范围类[0-9a-fA-F]

其中字符可以出现3或6次，需要是用量词和分支结构

使用分支结构时，需要注意顺序(惰性)

分析：

对每个地方的数字进行分析：

共4位数字，第一位数字可以为[0-2]。

当第1位为2时，第2位可以为[0-3]，其他情况时，第2位为[0-9]。

第3位数字为[0-5]，第4位为[0-9]

如果也要求匹配7:9，也就是说时分前面的0可以省略:

分析：

年，四位数字即可，可用[0-9]{4}。

月，共12个月，分两种情况01、02、……、09和10、11、12，可用(0[1-9]|1[0-2])。

日，最大31天，可用(0[1-9]|[12][0-9]|3[01])

分析：

整体模式是: 盘符:\文件夹\文件夹\文件夹

其中匹配F:\，需要使用[a-zA-Z]:\，其中盘符不区分大小写，注意\字符需要转义。

文件名或者文件夹名，不能包含一些特殊字符，此时我们需要排除范围类[ \:*|"?\r\n/]来表示合法字符。另外不能为空名，至少有一个字符，也就是要使用量词+。因此匹配“文件夹\”，可用[ \:*|"?\r\n/]+\。

另外“文件夹\”，可以出现任意次。也就是([^\: |"?\r\n/]+\) 。其中括号提供子表达式。

路径的最后一部分可以是“文件夹”，没有\，因此需要添加([^\:*|"?\r\n/]+)?。

最后拼接成了一个看起来比较复杂的正则：

用到了惰性匹配，防止把class也提取出来

优化：

^（脱字符）匹配开头，在多行匹配中匹配行开头。

$（美元符号）匹配结尾，在多行匹配中匹配行结尾

比如我们把字符串的开头和结尾用"#"替换（位置可以替换成字符的！）：

多行匹配模式时，二者是行的概念，这个需要我们的注意

\b是单词边界，具体就是\w和\W之间的位置，也包括\w和^之间的位置，也包括\w和$之间的位置

首先，我们知道，\w是范围类[0-9a-zA-Z_]的简写形式，即\w是字母数字或者下划线的中任何一个字符。而\W是排除范围类[^0-9a-zA-Z_]的简写形式，即\W是\w以外的任何一个字符

此时我们可以看看"[#JS#] #Lesson_01#.#mp4#"中的每一个"#"，是怎么来的。

第一个"#"，两边是"["与"J"，是\W和\w之间的位置。

第二个"#"，两边是"S"与"]"，也就是\w和\W之间的位置。

第三个"#"，两边是空格与"L"，也就是\W和\w之间的位置。

第四个"#"，两边是"1"与"."，也就是\w和\W之间的位置。

第五个"#"，两边是"."与"m"，也就是\W和\w之间的位置。

第六个"#"，其对应的位置是结尾，但其前面的字符"4"是\w，即\w和$之间的位置。

知道了\b的概念后，那么\B也就相对好理解了。

\B就是\b的反面的意思，非单词边界。例如在字符串中所有位置中，扣掉\b，剩下的都是\B的。

具体说来就是\w与\w、\W与\W、^与\W，\W与$之间的位置

exp1(?=exp2) 表达式会匹配exp1表达式，但只有其后面内容是exp2的时候才会匹配

exp1(?=exp2) 表达式会匹配exp1表达式，但只有其后面内容不是exp2的时候才会匹配

(?=p)，其中p是一个子模式，即p前面的位置

比如(?=l)，表示'l'字符前面的位置，例如：

而(?!p)就是(?=p)的反面意思

对于位置的理解，我们可以理解成空字符""

因此，把/ hello$/写成/ ^hello$$$/，是没有任何问题的：

也就是说字符之间的位置，可以写成多个。

把位置理解空字符，是对位置非常有效的理解方式

此正则要求只有一个字符，但该字符后面是开头。

比如把"12345678"，变成"12,345,678"。

可见是需要把相应的位置替换成","

使用(?=\d{3}$)就可以做到：

因为逗号出现的位置，要求后面3个数字一组，也就是\d{3}至少出现一次。

此时可以使用量词+：

此时会出现问题：

上面的正则，仅仅表示把从结尾向前数，一但是3的倍数，就把其前面的位置替换成逗号

怎么解决呢？我们要求匹配的到这个位置不能是开头。

我们知道匹配开头可以使用^，但要求这个位置不是开头怎么办？

easy，(?!^)

如果要把"12345678 123456789"替换成"12,345,678 123,456,789"。

此时我们需要修改正则，把里面的开头^和结尾$，替换成\b

其中(?!\b)怎么理解呢？

要求当前是一个位置，但不是\b前面的位置，其实(?!\b)说的就是\B。

因此最终正则变成了：/\B(?=(\d{3})+\b)/g

此题，如果写成多个正则来判断，比较容易。但要写成一个正则就比较困难。

那么，我们就来挑战一下。看看我们对位置的理解是否深刻

我们可以把原题变成下列几种情况之一：

1.同时包含数字和小写字母

2.同时包含数字和大写字母

3.同时包含小写字母和大写字母

4.同时包含数字、小写字母和大写字母

上面的正则看起来比较复杂，只要理解了第二步，其余就全部理解了。

/(?=.*[0-9])^[0-9A-Za-z]{6,12}$/

对于这个正则，我们只需要弄明白(?=.*[0-9])^即可。

分开来看就是(?=.*[0-9])和^。

表示开头前面还有个位置（当然也是开头，即同一个位置，想想之前的空字符类比）。

(?=. [0-9])表示该位置后面的字符匹配. [0-9]，即，有任何多个任意字符，后面再跟个数字。

另一种解法：

“至少包含两种字符”的意思就是说，不能全部都是数字，也不能全部都是小写字母，也不能全部都是大写字母。

那么要求“不能全部都是数字”，怎么做呢？(?!p)出马！

三种'都不能'呢？

1.分组和分支结构

括号是提供分组功能，使量词'+'作用于z和这个整体

而在多选分支结构(p1|p2)中，此处括号的作用也是不言而喻的，提供了子表达式的所有可能

而要使用它带来的好处，必须配合使用实现环境的API

以日期为例。假设格式是yyyy-mm-dd的

提取数据：

match返回的一个数组，第一个元素是整体匹配结果，然后是各个分组（括号里）匹配的内容，然后是匹配下标，最后是输入的文本

可以使用正则对象的exec方法：

也可以使用构造函数的全局属性$1至$9来获取：

替换:

想把yyyy-mm-dd格式，替换成mm/dd/yyyy怎么做？

反向引用:

比如要写一个正则支持匹配如下三种格式：

注意里面的\1，表示的引用之前的那个分组(-|/|.)。不管它匹配到什么（比如-），\1都匹配那个同样的具体某个字符

括号嵌套怎么办？

以左括号（开括号）为准

\10是表示第10个分组，还是\1和0呢？答案是前者，虽然一个正则里出现\10比较罕见

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

因为反向引用，是引用前面的分组，但我们在正则里引用了不存在的分组时，此时正则不会报错，只是匹配反向引用的字符本身。例如\2，就匹配"\2"。注意"\2"表示对2进行了转意

非捕获分组:

之前文中出现的分组，都会捕获它们匹配到的数据，以便后续引用，因此也称他们是捕获型分组。

如果只想要括号最原始的功能，但不会引用它，即，既不在API里引用，也不在正则里反向引用。此时可以使用非捕获分组(?:p)

第二种，匹配整个字符串，然后用引用来提取出相应的数据

思路是找到每个单词的首字母，当然这里不使用非捕获匹配也是可以的

首字母不会转化为大写的。其中分组(.)表示首字母，单词的界定，前面的字符可以是多个连字符、下划线以及空白符。正则后面的?的目的，是为了应对str尾部的字符可能不是单词字符，比如str是'-moz-transform '

通过key获取相应的分组引用，然后作为对象的键

匹配一个开标签，可以使用正则[^]+，

匹配一个闭标签，可以使用/[^]+，

但是要求匹配成对标签，那就需要使用反向引用

其中开标签[ ]+改成([ ]+)，使用括号的目的是为了后面使用反向引用，而提供分组。闭标签使用了反向引用，/\1。

另外[\d\D]的意思是，这个字符是数字或者不是数字，因此，也就是匹配任意字符的意思

而当目标字符串是"abbbc"时，就没有所谓的“回溯”。其匹配过程是：

其中子表达式b{1,3}表示“b”字符连续出现1到3次。

图中第5步有红颜色，表示匹配不成功。此时b{1,3}已经匹配到了2个字符“b”，准备尝试第三个时，结果发现接下来的字符是“c”。那么就认为b{1,3}就已经匹配完毕。然后状态又回到之前的状态（即第6步，与第4步一样），最后再用子表达式c，去匹配字符“c”。当然，此时整个表达式匹配成功了。

图中的第6步，就是“回溯”。

你可能对此没有感觉，这里我们再举一个例子。正则是：

目标字符串是"abbbc"，匹配过程是：

其中第7步和第10步是回溯。第7步与第4步一样，此时b{1,3}匹配了两个"b"，而第10步与第3步一样，此时b{1,3}只匹配了一个"b"，这也是b{1,3}的最终匹配结果。

这里再看一个清晰的回溯，正则是：

目标字符串是："acd"ef，匹配过程是：

图中省略了尝试匹配双引号失败的过程。可以看出“.*”是非常影响效率的。

为了减少一些不必要的回溯，可以把正则修改为/"[^"]*"/。

正则表达式匹配字符串的这种方式，有个学名，叫回溯法。

回溯法也称试探法，它的基本思想是： 从问题的某一种状态（初始状态）出发，搜索从这种状态出发所能达到的所有“状态”，当一条路走到“尽头”的时候（不能再前进），再后退一步或若干步，从另一种可能“状态”出发，继续搜索，直到所有的“路径”（状态）都试探过。这种不断“前进”、不断“回溯”寻找解的方法，就称作“回溯法” 。

本质上就是深度优先搜索算法。其中 退到之前的某一步这一过程，我们称为“回溯” 。从上面的描述过程中，可以看出，路走不通时，就会发生“回溯”。即， 尝试匹配失败时，接下来的一步通常就是回溯

道理，我们是懂了。那么JS中正则表达式会产生回溯的地方都有哪些呢？

3.1 贪婪量词

之前的例子都是贪婪量词相关的。比如b{1,3}，因为其是贪婪的，尝试可能的顺序是从多往少的方向去尝试。首先会尝试"bbb"，然后再看整个正则是否能匹配。不能匹配时，吐出一个"b"，即在"bb"的基础上，再继续尝试。如果还不行，再吐出一个，再试。如果还不行呢？只能说明匹配失败了。

虽然局部匹配是贪婪的，但也要满足整体能正确匹配。否则，皮之不存，毛将焉附？

此时我们不禁会问，如果当多个贪婪量词挨着存在，并相互有冲突时，此时会是怎样？

答案是，先下手为强！因为深度优先搜索。测试如下：

其中，前面的\d{1,3}匹配的是"123"，后面的\d{1,3}匹配的是"45"。

3.2 惰性量词

惰性量词就是在贪婪量词后面加个问号。表示尽可能少的匹配，比如：

其中\d{1,3}?只匹配到一个字符"1"，而后面的\d{1,3}匹配了"234"。

虽然惰性量词不贪，但也会有回溯的现象。比如正则是：

目标字符串是"12345"，匹配过程是：

知道你不贪、很知足，但是为了整体匹配成，没办法，也只能给你多塞点了。因此最后\d{1,3}?匹配的字符是"12"，是两个数字，而不是一个。

3.3 分支结构

我们知道分支也是惰性的，比如/can|candy/，去匹配字符串"candy"，得到的结果是"can"，因为分支会一个一个尝试，如果前面的满足了，后面就不会再试验了。

分支结构，可能前面的子模式会形成了局部匹配，如果接下来表达式整体不匹配时，仍会继续尝试剩下的分支。这种尝试也可以看成一种回溯。

比如正则：

目标字符串是"candy"，匹配过程：

上面第5步，虽然没有回到之前的状态，但仍然回到了分支结构，尝试下一种可能。所以，可以认为它是一种回溯的

简单总结就是，正因为有多种可能，所以要一个一个试。直到，要么到某一步时，整体匹配成功了；要么最后都试完后，发现整体匹配不成功。

既然有回溯的过程，那么匹配效率肯定低一些。相对谁呢？相对那些DFA引擎。

而JS的正则引擎是NFA，NFA是“非确定型有限自动机”的简写。

大部分语言中的正则都是NFA，为啥它这么流行呢？

答：你别看我匹配慢，但是我编译快啊，而且我还有趣哦。

而在正则表达式中，操作符都体现在结构中，即由特殊字符和普通字符所代表的一个个特殊整体。

JS正则表达式中，都有哪些结构呢？

其中涉及到的操作符有：

上面操作符的优先级从上至下，由高到低。

这里，我们来分析一个正则：

因为是要匹配整个字符串，我们经常会在正则前后中加上锚字符^和$。

比如要匹配目标字符串"abc"或者"bcd"时，如果一不小心，就会写成/^abc|bcd$/。

而位置字符和字符序列优先级要比竖杠高，故其匹配的结构是：

应该修改成:

2.2 量词连缀问题

假设，要匹配这样的字符串：

此时正则不能想当然地写成/^[abc]{3}+$/，这样会报错，说“+”前面没什么可重复的：

此时要修改成：

2.3 元字符转义问题

所谓元字符，就是正则中有特殊含义的字符。

所有结构里，用到的元字符总结如下：

当匹配上面的字符本身时，可以一律转义：

在string中，也可以把每个字符转义，当然，转义后的结果仍是本身：

现在的问题是，是不是每个字符都需要转义呢？否，看情况。

2.3.1 范围类中的元字符

跟范围类相关的元字符有 []、^、- 。因此在会引起歧义的地方进行转义。例如开头的^必须转义，不然会把整个范围类，看成反义范围类。

2.3.2 匹配“[abc]”和“{3,5}”

我们知道[abc]，是个字符组。如果要匹配字符串"[abc]"时，该怎么办？

可以写成/[abc]/，也可以写成/[abc]/，测试如下:

只需要在第一个方括号转义即可，因为后面的方括号构不成字符组，正则不会引发歧义，自然不需要转义。

同理，要匹配字符串"{3,5}"，只需要把正则写成/{3,5}/即可。

另外，我们知道量词有简写形式{m,}，却没有{,n}的情况。虽然后者不构成量词的形式，但此时并不会报错。当然，匹配的字符串也是"{,n}"，测试如下：

var str = "{,3}";

var reg = /{,3}/g;

console.log( str.match(reg)[0] );

// = "{,3}"

2.3.3 其余情况

比如= ! : - ,等符号，只要不在特殊结构中，也不需要转义。

但是，括号需要前后都转义的，如/(123)/。

至于剩下的^ $ . * + ? | \ /等字符，只要不在字符组内，都需要转义的。

因为竖杠“|”,的优先级最低，所以正则分成了两部分\d{15}和\d{17}[\dxX]。

\d{15}表示15位连续数字。

\d{17}[\dxX]表示17位连续数字，最后一位可以是数字可以大小写字母"x"。

可视化如下：

3.2 IPV4地址

正则表达式是：

这个正则，看起来非常吓人。但是熟悉优先级后，会立马得出如下的结构：

((...)\.){3}(...)

上面的两个(...)是一样的结构。表示匹配的是3位数字。因此整个结构是

3位数.3位数.3位数.3位数

然后再来分析(...)：

(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])

它是一个多选结构，分成5个部分：

0{0,2}\d ，匹配一位数，包括0补齐的。比如，9、09、009；

0?\d{2} ，匹配两位数，包括0补齐的，也包括一位数；

1\d{2} ，匹配100到199;

2[0-4]\d ，匹配200-249；

25[0-5] ，匹配250-255。

最后来看一下其可视化形式：

掌握正则表达式中的优先级后，再看任何正则应该都有信心分析下去了。

至于例子，不一而足，没有写太多。

这里稍微总结一下，竖杠的优先级最低，即最后运算。

只要知道这一点，就能读懂大部分正则。

另外关于元字符转义问题，当自己不确定与否时，尽管去转义，总之是不会错的。

本文就解决该问题，内容包括：

2.1 是否能使用正则

正则太强大了，以至于我们随便遇到一个操作字符串问题时，都会下意识地去想，用正则该怎么做。但我们始终要提醒自己，正则虽然强大，但不是万能的，很多看似很简单的事情，还是做不到的。

比如匹配这样的字符串：1010010001....

虽然很有规律，但是只靠正则就是无能为力。

2.2 是否有必要使用正则

要认识到正则的局限，不要去研究根本无法完成的任务。同时，也不能走入另一个极端：无所不用正则。能用字符串API解决的简单问题，就不该正则出马。

比如，从日期中提取出年月日，虽然可以使用正则：

其实，可以使用字符串的split方法来做，即可：

比如，判断是否有问号，虽然可以使用：

其实，可以使用字符串的indexOf方法：

比如获取子串，虽然可以使用正则：

其实，可以直接使用字符串的substring或substr方法来做：

var str = "JavaScript";

console.log( str.substring(4) );

// = Script

2.3 是否有必要构建一个复杂的正则

比如密码匹配问题，要求密码长度6-12位，由数字、小写字符和大写字母组成，但必须至少包括2种字符。

在匹配位置那篇文章里，我们写出了正则是：

其实可以使用多个小正则来做：

所谓准确性，就是能匹配预期的目标，并且不匹配非预期的目标。

这里提到了“预期”二字，那么我们就需要知道目标的组成规则。

不然没法界定什么样的目标字符串是符合预期的，什么样的又不是符合预期的。

下面将举例说明，当目标字符串构成比较复杂时，该如何构建正则，并考虑到哪些平衡。

3.1 匹配固定电话

比如要匹配如下格式的固定电话号码：

055188888888 0551-88888888 (0551)88888888

第一步，了解各部分的模式规则。

上面的电话，总体上分为区号和号码两部分（不考虑分机号和+86的情形）。

区号是0开头的3到4位数字，对应的正则是：0\d{2,3}

号码是非0开头的7到8位数字，对应的正则是：[1-9]\d{6,7}

因此，匹配055188888888的正则是：/^0\d{2,3}[1-9]\d{6,7}$/

匹配0551-88888888的正则是：/^0\d{2,3}-[1-9]\d{6,7}$/

匹配(0551)88888888的正则是：/^(0\d{2,3})[1-9]\d{6,7}$/

第二步，明确形式关系。

这三者情形是或的关系，可以构建分支：

提取公共部分：

进一步简写：

上面的正则构建过程略显罗嗦，但是这样做，能保证正则是准确的。

上述三种情形是或的关系，这一点很重要，不然很容易按字符是否出现的情形把正则写成：

/^(?0\d{2,3})?-?[1-9]\d{6,7}$/

虽然也能匹配上述目标字符串，但也会匹配(0551-88888888这样的字符串。当然，这不是我们想要的。

其实这个正则也不是完美的，因为现实中，并不是每个3位数和4位数都是一个真实的区号。

这就

Q2: [JS] 正则表达式的回溯方式

正则表达式中的回溯，发生在包含限定符（quantifiers）和替换构造（alternation constructs）的场景中，

这种情况下，正则表达式引擎会退回到前一个经历过的状态，

然后从这个状态开始继续往下匹配。

不包含限定符（quantifiers）或替换构造（alternation constructs）的正则表达式，

会在线性时间内完成匹配。

正则表达式引擎，首先会从正则表达式中取出一个元素，然后拿着它和输入字符串进行匹配，

然后再在正则表达式中取下一个元素，与输入字符串的下一个字符进行匹配。

例如，

尽管正则表达式中包含 {2} ，但它不是可选限定符，因此该正则表达式在匹配过程中不回溯，

整个匹配过程如下，

大部分正则表达式引擎使用了 非确定有限状态自动机 （NFA），

与 确定有限状态自动机 （DFA）不同的是，

DFA由输入字符串驱动，NFA由正则表达式中的元素来却动。

正则表达式引擎，会逐一取出正则表达式中的元素，与输入字符串进行匹配，

如果正则表达式的当前元素，无法匹配到字符串上时，

就会退回到之前的匹配状态，从那里开始再尝试重新的可能性，称之为回溯。

首先，正则表达式引擎会使用 .* （贪婪匹配）与整个字符串进行匹配，

然后再尝试匹配正则表达式后面的元素 e ，

这时候，输入字符串已经没有剩余的字符了，匹配失败。

接着，正则表达式引擎会进行回溯，返回到上一次成功匹配时的状态，

即，已经匹配了 Essential services are provided by regular expressions ，

但还剩下一个字符 . 没有匹配时的状态，再尝试匹配 e 。

发现这次也失败了，然后正则表达式引擎就会继续回溯，

直到回溯到匹配了输入字符串 Essential services are provided by regular expr ，

剩余 essions. 的状态。

最后尝试匹配 e 和 s 都成功了，匹配结束。

正则表达式引擎，首先会对字符串开头 ^ 进行匹配，

然后对 (a+) 进行贪婪匹配（吃掉5个 a ），

(a+)+ 对 (a+) 这个捕获组也会进行贪婪匹配，捕获组最多只能重复1次了，

输入字符串中的还剩余字符 ! ，不能匹配正则表达式的 $ （字符串结尾），匹配失败。

接着正则表达式引擎就会回溯，先回到对捕获组的贪婪匹配上 (a+)+ ，

因为已经是最少的重复次数了（1次），还要继续回溯，

回到 (a+) 的贪婪匹配上，这次只吃掉4个 a ，

接着再重复上面的捕获组贪婪匹配 (a+)+ ，字符串结尾 $ ，匹配失败。

这样一直进行和回溯下去，注意从 (a+) 匹配了2个 a 开始，

(a+)+ 的行为也要进行回溯了， (a+)+ 会贪婪匹配2个捕获组 (aa)(aa)a! ，

结果发现 $ 不能匹配时，回溯到 (a+)+ ，然后只匹配1个捕获组， (aa)aaa! ，

结果 $ 还是不能匹配，再回溯到 (a+) 的状态。

然后 (a+) 只能匹配1个 a 了， (a+)+ 贪婪匹配5个捕获组， (a)(a)(a)(a)(a)! ，

最后的 $ 不能匹配 ! 时，先回溯捕获组的匹配，它先匹配4个捕获组， (a)(a)(a)(a)a! ,

结果 $ 不能匹配 a! ，然后回溯捕获组的匹配3个捕获组， (a)(a)(a)aa! 。

如此进行下去，直到捕获组匹配只匹配了一个捕获组 (a)aaaa! ，

而 $ 不能匹配 aaaa! ，所有的可能性都尝试过了，匹配失败。

正则表达式的回溯，会占用大量CPU时间，

以下示例可让CPU占用率飙升到100%，

Backtracking in Regular Expressions

Q3: JS树结构数据的遍历

title: JS树结构数据的遍历

date: 2022-04-14

description: 针对项目中出现树形结构数据的时候，我们怎样去操作他

项目中我们会经常出现对树形结构的遍历、查找和转换的场景，比如说DOM树、族谱、社会机构、组织架构、权限、菜单、省市区、路由、标签等等。那针对这些场景和数据，我们又如何去遍历和操作，有什么方式或者技巧可以简化我们的实现思路。下面我们将针对常规出现的场景去总结一下我们的遍历方式

树的特点

1、每个节点都只有有限个子节点或无子节点；

2、没有父节点的节点称为根节点；

3、每一个非根节点有且只有一个父节点；

4、除了根节点外，每个子节点可以分为多个不相交的子树；

5、树里面没有环路

下面的图片表示一颗树

在下面的JS中我们由多棵树组成我们的数据

在这数据中我们如何评判数据是否为叶节点（也就是最后一级），我们每个节点都会存在children属性，如果不存在children属性或者children不是一个数组或者children为数组且长度为0我们则认为他是一个叶节点

我们针对树结构的操作离不开遍历，遍历的话又分为广度优先遍历、深度优先遍历。其中深度优先遍历可以通过递归和循环的方式实现，而广度优先遍历的话是非递归的

从上往下对每一层依次访问，在每一层中，从左往右（也可以从右往左）访问结点，访问完一层就进入下一层，直到没有结点可以访问为止。即访问树结构的第n+1层前必须先访问完第n层。

简单的说，BFS是从根节点开始，沿着树的宽度遍历树的节点。如果所有节点均被访问，则算法中止。

所以我们的实现思路是，维护一个队列，队列的初始值为树结构根节点组成的列表，重复执行以下步骤直到队列为空：

取出队列中的第一个元素，进行访问相关操作，然后将其后代元素（如果有）全部追加到队列最后。

深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。这个算法会尽可能深的搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止

1、先序遍历

访问子树的时候，先访问根再访问根的子树

2、后序遍历

访问子树的时候，先访问子树再访问根

1、先序遍历

先序遍历与广度优先循环实现类似，要维护一个队列，不同的是子节点不追加到队列最后，而是加到队列最前面

2、后序遍历

后序遍历就略微复杂一点，我们需要不断将子树扩展到根节点前面去，执行列表遍历，并且通过一个临时对象维护一个id列表，当遍历到某个节点如果它没有子节点或者它本身已经存在于我们的临时id列表，则执行访问操作，否则继续扩展子节点到当前节点前面

对于树结构的遍历操作，其实递归是最基础，也是最容易理解的。递归本身就是循环的思想，所以可以用循环来改写递归,以上的方式在项目中已经廊括了大部分的场景了，我们在日常开发中可以根据场景或者需要去选择我们的遍历方式，或者基于此对他进行调整和优化，至于每种方式的空间复杂度和时间复杂度我们在这个地方就不去尝试了，各位感兴趣可以自己去验证。

广度优先搜索

树的遍历

深度优先搜索

图文详解两种算法：深度优先遍历（DFS）和广度优先遍历（BFS）

二叉树遍历（前序，后序，中序，层次）递归与迭代实现JavaScript

JS树结构操作:查找、遍历、筛选、树和列表相互转换

Q4: jquery sortable怎么把已拖动的元素回溯到上一个位置？

在jquery里可以直接用isNaN()，因为他是JavaScript的类库。是由JavaScript语言写的。

例如：

script type="text/javascript"

$(document).ready(function(){

alert(isNaN($('#id').val()));

});

/script可以直接使用