JS处理字符串---正则表达式和String类

时间：2021-06-30 18:48:25

1. 正则表达式语法

javascript使用RegExp 类来表示正则表达式， 想要使用正则表达式必须首先创建一个RegExp对象。javascript中有两种方式创建RegExp对象的方法：一种是直接使用正则表达式文字，例如下面代码：(使用两个斜杠包围，并且不加引号) var re =/ab+c/; 。另一种是创建RegExp对象下面是一个简单的构造器语法：var re =new RegExp("ab+c"); 。

1.1 正则表达式的基本语法

  1. 简单的正则表达式语法

简单的正则表达式

模式 描述
c 普通字符,包括所有的大小写字母和数字，及一些符号。例如/abc/匹配字符串abc
{n} n是一个非负整数，表示匹配确定的n次，而且匹配的字符必须连续。
{n,} n是一个非负整数，表示匹配至少n次
{n,m} 表示至少匹配n次，最多m次，你n<=m
\ 转义字符
^ 匹配字符串的开始位置
$ 匹配字符串结束位置
* 匹配前面的字符或表达式零次或多次
+ 匹配前面的字符或表达式一次或多次
？ 匹配前面的字符串或表达式零次或一次 ；当该字符紧跟在任何一个其他限制符(*、+、？、{n}、{n,}、{n,m})后面时，匹配模式是”非贪心的”。”非贪心的”模式匹配到的、尽可能短的字符串，默认模式”贪心的”匹配到的是搜索到的尽可能长的字符串。例如在”ooooo”中，/o+?/只匹配单个o，/o+/则匹配所有的o
. 匹配除 \n 之外的任何单个字符
`x y`
[xyz] 字符集合，匹配所包含的任意一个字符
[^xyz] 反向字符集合，匹配未包含的任意字符
[a-z] 字符范围，匹配指定范围内的任意字符。/^[a-zA-Z0-9]+$/表示数字和26个英文字母组成的字符串
[^a-z] 反向字符范围，匹配未包含的字符范围

*、+和?限定符都称为“贪心的”，即他们尽可能的多匹配文字。

“非贪心的”模式匹配

模式 描述
*? 重复任意次，但尽可能少重复
+? 重复一次或多次，尽可能少重复
?? 重复零次或一次，尽可能少重复
{n,m}? 重复n~m次，但尽可能少重复
{n,}? 重复n次以上，但尽可能少重复
{n}? 重复仅n次，但尽可能少重复

1.2 正则表达式转义语法

转义后的正则表达式语法(部分)

模式 描述
\b 匹配一个单词，该单词必须位于边界，也就是说单词边必须要有空格。例如：可以匹配never，但是不能匹配very。
\B 匹配非边界单词，与\b相反
\d 匹配一个数字字符；等价于[0-9]
\D 匹配一个非数字字符
\f 匹配一个分页符
\v 匹配一个垂直制表符
\w 匹配包括下划线的任何单词
\W 匹配任何非单词字符，例如：50%中的%
\s 匹配一个空白字符，包括\n,\r,\f,\t\v等
\S 匹配一个非空白字符
\t 匹配一个制表符
\n 匹配一个换行符
\r 匹配一个回车符

1.3 常用正则表达式

整数或小数：^[0-9]+\.{0,1}[0-9]{0,2}$
只能是数字：^[0-9]*$
只能输入零或非零的数字：^(0|[1-9][0-9]*)$
验证用户密码(以字母开头，长度6-18之间，只能包括字符、数字和下划线)：^[a-zA-Z]\w{5,17}$
匹配Email地址：^\w+\.?[-\w]+@\w+[-]?\w*\.\w+[-]?\w*
只能输入汉字：^[\u4e00-\u9fa5]{0,}$
匹配整数：^-?\d*$

2 使用RegExp处理字符串正则匹配

2.1 创建一个RegExp 对象

两种语法创建：
1. var re = /pattern/[flag]
2. var re = new RegExp(“pattern”,[“flag”])

  • 参数pattern是正则表达式模式
  • 参数flag是可选项，用于表示正则表达式

flag参数可选项

标志 属性 功能说明
g global 全局标志，表示全文查找出现所有的pattern，直到找不到
i ignoreCase 表示匹配是不区分大小写
m multiline 更改^和$的含义，使他们分别在任意一行的行首和行尾进行匹配，而不仅仅在整个字符串的开头和结尾匹配

2.2 使用exec()和test()方法进行正则匹配

exec()方法可以返回匹配的结果，test()方法只是检测是否有匹配。

2.2.1 使用exec()方法

exec()方法返回包含该匹配结果的一个数组。语法格式如下：
re.exec(str)
str是要在其中执行匹配的String对象或字符串文字。
如果exec()没有找到匹配，则返回null；如果找到就返回一个数组，并更新RegExp对象的属性，以反映匹配结果。数组的0索引元素包含了完整的匹配，而第1~n元素中包含的是匹配中出现的任意一个子匹配。这相当于没有设置全局标志(g)的String.match()方法。
如果RegExp对象在构造的时候设置了全剧标志，exec()方法将从以lastIndex属性标示的位置开始查找；如果没有设置全局标志，exec()将忽略lastIndex，从字符串的开始位置开始查找。
1. exec()方法返回的数组有两个属性，分别是input和index：
* input属性包含了整个被查找的字符串。
* index属性包含了整个被查找字符串中被匹配的字符串的位置。
2. 而正则表达式对象也有两个属性：
* lastIndex属性包含了匹配中最后一个字符的下一个位置。
* source属性包含正则表达式模式字符串。

例如： 

var ss = "String buffers support mutable strings. "
var re = /\w+/g;
var oArray;
while((oArray=re.exec(ss))!=null){
    document.write(oArray.index+"---"+re.lastIndex+"------&gt"+oArray+"······"+oArray.input+"----"+re.source+"<br>");
}

结果为： 

0---6------>String······String buffers support mutable strings. ----\w+  
7---14------>buffers······String buffers support mutable strings. ----\w+  
15---22------>support······String buffers support mutable strings. ----\w+  
23---30------>mutable······String buffers support mutable strings. ----\w+  
31---38------>strings······String buffers support mutable strings. ----\w+

属性布局

属性 描述 本例中的结果(第一行为例)
oArray.index 返回匹配的字符的位置，他查找字符串中第一个成功匹配的开始的位置，该属性为只读 0
oArray.input 返回查找的字符串，属性为只读 String buffers support mutable strings.
oArray 等于oArray[0]，匹配的字符串 String
re.lastIndex lastIndex属性在字符串中指定开始进行下一次搜索的索引位置。仅适用于全局搜索 6
re.source source属性指定模式部分的字符串 \w+

2.2.2 使用test()方法

test()方法检查在字符串中是否存在一个匹配指定模式的字符串，存在返回true，不存在返回false。语法格式如下：
re.test(str)
str是执行匹配的字符串对象。

3. 使用String类处理字符串

3.1 使用match()方法

match()方法使用正则表达式模式对字符串进行查找，并将包含查找的结果作为数组返回。其语法格式如下：
oString.match(re)
参数说明：
* 参数oString指对其进行查找的String对象或字符串文字。
* 参数re是一个RegExp对象，也可以是包含正则表达式模式和可用标志的变量名或字符串文字。

如果match()没有找到匹配，则返回null；如果找到匹配，则返回一个数组并且更新RegExp对象的属性以反映匹配结果。
match()方法返回的数组包含：input 和 index 两个属性，并可以使用数组元素访问运算符和保存的结果。
如果没有设置全局属性标志(g)，数组的0索引元素包含整个匹配，而第1~n元素包含了匹配中岑出现过的任意一个子匹配。这相当于没有设置全局标志的exec()方法。如果设置了全局标志，元素0~n中包含所有匹配。
例如：

var oString = "String buffers support mutable strings.";
var re = /\w+/g;
var oArray = oString.match(re);
document.write(oArray);

结果： 

String,buffers,support,mutable,strings

如果不使用全局标志g，那么： 

var oString = "String buffers support mutable strings.";
var re = /\w+/;
var oArray = oString.match(re);
document.write(oArray);

输出： 

String

3.2 使用replace()方法

replace()方法根据正则表达式进行文字替换，然后返回替换后的字符串的副本，语法格式如下：
oString.repalce(re,replaceText)
参数说明：
参数re可以是正则表达式模式也可以是字符串。
参数repalceText是一个字符串文字。
例如： 

var oString = "String buffers support mutable strings.";
var re = /\s/g;
var oString = oString.replace(re,"-");
document.write(oString);

结果： 

String-buffers-support-mutable-strings.

3.3 使用search()方法

search()方法指明是否存在相应的匹配。如果找到一个匹配，则返回这个匹配距离字符串开始的位置；没有则返回-1；语法格式如下：
oString.search(re)
参数re可以是正则表达式模式也可以是字符串。
例如： 

var oString = "String buffers support mutable strings.";
var re = /\s/g;
var oString = oString.search(re);
document.write(oString);

结果：
6

demo(打字机)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>打字机</title>
</head>
<body>
<div id="in" style="width: 600px;height: 300px;border: 2px #ccc dashed;padding: 10px">  
</div>
<script type="text/javascript"> var text = "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life. "; var count = 0; var odiv = document.getElementById("in"); function run(){ if(count<text.length){ odiv.innerHTML = text.substring(0,count); count++; }else{ window.clearInterval(inter); } } var inter = window.setInterval(run,50); </script>
</body>
</html>
标签：

相关文章