JQuery之正则表达式
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之正则表达式的更多相关文章
- jQuery 之正则表达式篇
从本文开始,我将陆续的更新关于jQuery源代码的博客.首先,jQuery源代码分析一直是我的一个计划和追求.查看jQuery源代码,探索大牛们深邃的思想,精神的碰撞.Google 搜索不难发现,探索 ...
- jquery常用正则表达式
1.邮箱验证正则表达式:/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/ 2.手机验证正则表达式:/^ ...
- Jquery Validate 正则表达式实用验证代码
jQuery.validate 的正则验证功能,包括手机号码.电话号码.邮政编码.QQ号码.IP地址.字母和数字.中文的验证等. 手机号码验证 以下为引用内容: jQuery.validator.a ...
- 一些常用的jquery数字正则表达式
使用 <script type="text/javascript"> function validate(){ var reg = new RegExp("^ ...
- Jquery Validate 正则表达式实用验证代码常用的
jQuery.validate 的正则验证功能,包括手机号码.电话号码.邮政编码.QQ号码.IP地址.字母和数字.中文的验证等 手机号码验证 以下为引用内容: 代码如下: jQuery.validat ...
- [jQuery]常用正则表达式
验证网址:^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$电子 ...
- JQuery使用正则表达式验证手机号,邮箱,身份证(含有港澳台),网址
自己对正则验证也没系统用过,这次自己做个demo,一下子把这些全都用上了,下次有需要直接来拿了. 以下代码是在页面使用JQuery进行验证的,也有在后台进行验证的,可以试试,都一样的原理. 直接上代码 ...
- jquery:给正则表达式添加变量
http://www.2cto.com/kf/201402/277766.html 正则表达式普通用法:var checkString=/^.*\S+.*$/; //注意正则表达式没有引号 chec ...
- jquery的正则表达式
正则表达式 位置: ^ 开头 $ 结尾 次数: * 0或多个 + 1或多个 ? 0或1个 {n} 就是n个 {n,} 至少n个 {n,m} ...
随机推荐
- android 检测网络是否连接,或者GPS是否可用
很多android程序在打开时,检测网络是否连接,或者GPS是否可用: 1.网络是否连接(包括Wifi和移动网络) // 是否有可用网络 private boolean isNetworkConnec ...
- php实现文件下载
<?php $filename = '路径+实际文件名'; //文件的类型 header('Content-type: application/octstream'); //下载显示的名字 he ...
- 网络数据包收发流程(三):e1000网卡和DMA
一.硬件布局每个网卡(MAC)都有自己的专用DMA Engine,如上图的 TSEC 和 e1000 网卡intel82546.上图中的红色线就是以太网数据流,DMA与DDR打交道需要其他模块的协助, ...
- MetaPhlAn 2:宏基因组进化分析
描述 MetaPhlAn是分析从物种水平分辨率宏基因组鸟枪法测序数据的微生物群落(细菌,古细菌,真核细胞和病毒)的组成的计算工具.从版本2.0,MetaPhlAn还能够确定具体的菌株(在将样品含有先前 ...
- toad 9.6和toad 12.1工具使用比较
toad是我工作中使用最频繁的软件之一,阴错阳差的把2个版本都装到了电脑上,使用过程中逐渐发现2者的差异,特此做下记录,以便提示自己和其他有需要的人们.(随时更新中······)由于能力有限,难免会有 ...
- tomcat切割日志的shell脚本
#!/bin/bash cd /usr/tomcats/ d=`date +%F` m1=`date -d'1 month ago' +%F` ` do cd tomcat808"$i&qu ...
- 51nod-1732 婚姻介绍所(后缀数组)
题目大意:回答任意两个子串的最长公共前缀. 题目分析:后缀数组的模板题.但是输入输出都要外挂. 代码如下: # include<iostream> # include<cstdio& ...
- [Codeforces Round #275 (Div. 2)]B - Friends and Presents
最近一直在做 codeforces ,总觉得已经刷不动 BZOJ 了? ——真是弱喵 你看连 Div.2 的 B 题都要谢谢题解,不是闲就是傻 显然我没那么闲 ╮(╯_╰)╭ 我觉得这题的想法挺妙的~ ...
- 如果在代码中使用JS
protected void Page_Load(object sender, EventArgs e) { //获得.js文件 string myscript = ...
- MapReduce的输入输出
mapper和reducer的划分 mapper的数量等于输入文件被划分成的分块数,这取决于输入文件的大小以及文件块的大小.一个map操作只处理一个输入分片.运行作业的客户端通过调用getSplits ...