一些常用正则

一、校验数字的表达式

1 数字:^[0-9]*$

2 n位的数字:^\d{n}$

3 至少n位的数字:^\d{n,}$

4 m-n位的数字:^\d{m,n}$

5 零和非零开头的数字:^(0|[1-9][0-9]*)$

6 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$

7 带1-2位小数的正数或负数:^(-)?\d+(.\d{1,2})?$

8 正数、负数、和小数:^(-|+)?\d+(.\d+)?$

9 有两位小数的正实数:^[0-9]+(.[0-9]{2})?$

10 有1~3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$

11 非零的正整数:^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]*$

12 非零的负整数:^-[1-9][]0-9″$ 或 ^-[1-9]\d$

13 非负整数:^\d+$ 或 ^[1-9]\d*|0$

14 非正整数:^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$

15 非负浮点数:^\d+(.\d+)?$ 或 ^[1-9]\d.\d|0.\d[1-9]\d|0?.0+|0$

16 非正浮点数:^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d.\d|0.\d[1-9]\d))|0?.0+|0$

17 正浮点数:^[1-9]\d.\d|0.\d[1-9]\d$ 或 ^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$

18 负浮点数:^-([1-9]\d.\d|0.\d[1-9]\d)$ 或 ^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9])))$

19 浮点数:^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d.\d|0.\d[1-9]\d|0?.0+|0)$

二、校验字符的表达式

1 汉字:^[\u4e00-\u9fa5]{0,}$

2 英文和数字:^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$

3 长度为3-20的所有字符:^.{3,20}$

4 由26个英文字母组成的字符串:^[A-Za-z]+$

5 由26个大写英文字母组成的字符串:^[A-Z]+$

6 由26个小写英文字母组成的字符串:^[a-z]+$

7 由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$

8 由数字、26个英文字母或者下划线组成的字符串:^\w+$ 或 ^\w{3,20}$

9 中文、英文、数字包括下划线:^[\u4E00-\u9FA5A-Za-z0-9_]+$

10 中文、英文、数字但不包括下划线等符号:^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$

11 可以输入含有^%&’,;=?$\”等字符:[^%&’,;=?$\x22]+

12 禁止输入含有~的字符:[^~\x22]+

三、特殊需求表达式

1 Email地址:^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$

2 域名:[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?

3 InternetURL:[a-zA-z]+://[^\s]* 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$

4 手机号码:^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

5 电话号码(“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX):^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$

6 国内电话号码(0511-4405222、021-87888822):\d{3}-\d{8}|\d{4}-\d{7}

7 身份证号(15位、18位数字):^\d{15}|\d{18}$

8 短身份证号码(数字、字母x结尾):^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$

9 帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$

10 密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线):^[a-zA-Z]\w{5,17}$

11 强密码(必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间):^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$

12 日期格式:^\d{4}-\d{1,2}-\d{1,2}

13 一年的12个月(01~09和1~12):^(0?[1-9]|1[0-2])$

14 一个月的31天(01~09和1~31):^((0?[1-9])|((1|2)[0-9])|30|31)$

15 钱的输入格式:

16 1.有四种钱的表示形式我们可以接受:”10000.00″ 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”:^[1-9][0-9]*$

17 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符”0″不通过,所以我们采用下面的形式:^(0|[1-9][0-9]*)$

18 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号:^(0|-?[1-9][0-9]*)$

19 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分:^[0-9]+(.[0-9]+)?$

20 5.必须说明的是,小数点后面至少应该有1位数,所以”10.”是不通过的,但是 “10” 和 “10.2” 是通过的:^[0-9]+(.[0-9]{2})?$

21 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样:^[0-9]+(.[0-9]{1,2})?$

22 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样:^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$

23 8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须:^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$

24 备注:这就是最终结果了,别忘了”+”可以用”*”替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里

25 xml文件:^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$

26 中文字符的正则表达式:[\u4e00-\u9fa5]

27 双字节字符:[^\x00-\xff] (包括汉字在内,可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1))

28 空白行的正则表达式:\n\s*\r (可以用来删除空白行)

29 HTML标记的正则表达式:<(\S?)[^>]>.?|<.? /> (网上流传的版本太糟糕,上面这个也仅仅能部分,对于复杂的嵌套标记依旧无能为力)

30 首尾空白字符的正则表达式:^\s|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式)

31 腾讯QQ号:[1-9][0-9]{4,} (腾讯QQ号从10000开始)

32 中国邮政编码:[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)

33 IP地址:\d+.\d+.\d+.\d+ (提取IP地址时有用)

34 IP地址:((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))

【转】使用localstorage和预加载做到webview秒开

原文地址:http://foio.github.io/localstorage-webview/?utm_source=tuicool&utm_medium=referral

提到网页加载速度优化,大家都会想到静态资源上CDN,CSS和JS文件合并,图片合并成雪碧图等常用手段;但是在某些特殊情况下这些常用方法也无法达到理想的效果。比如,在国际化场景下,很多国家还停留在2G网络阶段,无论如何优化,都无法避免过慢的网络请求。最近一直在做国际化(主要是印尼和泰国)背景下的webview性能优化,也算有一些经验。由于我们的产品是面向android用户的,而android手机对H5支持很好,因此我们主要是应用H5的新特性。

1.H5的menifest缓存的局限

H5的menifest缓存机制是大家经常提起的方法,这是一种使用起来很简单的机制,其基本原理就是:当menifest文件有更新时,就会更新整个应用,否则就不会请求网络而是使用本地缓存的资源。但是我们使用起来却有不少问题:比如即使menifest文件发生变化,应用也不能及时的更新。对于menifest机制我们的结论是:menifest可以用于缓存基本不发生变化的文件(比如基本样式表base.css,javascript类库jquery.js等),对于业务代码一定不要使用menifest缓存,否则可能导致业务代码无法更新

新浪微博中大量的使用了menifest缓存机制,但是他们也只缓存了类库和基本样式表,而没有缓存业务代码。这是一个例子http://card.weibo.com/article/h5/s#cid=1001603928694585472076,其menifest文件如下:

CACHE MANIFEST
# v = 8f708b371de7949de35b8cec4dac678b
CACHE:
# CSS and CSS resource image
http://u1.sinaimg.cn/apps/media/css/article_201511121505.css
http://u1.sinaimg.cn/apps/media/img/bg_cricle.png
http://u1.sinaimg.cn/apps/media/img/bg_criclein.png
http://u1.sinaimg.cn/apps/media/img/bg_imgslayer.png
http://u1.sinaimg.cn/apps/media/img/font/myfont_v3.eot
http://u1.sinaimg.cn/apps/media/img/font/myfont_v3.woff
http://u1.sinaimg.cn/apps/media/img/font/myfont_v3.ttf
http://u1.sinaimg.cn/apps/media/img/font/myfont_v3.svg
http://u1.sinaimg.cn/apps/media/img/lib/icons.svg
http://u1.sinaimg.cn/apps/media/img/lib/icon_SmartisanNote.svg
http://u1.sinaimg.cn/apps/media/img/lib/icon_Smart.svg

# Placeholder image
#http://ww3.sinaimg.cn/small/6f21f059jw1e4vxadm276j20f008ca9w.jpg

# js file
http://u1.sinaimg.cn/apps/media/js/jquery.min.js
http://u1.sinaimg.cn/apps/media/js/page/article/show/offline_201511121505.js

# Emoticons top 10
http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif
http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_org.gif
http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/lovea_org.gif
http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c4/liwu_org.gif
http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/sada_org.gif
http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/hearta_org.gif
http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/ye_org.gif
http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_org.gif
http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8c/hsa_org.gif
http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d0/z2_org.gif

NETWORK:
*

2.使用localstorage缓存js和css文件

localstorage设计之初是为了缓存应用数据的,关于是否应该使用它缓存js和css文件,知乎上有一篇讨论: 静态资源(JS/CSS)存储在localStorage有什么缺点?为什么没有被广泛应用?。其中得票最多的基本上概况了localstorage的适用场景以及优缺点:

PC上因为localstorage兼容性不好,而且网速较快,因此实用价值不大
移动端单页面应用(webapp),因为localstorage兼容性好,网速慢,所以值得尝试
localstorage的兼容性问题

UC的前端团队推出了基于localstorage存储前端静态资源的Scrat-webapp模块化开发体系,而且基于这个模块化体系开发了很多项目:神马视频NBA直播。大家可以通过chrome的开发者工具查看localstorage的使用情况。

基于以上的行业经验,我们也选用了localstorage作为自己的前端资源缓存,并实现了自己的基于localstorage的静态资源加载器,其实现原理可以参考我的博客:在网页中异步加载javascript 的XHR Eval方法。具体代码如下:

;(function (global) {
    'use strict';

    //检查文件类型
    var TYPE_RE = /\.(js|css)(?=[?&,]|$)/i;
    function fileType(str) {
        var ext = 'js';
        str.replace(TYPE_RE, function (m, $1) {
            ext = $1;
        });
        if (ext !== 'js' && ext !== 'css') ext = 'unknown';
        return ext;
    }

    //将js片段插入dom结构
    function evalGlobal(strScript){
        var scriptEl = document.createElement ("script");
        scriptEl.type= "text/javascript";
        scriptEl.text= strScript;
        document.getElementsByTagName("head")[0].appendChild(scriptEl) ;
    }

    //将css片段插入dom结构
    function createCss(strCss) {
        var styleEl = document.createElement('style');
        document.head.appendChild(styleEl);
        styleEl.appendChild(document.createTextNode(strCss));
    }

    // 在全局作用域执行js或插入style node
    function defineCode(url, str) {
        var type = fileType(url);
        if (type === "js"){
            //with(window)eval(str);
            evalGlobal(str);
        }else if(type === "css"){
            createCss(str);
        }
    }

    // 将数据写入localstorage
    var setLocalStorage = function(key, item){
        window.localStorage && window.localStorage.setItem(key, item);
    }

    // 从localstorage中读取数据
    var getLocalStorage = function(key){
        return window.localStorage && window.localStorage.getItem(key);
    }

    // 通过AJAX请求读取js和css文件内容,使用队列控制js的执行顺序
    var rawQ = [];
    var monkeyLoader = {
        loadInjection: function(url,onload,bOrder){
            var iQ = rawQ.length;
            if(bOrder){
                var qScript = {key: null, response: null, onload: onload, done: false};
                rawQ[iQ] = qScript;
            }
            //有localstorage 缓存
            var ls = getLocalStorage(url);
            if(ls !== null){
                if(bOrder){
                    rawQ[iQ].response = ls;
                    rawQ[iQ].key = url;
                    monkeyLoader.injectScripts();
                }else{
                    defineCode(url, ls)
                    if(onload){
                        onload();
                    }
                }
            } else {
                var xhrObj = monkeyLoader.getXHROject();
                xhrObj.open('GET', url, true);
                xhrObj.send(null);
                xhrObj.onreadystatechange = function(){
                    if(xhrObj.readyState == 4){
                        if(xhrObj.status == 200){
                            setLocalStorage(url, xhrObj.responseText);
                            if(bOrder){
                                rawQ[iQ].response = xhrObj.responseText;
                                rawQ[iQ].key = url;
                                monkeyLoader.injectScripts();
                            }else{
                                defineCode(url, xhrObj.responseText)
                                if(onload){
                                    onload();
                                }
                            }
                        }
                    }
                }
            }
        },

        injectScripts: function(){
            var len = rawQ.length;
            //按顺序执行队列中的脚本
            for (var i = 0; i < len; i++) {
                var qScript = rawQ[i];
                //没有执行
                if(!qScript.done){
                    //没有加载完成
                    if(!qScript.response){
                        console.error("raw code lost or not load!");
                        //停止,等待加载完成, 由于脚本是按顺序添加到队列的,因此这里保证了脚本的执行顺序
                        break;
                    }else{//已经加载完成了
                        defineCode(qScript.key, qScript.response)
                        if(qScript.onload){
                            qScript.onload();
                        }
                        delete qScript.response;
                        qScript.done = true;
                    }
                }
            }
        },

        getXHROject: function(){
            //创建XMLHttpRequest对象
            var xmlhttp;
            if (window.XMLHttpRequest)
                {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                return xmlhttp;
        }
    };


    global.monkeyLoader = monkeyLoader.loadInjection;

})(this);

在页面中我们可以使用monkeyLoader加载自己的静态资源

monkeyLoader('a.js',callbackA,true);
monkeyLoader('b.js',callbackB,true);

其中monkeyLoader的三个参数分别是:资源文件路径、资源加载完成后的回调函数、以及资源是否需要有序。

3.基于fis3的localstorage集成解决方案

FIS3作为一个优秀的前端工程化解决方案,其在业界的影响无处不在。作为狼厂的一员,我们在项目中也大量使用FIS3,下面我们讨论一下如何将localstorage集成到FIS3的编译流程中。

我们的目的是将通过FIS3工程化处理后的文件列表传递到monkeyLoader,以实现基于localstorage的加载。FIS3提供了静态资源映射表,当某个文件包含字符 RESOURCE_MAP,就会用表结构数据替换此字符,而该表记录了各个原始静态资源经过工程化后的目标文件。基于此,我们只需要对monkeyLoader进行简单的封装即可。下面是具体的封装代码:

fisMonkeyLoader = function(resourceMap,resourceList){
        var pkgList = [];
        for(var idx in resourceList){
            var resourceItem = resourceList[idx];
            var pakItem = resourceMap['pkg'][resourceMap['res'][resourceItem]['pkg']]['uri'];
            pkgList[pakItem] =  1;
        }
        for(var pkgIdx in pkgList){
            monkeyLoader(pkgIdx,null,true);
        }

    }

而使用方法也很简单:

__inline('../js/lib/monkeyLoader.js');
fisMonkeyLoader(__RESOURCE_MAP__,[
    'css/animate.css',
    'css/app.css',
    'js/lib/zepto-1.1.3.min.js',
    'js/app/app.js',
]);

fisMonkeyLoader根据RESOURCE_MAP找到原始资源对应的经过工程化处理以后的资源,并通过monkeyLoader进行加载。

也许你已经注意到了,使用localstorage只能加载同域的js和css文件,因为我们没办法通过js代码读取其他域下的静态资源的内容。而且localstorage有大小限制,一般情况下每个域名下最多使用5M的本地存储空间,因此我们务必要处理超出大小限制是的异常情况,各个浏览器抛出的异常不太一致,这里给出了一个跨浏览器的异常检测方案

4.通过预加载解决首次加载过慢问题

针对目前常见的hybrid架构,我们可以通过让native客户端预加载webview从而提升首次速度。我们的实现是:客户端在启动时打开一个1px大小(用户不可见)的webview用于提前加载某些重要的页面,而这些页面通过上文中的localstorage机制存储了几乎全部js和css静态资源,从而得到webview秒开的体验。

Centos6.X下安装nodejs,提示gcc需要升级解决方法

node已经进入了v4版本,需要gcc4.8,而centos6.X由于版本过老,使用的是gcc4.4。因此通过网上大神推荐,可以通过安装绑定了gcc4.8的devtools-2来解决。具体解决方法如下:

PS:如今可以用node官网上直接编译好的包,或者通过nvm安装。

https://nodejs.org/dist/v4.2.5/node-v4.2.5-linux-x64.tar.gz

wget http://people.centos.org/tru/devtools-2/devtools-2.repo -O /etc/yum.repos.d/devtools-2.repo
yum install -y devtoolset-2-gcc devtoolset-2-binutils devtoolset-2-gcc-c++
scl enable devtoolset-2 bash

Centos 6.X下安装git最新版

  1. 给 CentOS 下载安装编译工具。
    $ sudo yum groupinstall “Development Tools”
  2. 安装 git 构建或执行时需要的其他组件。
    $ sudo yum install zlib-devel perl-ExtUtils-MakeMaker asciidoc xmlto openssl-devel
    3.检查是否有旧版本git,若有存在,卸载之
    $git –version
    $ yum remove git
  3. 下载 git 最新版本
    $ cd ~
    $ wget -O git.zip https://github.com/git/git/archive/master.zip
  4. 对git源文件进行解压
    $ unzip git.zip
    $ cd git-master
  5. 安装git
    $ autoconf
    $ ./configure
    $ make && make install
    6.定义link
    $ ln -s /usr/local/bin/git /usr/bin/
  6. 检查 git 版本
    $ git –version