由正则表达式到jQuery选择器,在vue项目中的使用详解

1.正则表达式:我的理解就是,记录文本规则的代码,我主要运用它在.net表单验证中。

写在最前面

  我在上一篇博客里谈到了javascript里面的String类的
replace方法的一些问题,今天我真正的学习了javascript里的正则表达式的用法(以前总是不屑学习这个技术,现在发现编程里字符处理的技术还是相当的重要,应用领域很广泛而且也有一定难度,比如jQuery源码里面就有很多正则表达式的使用),对于String类里
s.replace(regex,function(){})的理解更清晰,以前不清晰的原因是没有学习好正则表达式。我写了下面的测试代码:

2.学习正则表达是的工具下载链接:

拥有全球数据库国内好像就只有百度地图有,高德、搜狗、腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap。

//下面代码请在装有firebug的firefox里面运行  function myReplace()  {   var reg = /%[1-4]/g;   var data = "And the %1 want to know whose %2 you %3";      while(1==1)   {    var val = reg.exec(data);    if (val == null)    {     break;    }else{     console.log(val);    }   }      reg = /CJ[0-9]{2}/g;   data = 'CJ9080,CJ8976,CJ12919,CJ8765';   while(1==1)   {    var val = reg.exec(data);    if (val == null)    {     break;    }else{     console.log(val);    }   }     }  myReplace();  

3.工具使用说明:

bing Map 使用教程(基础)

结果如下:

 

参考文档:bing Map 官方教程

图片 1

图片 2

bing Map 初始化

  其实String类的s.replace(regex,function(){})用法就是了Regex的exec()方法,只不过当正则式为[1-4]这样格式的时候,replace方法会在遍历字符串时候把里面的1-4的值都取出来,放到function的argument[1]里面。

4.正则表达式有多种不同的风格。下表是在PCRE中元字符及其在正则表达式上下文中的行为的一个完整列表:

引入bing map资源

  今天抽时间读了一下jQuery的源代码,jQuery说白了就是一个选择器,例如我们常看到这样的写法:

 

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]' async defer></script>

  

字符 描述
\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如,“n”匹配字符“n”。“\n”匹配一个换行符。序列“\\”匹配“\”而“\(”则匹配“(”。
^ 匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性,^也匹配“\n”或“\r”之后的位置。
$ 匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性,$也匹配“\n”或“\r”之前的位置。
* 匹配前面的子表达式零次或多次。例如,zo*能匹配“z”以及“zoo”。*等价于{0,}。
+ 匹配前面的子表达式一次或多次。例如,“zo+”能匹配“zo”以及“zoo”,但不能匹配“z”。+等价于{1,}。
? 匹配前面的子表达式零次或一次。例如,“do(es)?”可以匹配“do”或“does”中的“do”。?等价于{0,1}。
{n} n是一个非负整数。匹配确定的n次。例如,“o{2}”不能匹配“Bob”中的“o”,但是能匹配“food”中的两个o。
{n,} n是一个非负整数。至少匹配n次。例如,“o{2,}”不能匹配“Bob”中的“o”,但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o*”。
{n,m} m和n均为非负整数,其中n<=m。最少匹配n次且最多匹配m次。例如,“o{1,3}”将匹配“fooooood”中的前三个o。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。
? 当该字符紧跟在任何一个其他限制符(*,+,?,{n},{n,},{n,m})后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串“oooo”,“o+?”将匹配单个“o”,而“o+”将匹配所有“o”。
. 匹配除“\n”之外的任何单个字符。要匹配包括“\n”在内的任何字符,请使用像“[.\n]”的模式。
(pattern) 匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到,在VBScript中使用SubMatches集合,在JScript中则使用$0…$9属性。要匹配圆括号字符,请使用“\(”或“\)”。
(?:pattern) 匹配pattern但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用或字符“(|)”来组合一个模式的各个部分是很有用。例如“industr(?:y|ies)”就是一个比“industry|industries”更简略的表达式。
(?=pattern) 正向预查,在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如,“Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”,但不能匹配“Windows3.1”中的“Windows”。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。
(?!pattern) 负向预查,在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如“Windows(?!95|98|NT|2000)”能匹配“Windows3.1”中的“Windows”,但不能匹配“Windows2000”中的“Windows”。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始
x|y 匹配x或y。例如,“z|food”能匹配“z”或“food”。“(z|f)ood”则匹配“zood”或“food”。
[xyz] 字符集合。匹配所包含的任意一个字符。例如,“[abc]”可以匹配“plain”中的“a”。
[^xyz] 负值字符集合。匹配未包含的任意字符。例如,“[^abc]”可以匹配“plain”中的“p”。
[a-z] 字符范围。匹配指定范围内的任意字符。例如,“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如,“[^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符。
\b 匹配一个单词边界,也就是指单词和空格间的位置。例如,“er\b”可以匹配“never”中的“er”,但不能匹配“verb”中的“er”。
\B 匹配非单词边界。“er\B”能匹配“verb”中的“er”,但不能匹配“never”中的“er”。
\cx 匹配由x指明的控制字符。例如,\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则,将c视为一个原义的“c”字符。
\d 匹配一个数字字符。等价于[0-9]。
\D 匹配一个非数字字符。等价于[^0-9]。
\f 匹配一个换页符。等价于\x0c和\cL。
\n 匹配一个换行符。等价于\x0a和\cJ。
\r 匹配一个回车符。等价于\x0d和\cM。
\s 匹配任何空白字符,包括空格、制表符、换页符等等。等价于[\f\n\r\t\v]。
\S 匹配任何非空白字符。等价于[^\f\n\r\t\v]。
\t 匹配一个制表符。等价于\x09和\cI。
\v 匹配一个垂直制表符。等价于\x0b和\cK。
\w 匹配包括下划线的任何单词字符。等价于“[A-Za-z0-9_]”。
\W 匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。
\xn 匹配n,其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如,“\x41”匹配“A”。“\x041”则等价于“\x04&1”。正则表达式中可以使用ASCII编码。.
\num 匹配num,其中num是一个正整数。对所获取的匹配的引用。例如,“(.)\1”匹配两个连续的相同字符。
\n 标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式,则n为向后引用。否则,如果n为八进制数字(0-7),则n为一个八进制转义值。
\nm 标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式,则nm为向后引用。如果\nm之前至少有n个获取,则n为一个后跟文字m的向后引用。如果前面的条件都不满足,若n和m均为八进制数字(0-7),则\nm将匹配八进制转义值nm。
\nml 如果n为八进制数字(0-3),且m和l均为八进制数字(0-7),则匹配八进制转义值nml。
\un 匹配n,其中n是一个用四个十六进制数字表示的Unicode字符。例如,\u00A9匹配版权符号(?)。

初始化地图

jQuery('#userId').val();  jQuery('div').text();  

 

<div id="myMap"></div>
<script type='text/javascript'>
 function GetMap()
 {
  var map = new Microsoft.Maps.Map('#myMap');
  //Add your post map load code here.
 }
</script>

  

5.正则表达式的常用匹配

设置地图控制参数

上面代码就是在使用jQuery选择器,jQuery选择器实现了下列四个方法:

1.匹配非负整数(正整数 + 0): ^\d+$  
2.匹配正整数 : ^[0-9]*[1-9][0-9]*$

常用控制参数
branch
加载地图sdk的哪个分支:release(默认)、experimental
callback
地图控制脚本加载完成后的回调(默认:GetMap)
key
用户使用的userKey(详情)
setLang
指定用于地图标签和导航控件的语言
常用:中国大陆(zh-CN)、中国香港(zh-HK)、简体中文(zh-Hans)、中国台湾(zh-TW)、英文-英国(en-GB)、英文-美国(en-US)
setMkt(详情)
UR(详情)

jQuery( expression, context )   Returns: jQuery  这个函数接收一个CSS选择器的字符串,然后用这个字符串去匹配一组元素。   This function accepts a string containing a CSS selector which is then used to match a set of elements.  jQuery( html, ownerDocument )   Returns: jQuery  根据HTML原始字符串动态创建Dom元素.  Create DOM elements on-the-fly from the provided String of raw HTML.  jQuery( elements )   Returns: jQuery  将一个或多个Dom对象封装jQuery函数功能(即封装为jQuery包装集)  Wrap jQuery functionality around a single or multiple DOM Element(s).  jQuery( callback )   Returns: jQuery  $(document).ready()的简写方式  A shorthand for $(document).ready().  上面摘选自jQuery官方手册。  

3.匹配非正整数(负整数 + 0): ^((-\d+)|(0+))$  
4.匹配负整数:^-[0-9]*[1-9][0-9]*$  

给bing map添加地图事件(参考)

在选择器方法里面使用到了这样一个正则表达式:

5.匹配整数: ^-?\d+$    
6.匹配非负浮点数(正浮点数 + 0): ^\d+(\.\d+)?$  

// 核心代码-demo
 Microsoft.Maps.Events.addHandler(你的地图名称, 触发地图事件名称, function() { 触发的事件 });
 // 常用实例
 //Add view change events to the map.
 // 视图更改事件
 Microsoft.Maps.Events.addHandler(map, 'viewchangestart', function () { highlight('mapViewChangeStart'); });
 Microsoft.Maps.Events.addHandler(map, 'viewchange', function () { highlight('mapViewChange'); });
 Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function () { highlight('mapViewChangEnd'); });
 //Add mouse events to the map.
 // 鼠标事件
 Microsoft.Maps.Events.addHandler(map, 'click', function () { highlight('mapClick'); });
 Microsoft.Maps.Events.addHandler(map, 'dblclick', function () { highlight('mapDblClick'); });
 Microsoft.Maps.Events.addHandler(map, 'rightclick', function () { highlight('mapRightClick'); });
 Microsoft.Maps.Events.addHandler(map, 'mousedown', function () { highlight('mapMousedown'); });
 Microsoft.Maps.Events.addHandler(map, 'mouseout', function () { highlight('mapMouseout'); });
 Microsoft.Maps.Events.addHandler(map, 'mouseover', function () { highlight('mapMouseover'); });
 Microsoft.Maps.Events.addHandler(map, 'mouseup', function () { highlight('mapMouseup'); });
 Microsoft.Maps.Events.addHandler(map, 'mousewheel', function () { highlight('mapMousewheel'); });
 //Add addition map event handlers
 Microsoft.Maps.Events.addHandler(map, 'maptypechanged', function () { highlight('maptypechanged'); });
quickExpr = /^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/  

7.匹配正浮点数:
^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$  
8.匹配非正浮点数(负浮点数 + 0):
^((-\d+(\.\d+)?)|(0+(\.0+)?))$  \

bing Map 添加图钉(详情)

这个正则表达式都是在我们传入jQuery里面第一个参数是string时候会调用,具体点就是当你不是传入$(“”), $(null), $(undefined)或者$(DOMElement)时候就会使用到这个正则表达式。因此我想在这里好好分析下这两个正则表达式。

9.匹配负浮点数:
^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$  
10.匹配浮点数 : ^(-?\d+)(\.\d+)?$  

基本图钉示例

首先补充下正则表达式的基础知识:

11.匹配由26个英文字母组成的字符串^[A-Za-z]+$  
12.匹配由26个英文字母的大写组成的字符串 : ^[A-Z]+$  

function GetMap() {
 var map = new Microsoft.Maps.Map('#myMap', {
  credentials: 'Your Bing Maps Key',
  center: new Microsoft.Maps.Location(47.6149, -122.1941)
 });
 var center = map.getCenter();
 //Create custom Pushpin
 // 创建一个图钉
 var pin = new Microsoft.Maps.Pushpin(center, {
  // demo_1
  title: 'Microsoft', // 图钉的标题
  subTitle: 'City Center', // 图钉主体文字
  text: '1' // 图钉内的文字
  // demo_2
  color: 'red', // 纯色图钉
 });
 //Add the pushpin to the map
 map.entities.push(pin);
}

元字符

描述

.点

匹配任何单个字符。例如正则表达式r.t匹配这些字符串:rat、rut、r t,但是不匹配root。

$

匹配行结束符。例如正则表达式weasel$ 能够匹配字符串"He’s a weasel"的末尾 
但是不能匹配字符串"They are a bunch of weasels."

^

匹配一行的开始。例如正则表达式^When in能够匹配字符串"When in the course of human events"的开始,但是不能匹配"What and When in the"

*

匹配0或多个正好在它之前的那个字符。例如正则表达式。*意味着能够匹配任意数量的任何字符。

\

这是引用符,用来将这里列出的这些元字符当作普通的字符来进行匹配。例如正则表达式\$被用来匹配美元符号,而不是行尾,类似的,正则表达式\.用来匹配点字符,而不是任何字符的通配符。

[ ] 
[c1-c2] 
[^c1-c2]

匹配括号中的任何一个字符。例如正则表达式r[aou]t匹配rat、rot和rut,但是不匹配ret。可以在括号中使用连字符-来指定字符的区间,例如正则表达式[0-9]可以匹配任何数字字符;还可以制定多个区间,例如正则表达式[A-Za-z]可以匹配任何大小写字母。另一个重要的用法是“排除”,要想匹配除了指定区间之外的字符——也就是所谓的补集——在左边的括号和第一个字符之间使用^字符,例如正则表达式[^269A-Z] 将匹配除了2、6、9和所有大写字母之外的任何字符。

\< \>

匹配词(word)的开始(\<)和结束(\>)。例如正则表达式\<the\>能够匹配字符串"for the wise"中的"the",但是不能匹配字符串"otherwise"中的"the"。注意:这个元字符不是所有的软件都支持的。

\( \)

将 \( 和 \) 之间的表达式定义为“组”(group),并且将匹配这个表达式的字符保存到一个临时区域(一个正则表达式中最多可以保存9个),它们可以用 \1 到\9 的符号来引用。

|

将两个匹配条件进行逻辑“或”(Or)运算。例如正则表达式(him|her) 匹配"it belongs to him"和"it belongs to her",但是不能匹配"it belongs to them."。注意:这个元字符不是所有的软件都支持的。

+

匹配1或多个正好在它之前的那个字符。例如正则表达式9+匹配9、99、999等。注意:这个元字符不是所有的软件都支持的。

?

匹配0或1个正好在它之前的那个字符。注意:这个元字符不是所有的软件都支持的。

{i} 
{i,j}

匹配指定数目的字符,这些字符是在它之前的表达式定义的。例如正则表达式A[0-9]{3} 能够匹配字符"A"后面跟着正好3个数字字符的串,例如A123、A348等,但是不匹配A1234。而正则表达式[0-9]{4,6} 匹配连续的任意4个、5个或者6个数字字符。注意:这个元字符不是所有的软件都支持的。

\s

匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [?\f\n\r\t\v]。

\w

匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]‘。

\W

匹配任何非单词字符。等价于 ‘[^A-Za-z0-9_]‘。

13.匹配由26个英文字母的小写组成的字符串: ^[a-z]+$  
14.匹配由数字和26个英文字母组成的字符串: ^[A-Za-z0-9]+$  

demo_1

正则表达式quickExpr =
/^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/,可以由 | 分为两个部分,前一个部分是^[^<]*(<[\w\W]+>)[^>]*$,这个有开始符号^和结束符号$,该表达式按顺序分析:

15.匹配由数字、26个英文字母或者下划线组成的字符串: ^\w+$  
16.匹配中文字符的正则表达式: [\u4e00-\u9fa5] 

图片 3 

1.    
[^<]*—-标示字符的头部可以是除了<的任意字符或者是干脆没有字符

17.匹配双字节字符(包括汉字在内):[^\x00-\xff]
18.匹配空行的正则表达式:\n[\s| ]*\r

demo_2

2.    
(<[\w\W]+>)—–这个表示字符串里要包含用<>包含的字符,例如<p>,<div>等等都是符合要求的

发表评论

电子邮件地址不会被公开。 必填项已用*标注