元字符

重复

字符类

例子：匹配(010)88886666或022-22334455或02912345678,
正则表达式： /\(?0\d{2}[-\)]?\d{8}/

分支条件

上述表达式中也能匹配010)12345678或(022-87654321这样的“不正确”的格式。要解决这个问题要用到分支条件。所以上述的正则表达式可以改写为/\(?0\d{2}\)[-]?\d{8}|0\d{2}[-]?\d{8}/

分组

重复多个字符时，可以使用()来表示。比如：(\d{1,3}\.){3}\d{1,3}是一个简单的IP地址匹配。
然而像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)/

反义

后向引用

使用小括号指定一个子表达式后，匹配这个子表达式的文本（也就是捕获的内容）。默认情况下，每个分组会自动拥有一个组号，规则是：从左往右，以分组的左括号为标志，第一个出现的分组的组号为1，第二个为2，以此类推

（这里面的性质JavaScript暂不支持）也可以指定子表达式的组名。比如：<Word>\w+要引用这个自定义的子表达式可以用\k<Word>

零宽断言

用于查找在某些内容（但并不包括这些内容）之前或之后的东西，也就是说它们像\b,^,$那样用于指定一个位置，这个位置应该满足一定的条件（断言），因此它们也被称为零宽断言。

负向零宽断言

参考链接：

• MDN RegExp
• 正则表达式30分钟入门教程

移动端适配的相关概念以及几种方案总结

适配相关概念

1. 布局视口（layout viewport）：html元素的上一级容器即顶级容器，用于解决页面在手机上显示的问题。大部分移动设备都将这个视口分辨率设置为980px，所以PC上的网页基本上能在手机上呈现，只不过看上去很小，一般默认可以通过手动缩放网页。获取当前布局视口用document.documentElement.clientWidth
2. 视觉视口（visual viewport）：指用户可见页面区域，即屏幕显示器的物理像素。获取当前的视觉视口可以用window.innerWidth
3. 理想视口（ideal viewport）：也就是我们通常说的屏幕分辨率。比如Iphone5屏幕分辨率是320。

使用viewport元标签控制布局

如下的viewport元标签的属性
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

以下是每个属性的介绍：

width的详细介绍：设置为device-width时表示layout viewport的宽度等于ideal viewport的值。同时设置width与intital-scale时，最终的视口宽度等于两者较大的那一个。也就是说：

1. 当layout viewport小于visual viewport时，视口宽度最终是visual viewport的值（经测试，layout viewport的值也会自动变成visual viewport）
2. 当layout viewport大于visual viewport时，视口宽度最终是layout viewport的值（经测试，visual viewport的值不会变成这时layout viewport的值）

initial-scale的详细介绍：缩放比例 = ideal layout / visual layout 。ideal viewport是不会改变的，这个值是为了改变visual viewport。缩放比例也有默认值，没有设置initial-scale时，浏览器会取适当的缩放比例使布局视口正好铺满屏幕即有 可视视口（visual viewport）尺寸=理想视口尺寸（ideal viewport）。也就是说设置width=device-width与设置initial-scale=1.0效果相同。

方案

1. 荔枝FM的方案：将layout viewport定义为设计稿的宽度，这样的好处在于css像素对应设计稿的px（以640px为例），不需要进行单位换算。但是有几点需要注意的地方。

   1. 为了保证最终的视口的值都是640px，而不会变成其他值（前面说过，最终视口的值会取width与initial-scale属性的最大值）。要把visual viewport设置成与layout viewport一样大，即设置initial-scale的值为 ideal viewport / 640。之前也有一个属性代替了这个操作，target-densitydpi=device-dpi,但资料显示target-densitydpi=device-dpi是一个被抛弃的属性，不推荐使用

2. 网易的纯REM方案：

   1. 采用理想视口作为可视视口的尺寸，只需要把缩放比定为1。<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
   2. 计算 html 元素的 font-size

   750px 是设计稿的宽度（以iphone6的物理像素数为标准），100是期望的换算比例，即设计稿中 100px 的长度对应css中 1rem，将设计稿中的长度数值除以 100 得到的就是以 rem 为单位的 css 长度的数值，设计稿的宽换算为以 rem 为单位的 css 长度应为 (750/100) rem，同时设计稿的宽对应可视视口的宽，即有 (750/100) rem = 可视视口宽，1 rem = 可视视口宽 * (100/750)，(100/750)就是我们要的系数

   在页面初始化时设置一下 html 元素的 font-size：

   document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';

3. 最后一种方案也是最合理的---来自于手淘的最佳实践

   1. 以上两种方案都存在一个问题，就是在retina屏幕上没有处理dpr（device pixel ratio）的副作用，何为dpr：物理像素 / 设备独立的像素（ideal viewport）。在JS中可以通过window.devicePixelRatio获取当前设备的dpr。
   2. 为何要处理dpr：在retina屏幕上，物理像素会被放大为原本的dpr倍。这时候就会存在以下几个问题
      • 图片变模糊了
      • border: 1px问题，边框自然会被放大为dpr倍
      • ...
   3. 解决方案：使用initial-scale=1/dpr对含有px单位的元素做处理，但是单纯这么做会导致字体元素的大小都会缩小。如何解决这个问题呢？答案就是在第二种方案的根元素设置fontSize的基础上再乘以一个dpr，这样对于以rem衡量的元素又能正常适配了。

参考阅读：

• 网易和淘宝移动WEB适配方案再分析
• 移动端高清、多屏适配方案
• 说说移动前端中 viewport （视口）

substring substr slice的区别

参数不为负数时

slice与substring的作用相同，即第一个参数为开始截取字符串的索引（包含），第二个参数为截止截取字符串的索引（不包含）。如：

var str = 'abcdefg'
str.slice(1,5) // bcde
str.substring(1,5) // bcde

substr的第一个参数是开始截取的字符串的索引（包含），第二个参数为要截取的字符串长度。如：

var str = 'abcdefg'
str.substr(1,5) // bcdef

参数为负数时

第一个参数为负数时

slice与substr的表现为将这负数+该字符串的长度，然后再计算。如：

var str = 'abcdefg'
str.slice(-3)   // efg
str.substr(-3) // efg

substring的表现为将负数转换成0。如：

var str = 'abcdefg'
str.substring(-3)   // abcdefg

第二个参数为负数时

与第一个参数为负数时的行为类似，但又有点不同。substring如果第一个参数为正数，第二个参数为负数，第二个参数会首先被转换为0。由于substring方法会将较小的数作为开始的位置，将较大的数作为结束的位置。因此两个参数会交换位置。如：

var str = 'abcdefg'
str.substring(3, -3)   // abc

另一种情况，在slice与substr函数中第二个参数的负数转换为正数后比第一个参数还大的话。将返回空字符串。

var str = 'abcdefg'
str.slice(5, -3)   // ''
str.substr(5, -3)   // ''