搜索里的正则表达式,小白速看

正则表达式提供了一个灵活方便的方式来识别字符、单词或字符序列。javascript里面通过RegExp对象来运用正则表达式。没有找到一个适合自己的中文资料,都说得不够细,写下这些供以后查阅,如果有价值也可方便他人,话说好记性不烂笔头
:)

一、基本用法

这些天要帮人改版网站,说是改版,其实是叫我把别人网站里的界面原物搬下来。用Teleport
pro对某站点整站下载之后,用Dreamweaver打开,发现代码里有大量的冗余代码,比如:

语法:

var re = RegExp(pattern [, flags]);
var re = new RegExp(pattern [, flags]);
var re = /pattern/flags;

你可以用 v-model 指令在表单 <input> 及 <textarea>
元素上创建双向数据绑定。

<图片 1 tppabs=”” style=”font-size:12px;”>

参数:

pattern 必须.正则表达式。

Note:要创建一个有实际意义的正则表达式,这个参数一般是必须的。当然如果实例化时不带这个参数,也是没有问题的,只不过实际意义不大。

flags 可选.正则的标志,可为下面的何意组合。

g 全局匹配。
i 忽略大小写。
m 多行匹配。

Note:FireFox在FireFox3以后有一个新的flagy

但 v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

中的tppabs标签(估计是Teleport pro为了方便其自身更新时加上的标记)

说明:

RegExp(pattern[,flags])这个够造很少用也很少见,ECMA
262里也确实提到了,关键是各浏览器也都支持,作为前端没有理由不了解。它的实例化过程是:如果pattern是个一个RegExp对象了,且flags为undefined,返回这个对象;其它的按new
RegExp(pattern[,flags])的过程处理。

new RegExp(pattern[,flags])
常见形式之一,当pattern为动态时常用这种方式创建RegExp对象。
当pattern为一个RegExp对象,而flag不为undefined的时候,会抛出一个TypeErro的错误。如果pattern为string,由于
\
在string中起着转义的意思,如果正则中要用到\,那就得在string中用\\代替。如:new
RegExp(“\\d+”,g);

v-model 会忽略所有表单元素的 value、checked、selected
特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript
在组件的 data 选项中声明初始值。

<a href=”javascript:if(confirm(‘  \n\n文件并未依 Teleport Pro 取回,因为 服务器报告因为错误的发生导致无法读取。  \n\n你要从服务器上打开它吗?’))window.location=”” >

特殊字符:

Note:这样的分类和一般的不同,主要是自己的解理和方便自己,如果对您引起困扰十分抱歉。

 

Character

Description

断言(Assertion)

^

指明匹配必须开始于输入串的头(即头匹配)。如果指明了多行标识(即m),匹配可以从
\r 或 \n字符后开始。例:/^m/ 不匹配’woman’,但是匹配’man’。

$

指明匹配必须在输入串结束的地方结束(即尾匹配)。如果指明了多行标识(即m),匹配可以
\r或 \n字符结束。例:/m/ 不匹配 ‘format’ ,但是匹配 ‘form‘。

\b

匹配单词边界,不是一个退格![\b]匹配一个退格。一个单词边界可是一个单词的开始处也可是一个单词的结束处,它是一个单词和一个非单词两者间的位置。例:模式:/\ba/g,输入:’an
abonlaysea’。

\B

匹配一个非单词边界。例:模式:/\Ba/g,输入:’an abonlyasea‘。

pattern1(?=pattern2)

匹配pattern1 仅当patttern1后面紧跟着pattern2。例:/a(?=b)/g 匹配 ‘a’
仅当 ‘a’字母后面紧跟着
‘b’。模式:/a(?=b)/g,输入:’abracadabra’。

pattern1(?!pattern2)

匹配pattern1 仅当patttern1后面不跟着pattern2。例:/a(?=b)/g 匹配 ‘a’
仅当 ‘a’字母后面不跟着
‘b’。模式:/a(?=b)/g,输入:’abracadabra‘。

量词

*

匹配前面的子表达式零次或多次 。等价于{0,}。例:模式: /b*a/g ,输入:
‘hubba and bubba‘。

+

匹配前面的子表达式一次或多次 。等价于{1,}。例:模式: /b+a/g ,输入:
‘hubba and bubba‘。

?

匹配前面的子表达式零次或一次 。等价于{0,1}。例:模式: /b?a/g, 输入:
‘hubba and bubba‘.

{n}

n为非负整数。精确匹配前面的子表达式n次。例:模式:/9{2}g/,输入:’79799799979999’。

{n,}

n为非负整数。匹配前面子表达式至少出现n次。例:模式: /9{2,}/g , 输入:
‘79799799979999‘。

{n,m}

n和m都为非负整数,且n<=m。前面子表达式最少出现n次最多出现m次。例:模式:
/9{2,3}/g , 输入: ‘79799799979999’。

预定类

\d

匹配一个数字。等价于[0-9]。例: 模式:/\d/g ,输入:
‘a1b23c’。

\D

匹配一个非数字。等价于[^0-9]。例:模式:/\D/g ,输入:
a1b23c‘。

\w

匹配一个字母数字或下画线。等价于:[a-zA-Z0-9_]。例:模式:/\w+/g
,输入: ‘5+23‘。

\W

匹配一个非字母数额和下画线。等价于[^A-Za-z0-9_] 。例:模式:
/\W+/g,输入: ‘5+23’。

\s

匹配任何的空白字符。例:模式: /s\sa/g ,输入: ‘Thats all’。

\S

匹配任何非空白字符。例:模式: /\Sa/g ,输入: ‘Thats all’。

控制符

\f

匹配一个换页符。等价于:\x0c。(换页符会引起打印机前进一页长度或到下一页的顶部。)

\n

匹配一个换行符。等价于 \x0a。

\r

匹配一个回车符。等价于 \x0d。

\t

匹配一个制表符。等价于 \x09。

\v

匹配一个垂直制表符。等价于 \x0b。

其它

\

\ 字符有两种不同的意思,取决于跟在它后面的字符。

1、后面跟字母,这表示一个特殊字符。例:/d/ 匹配 ‘a’字符,而/\d/
则匹配一个数字。一些字母和 \ 一起用没用意义。将 \
和这些字符一起用会引起错误。

2、后跟特殊字符,这表示这个字符本身。例:/a*/ 匹配任意数目的a,但是
/a\*/ 只匹配 ‘a*’。

.

(点号)匹配任意单字符除换行符(\n,\r,\u2028,\u2029)外。用[\s\S]
匹配任意字符包括换行符。例:模式: /.s/g ,输入: ‘sail the
seas‘.

(pattern)

匹配pattern并存储这个匹配(叫作”捕获括号”、“捕获子表达式”或“括号子表达式”)

(?:pattern)

匹配pattern不存储这个匹配

pattern1|pattern2

匹配pattern1或pattern2。例:模式: /(a|r)/g ,输入 : ‘agreed’。

[xyz]

一个字符集。匹配括号中的任意一个字符。例:模式:/[adr]/g
,输入:’agreed‘。

[^xyz]

一个否定字符集。匹配除括号内的任意字符。例:模式: /[^adr]/g ,输入:
‘agreed’。

[a-z]

一个字符范围。匹配字符范围内的任意一个字符。

[^a-z]

一个否定的字符范围。匹配除这个字符范围外的任意字符。

\cx

x是一个从A-Z或a-z的字符。匹配控制字符。例: \cI 匹配 Control-I (tab).

\n

n是个正整数。如果在此之前整个正则表达式包含至少n个捕获子表达式,\n
指向前面第n个被捕获的子表达式。否则n必须是一个8进制码。例:模式::
/(\d+)\+\1/g ,输入: ’23+12, 23+23, 12+12+23’。

\0

匹配一个NULL字符。

\ooo

匹配一个8进制码为ooo的字符。例(’+’ 的8进制码为\053):模式: /\053/g
,输入:’23+12’。

\xhh

匹配一个16进制码为hh的字符。例(‘+’ 的16进制码为
\x2B):模式:/\x2B/g,输入: ’23+12’。

\uhhhh

匹配一个Unicode码为hhhh的字符。例(‘+’ 的Unicode码为
\u002B):模式:/\u002B/g,输入: ’23+12’。

一组代码,看完text、textarea、radio、checkbox、select的基本用法:

中的javascript代码
如此多的代码最好的办法就是匹配替换了。网上搜索了一下,发现竟然有位老兄遇到跟我一样的问题,按照他的办法,可以通过Dreamweaver的正则表达式匹配进行替换。在Dreamweaver的帮助里可以找到正则表达式中使用的特殊字符列表。
根据列表写出上面两句冗余代码的匹配是:
匹配tppabs标签:
\btppabs=”h[^”]*”
匹配javascript代码:
htt[^”]*”
然后再根据自己的需要替换就行好了。真是很方便!

属性:

Property Support Description
$1…$9

这些属性被exec和test方法执行时填充,用于指向“捕获子表达式”的匹配子串。

属性$1…$9都是静态的,不能通过RegExp的实例进行存取,只允许RegExp.$1…..RegExp.$9。他们只包含最后exec或test运行后的一些结果。因此,当同时有几个RegExp实例一起使用时,$1….$9就不能提供完美功能了。这时,避免使用test方法,用exec方法代替。exec方法返回的数组也包含与这些“捕获子表达式”相匹配的子串。

global

返回一个Boolean值, 指明global标志(g)的状态。如果创建RegExp对象实例时设置g标志,该属性 返回True,否则返回False。

Note:些前见有人说这个值的默认值为-1,这个说法应该是理解错了。ECMA中如是描述,globa为Boolean值,如果有g标志则global为true,否则为false.

ignoreCase

返回一个Boolean值, 指明ignoreCase标志(i)的状态。如果创建RegExp对象实例时设置i标志,该属性 返回True,否则返回False。

index

这个属性被exec和test方法执行时填充 ,用于包含基于0的匹配串的开始位置。这个index属性是静态的,不能通过RegExp实例化对象存取,只能通过RegExp.index存取。RegExp.index仅包含最后一次关于exec或test运行的信息。跨浏览,用exec方法返回的数组的index属性。

input

这个属性被exec和test方法执行时填充,用于包含最后一次的搜索字符串。input属性是静态的,不能通过RegExp实例对象存取,只能过RegExp.index存取。RegExp.input仅包含最后一次关于exec或test运行的信息。跨浏览,用exec方法返回的数组的input属性。

lastIndex

这个属性被exec和test方法执行时填充 ,用于包含基于0的匹配串的结束位置。可以通过RegExp实例对象存取。RegExp.lastIndex属性只有IE支持。

multiline

返回一个Boolean值, 指明multiline标志(m)的状态。如果创建RegExp对象实例时设置m标志,该属性 返回True,否则返回False。

source

返回这个正则表达式源码串。

prototype

返回RegExp.prototype对象引用。不能过能实例对象访问,只通过RegExp.prototype。

<div id="app7">
  <input type="text" v-model="message"><label>{{message}}</label></br>
  <textarea v-model="message1"></textarea><label>{{message1}}</label></br>
  <!--单选按钮在单独使用时,不需要v-model,直接使用v-bind 绑定一个布尔类型的值,为真时选中,为否时不选-->
  <input type="radio" :checked="picked"><label>单选按钮</label></br>
  <!--如果是组合使用来实现互斥选择的效果,就需要v-model 配合value来使用:-->
  <input type="radio" v-model="sex" value="boy"><label>男</label>
  <input type="radio" v-model="sex" value="girl"><label>女</label></br>
  <!--复选框使用数组类型的数据匹配-->
  <input type="checkbox" v-model="hobby" value="跑步"><label>跑步</label>
  <input type="checkbox" v-model="hobby" value="爬山"><label>爬山</label>
  <input type="checkbox" v-model="hobby" value="滑雪"><label>滑雪</label></br>
  <!--单选时的选择框,多选时加multiple属性就可以了-->
  <!--但我们一般都不用原生的这种下拉框,不美观,扩展功能也不好,一般会用插件或自己封装一个-->
  <select v-model="select">
   <option disabled value="">请选择</option>
   <option>html</option>
   <option value="js">javascript</option>
   <option>css</option>
  </select>
  <!--用 v-for 渲染的动态选项-->
  <select v-model="selected">
   <option v-for="option in options" :value="option.value">
    {{option.text}}
   </option>
  </select>
 </div>

var app7 = new Vue({
 el: '#app7',
 data:{
  message: '单行文本',
  message1: '多行文本',
  picked: true,
  sex: 'boy',
  hobby: ['爬山','滑雪'],
  select: 'css',
  selected: 'A',
  options: [
   { text: 'One', value: 'A' },
   { text: 'Two', value: 'B' },
   { text: 'Three', value: 'C' }
  ]
 }
});

 

发表评论

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

标签:
网站地图xml地图