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. android 检测网络是否连接,或者GPS是否可用

    很多android程序在打开时,检测网络是否连接,或者GPS是否可用: 1.网络是否连接(包括Wifi和移动网络) // 是否有可用网络 private boolean isNetworkConnec ...

  2. php实现文件下载

    <?php $filename = '路径+实际文件名'; //文件的类型 header('Content-type: application/octstream'); //下载显示的名字 he ...

  3. 网络数据包收发流程(三):e1000网卡和DMA

    一.硬件布局每个网卡(MAC)都有自己的专用DMA Engine,如上图的 TSEC 和 e1000 网卡intel82546.上图中的红色线就是以太网数据流,DMA与DDR打交道需要其他模块的协助, ...

  4. MetaPhlAn 2:宏基因组进化分析

    描述 MetaPhlAn是分析从物种水平分辨率宏基因组鸟枪法测序数据的微生物群落(细菌,古细菌,真核细胞和病毒)的组成的计算工具.从版本2.0,MetaPhlAn还能够确定具体的菌株(在将样品含有先前 ...

  5. toad 9.6和toad 12.1工具使用比较

    toad是我工作中使用最频繁的软件之一,阴错阳差的把2个版本都装到了电脑上,使用过程中逐渐发现2者的差异,特此做下记录,以便提示自己和其他有需要的人们.(随时更新中······)由于能力有限,难免会有 ...

  6. tomcat切割日志的shell脚本

    #!/bin/bash cd /usr/tomcats/ d=`date +%F` m1=`date -d'1 month ago' +%F` ` do cd tomcat808"$i&qu ...

  7. 51nod-1732 婚姻介绍所(后缀数组)

    题目大意:回答任意两个子串的最长公共前缀. 题目分析:后缀数组的模板题.但是输入输出都要外挂. 代码如下: # include<iostream> # include<cstdio& ...

  8. [Codeforces Round #275 (Div. 2)]B - Friends and Presents

    最近一直在做 codeforces ,总觉得已经刷不动 BZOJ 了? ——真是弱喵 你看连 Div.2 的 B 题都要谢谢题解,不是闲就是傻 显然我没那么闲 ╮(╯_╰)╭ 我觉得这题的想法挺妙的~ ...

  9. 如果在代码中使用JS

    protected void Page_Load(object sender, EventArgs e)    {        //获得.js文件        string myscript = ...

  10. MapReduce的输入输出

    mapper和reducer的划分 mapper的数量等于输入文件被划分成的分块数,这取决于输入文件的大小以及文件块的大小.一个map操作只处理一个输入分片.运行作业的客户端通过调用getSplits ...