1.定义正则表达式

  • /.../  用于定义正则表达式
  • /.../g 表示全局匹配
  • /.../i 表示不区分大小写
  • /.../m 表示多行匹配

2.匹配正则表达式

非全局模式，不分组　　

var pattern = /^Java\w*/m;

var text = "JavaScript is more fun than JavaEE or JavaBeans!";

pattern.exec(text)

pattern.exec(text)

pattern.exec(text)
执行结果：
["JavaScript"]

["JavaScript"]

["JavaScript"]

非全局模式，分组

var pattern = /^Java(\w*)/m;

var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";

pattern.exec(text)

pattern.exec(text)

pattern.exec(text)
执行结果：
["JavaScript", "Script"]

["JavaScript", "Script"]

["JavaScript", "Script"]

全局模式，不分组

var pattern = /^Java\w*/gm

var text = "JavaScript is more fun than JavaEE or JavaBeans!";

pattern.exec(text)

pattern.exec(text)

pattern.exec(text)

pattern.exec(text)
执行结果：
["JavaScript"]

null

["JavaScript"]

null

全局模式，分组

var pattern = /^Java(\w*)/gm;

var text = "JavaScript is more fun than JavaEE or JavaBeans!";

pattern.exec(text)

pattern.exec(text)

pattern.exec(text)

pattern.exec(text)

执行结果：
["JavaScript", "Script"]

null

["JavaScript", "Script"]

null

3.

obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)
obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项，
　　　　　　　　　　　　　　　　　　$数字：匹配的第n个组内容；
　　　　　　　　　　　　　　　　　　$&：当前匹配的内容；
　　　　　　　　　　　　　　　　　　$`：位于匹配子串左侧的文本；
　　　　　　　　　　　　　　　　　　$'：位于匹配子串右侧的文本
　　　　　　　　　　　　　　　　　　$$：直接量$符号

var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";

text.match(/Java\w+/mg);
["JavaScript", "JavaEE", "JavaBeans"]
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";

text.replace(/Java\w+/mg,'Python');
"Python is more fun than

Python or Python!"
var text = "JavaScript is 8 more fun than 7 JavaEE or 6 JavaBeans!";

text.replace(/\d+/gm,'Python');
"JavaScript is Python more fun than Python JavaEE or Python JavaBeans!"
var text = "JavaScript is 8 more fun than 7 JavaEE or 6 JavaBeans!";

text.replace(/\d+/gm,'Python$&');
"JavaScript is Python8 more fun than Python7 JavaEE or Python6 JavaBeans!"
var text = "JavaScript is more fun than JavaEE or JavaBeans!";

text.replace(/Java/,'==Python==$\'');

"==Python==Script is more fun than JavaEE or JavaBeans!Script is more fun than JavaEE or JavaBeans!"

text.replace(/Java/,'==Python==$`');

"==Python==Script is more fun than JavaEE or JavaBeans!"

JQuery实现滚动菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .body{
            margin: 0 auto;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .pg-header{
            height: 50px;
            width: 100%;
            background-color: blue;
        }
        .pg-header .nav{
            line-height: 50px;
            padding: 0 400px;
        }

        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: white;
            text-decoration: none; /*去掉<a>标签的下划线*/
            /*width: 60px;*/
            padding:0 20px 0 20px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{

        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top: 10px;
        }
        .pg-body .catalog .catalog-item{
            /*color: #fff;*/
            height: 10px;
            padding: 20px;
            /**/
        }
        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color:orangered ;
        }

        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            top: 60px;
            height: 500px;
        }

    </style>
</head>
<body class="body">
    <div class="pg-header">
        <div class="nav">
            <ul>
                <li>
                    <a  href="#">首页</a>
                </li>
                <li>
                    <a  href="#">功能一</a>
                </li>
                <li>
                    <a  href="#">功能二</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第一章</a></div>
                <div class="catalog-item" auto-to="function2"><a>第二章</a></div>
                <div class="catalog-item" auto-to="function3"><a>第三章</a></div>
            </div>
            <div class="content">
                <div menu="function1" class="section" style='background-color:green';><h1>内容一</h1></div>
                <div menu="function2" class="section" style='background-color:yellow';><h1>内容二</h1></div>
                <div menu="function3" class="section" style='background-color:red';><h1>内容三</h1></div>
            </div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            Init();
        });

        function Init(){
            $(window).scroll(function() {
                var scrollTop = $(window).scrollTop();
                if (scrollTop > 50) {
                    $('.catalog').addClass('fixed');
                } else {
                    $('.catalog').removeClass('fixed');
                }

                $('.content').children().each(function () {
                    var offSet = $(this).offset();
                    var height = $(this).height();
                    if (scrollTop > offSet.top && scrollTop < offSet.top + height) {
                        var target = $(this).attr('menu');
//                        console.log(target);
//                        console.log('aaaaa');
                        $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
//                        return false;

                        var docHeight = $(document).height();
                        var winHeight = $(window).height();
                        // 如果，滚轮到达底部，则显示最后一个菜单
                        if(docHeight == winHeight+scrollTop)
                        {
                            $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
                        }else{
                            var target = $(this).attr('menu');
                            $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
                        }
                        return false;
                    }
                });
            });
        }
    </script>
</body>
</html>

JQuery之正则表达式的更多相关文章

  1. jQuery 之正则表达式篇

    从本文开始,我将陆续的更新关于jQuery源代码的博客.首先,jQuery源代码分析一直是我的一个计划和追求.查看jQuery源代码,探索大牛们深邃的思想,精神的碰撞.Google 搜索不难发现,探索 ...

  2. jquery常用正则表达式

    1.邮箱验证正则表达式:/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/ 2.手机验证正则表达式:/^ ...

  3. Jquery Validate 正则表达式实用验证代码

    jQuery.validate 的正则验证功能,包括手机号码.电话号码.邮政编码.QQ号码.IP地址.字母和数字.中文的验证等. 手机号码验证 以下为引用内容:  jQuery.validator.a ...

  4. 一些常用的jquery数字正则表达式

    使用 <script type="text/javascript"> function validate(){ var reg = new RegExp("^ ...

  5. Jquery Validate 正则表达式实用验证代码常用的

    jQuery.validate 的正则验证功能,包括手机号码.电话号码.邮政编码.QQ号码.IP地址.字母和数字.中文的验证等 手机号码验证 以下为引用内容: 代码如下: jQuery.validat ...

  6. [jQuery]常用正则表达式

    验证网址:^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$电子 ...

  7. JQuery使用正则表达式验证手机号，邮箱，身份证（含有港澳台），网址

    自己对正则验证也没系统用过,这次自己做个demo,一下子把这些全都用上了,下次有需要直接来拿了. 以下代码是在页面使用JQuery进行验证的,也有在后台进行验证的,可以试试,都一样的原理. 直接上代码 ...

  8. jquery:给正则表达式添加变量

    http://www.2cto.com/kf/201402/277766.html 正则表达式普通用法:var checkString=/^.*\S+.*$/;  //注意正则表达式没有引号 chec ...

  9. jquery的正则表达式

    正则表达式 位置: ^      开头 $      结尾 次数: *      0或多个 +      1或多个 ?      0或1个 {n}     就是n个 {n,}   至少n个 {n,m} ...

随机推荐

  1. PAT (Basic Level) Practise：1028. 人口普查

    [题目链接] 某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的——假设已知镇上没有超过200岁的老人,而今天是 ...

  2. （基础篇）php中理解print EOT分界符和echo EOT的用法区别

    html与php编写中echo可以同时输出多个字符串,并不需要圆括号. print只可以同时输出一个字符串,需要圆括号. print的用法和C语言很像,所以会对输出内容里的%做特殊解释. echo无返 ...

  3. Recyclerview使用系列教材

    Recylerview越来越多的人使用,本人录制了一套课程,欢迎大家观看,录制的比较仓促,第一课讲解的课程目录有点问题,请大家谅解,目录请看视频外该课程介绍的内容即可. 该课程付费课程包含: 1-Re ...

  4. ssh隧道（端口转发）

    本地转发: ssh -Nf -L [bind_address:]port:host:hostport sshServer -Nf 后台运行 -L 本地转发 [bind_address] 绑定本地地址, ...

  5. 我用工具怎么连接不上mysql数据库的? MySql access denied for user错误

    MySql access denied for user错误 方法/步骤   MySql远程连接时的"access denied for user **@**"错误,搞的我很头大, ...

  6. [hdu 2686]Matrix

    网上说这道题的题解是费用流 我粗粗看了一下数据范围,觉得出题者似乎是让我们用 “大(d)屁(p)” 的样子,为了尊重出题人,我还是写一写吧喵~ 首先,一条回路可以看做是两条路齐头并进,这是 大屁 和 ...

  7. Qt之QComboBox（基本应用、代理设置）(转)

    QComboBox下拉列表比较常用,用户可以通过选择不同的选项来实现不同的操作,如何实现自己的下拉列表呢? 很多人在问QComboBox如何设置选项的高度.代理等一些问题!今天就在此分享一下自己的一些 ...

  8. UIAutomator定位Android控件的方法

    UIAutomator各种控件定位的方法. 1. 背景 使用SDK自带的NotePad应用,尝试去获得在NotesList那个Activity里的Menu Options上面的那个Add note菜单 ...

  9. 读文档readarx.chm

    readarx.chm <Tips and Techniques> Incremented AutoCAD Registry Number Ideally, a change of reg ...

  10. Silverlight管理系统源码（用于开发ERP、OA、CRM、HR、进销存、财务等系统之用）

    Silverlight大型管理系统源代码(支持创建ERP.OA.CRM.HR.进销存.财务等系统之用) 可用于开发以下系统 SilverlightERP SilverlightCRM Silverli ...