Maison >interface Web >js tutoriel >Résumé de l'apprentissage JavaScript (7) JS RegExp
Résumé de l'apprentissage JavaScript (7) JS RegExp
- 黄舟original
- 2017-02-10 09:25:181374parcourir
En js, les expressions régulières sont représentées par un objet RegExp. RegExp est l'abréviation d'expression régulière. Le modèle simple RegExp peut être un seul caractère. Les modèles plus complexes incluent plus de caractères et peuvent être utilisés pour l'analyse, la vérification du format, la substitution, etc. Vous pouvez utiliser un constructeur RegExp() pour créer un objet RegExp, ou vous pouvez utiliser la syntaxe directe
En js, une expression régulière est représentée par un objet RegExp, et RegExp est l'abréviation d'expression régulière. Le modèle simple RegExp peut être un seul caractère. Les modèles plus complexes incluent plus de caractères et peuvent être utilisés pour l'analyse, la vérification du format, la substitution, etc. Vous pouvez utiliser un constructeur RegExp() pour créer un objet RegExp ou utiliser une syntaxe littérale.
1. Introduction à RegExp.
RegExp est une expression régulière (expression régulière, souvent abrégée en regex, regexp ou RE/re/reg dans le code), qui consiste à utiliser une seule chaîne pour décrire et faire correspondre une série de règles qui sont conformes à une certaine syntaxe Mode de recherche de chaîne, le mode de recherche peut être utilisé pour la recherche de texte et le remplacement de texte.
Une expression régulière est un modèle de recherche formé par une séquence de caractères. Lorsque vous recherchez des données dans du texte, vous pouvez utiliser le modèle de recherche pour décrire le contenu que vous souhaitez interroger. L'expression est une description de caractères. L'objet pattern peut être utilisé pour faire correspondre des modèles de chaînes, les récupérer et les remplacer. Il s'agit d'un outil puissant pour effectuer une correspondance de modèles sur des chaînes.
La soi-disant expression régulière peut être directement comprise comme une règle ou une expression de modèle, qui exprime une certaine règle qu'un ordinateur peut comprendre, mais est une expression textuelle difficile à comprendre pour les gens ordinaires. être utilisé pour toutes les recherches de texte et l'opération de remplacement de texte consiste simplement à traiter les chaînes.
2. Méthode de chaîne.
(1), charAt() Obtenez un certain caractère et renvoie un certain caractère dans la chaîne.
(2), split() Divisez la chaîne et obtenez un tableau.
(3), search()Trouvez la position où un certain caractère apparaît pour la première fois. Il est préférable de l'utiliser avec des expressions régulières. La valeur de retour est une valeur numérique. Si elle n'est pas trouvée, elle renvoie -. 1.
(4), match() Recherchez le caractère spécifié dans la chaîne et renvoyez le caractère Si vous n'utilisez pas d'expressions régulières, seule la première occurrence du caractère spécifié sera renvoyée, et il n'y en aura pas. correspondance plus poussée. Si vous utilisez des expressions régulières et effectuez une correspondance globale, tous les caractères spécifiés dans la chaîne sont renvoyés sous la forme d'un tableau, ou null est renvoyé s'il n'est pas trouvé.
(5), replace() Remplace les caractères et renvoie une nouvelle chaîne. Il est mieux utilisé avec les expressions régulières et peut remplacer toutes les correspondances.
<script> var str='abcdefgca'; //返回字符串中某一位的字符。 alert(str.charAt()); //返回：d //查找字符串首次出现的位置。 alert(str.search('z')); //返回：- //查找指定的字符。 //只返回第一次出现的c，不再向后匹配。 alert(str.match('c')); //返回：c //将'a'替换为'i'。 //只替换了第一个位置的a，不再向后匹配。 alert(str.replace('a', 'i')); //返回：ibcdefgca //分割字符串。 var str='--aaa--cd'; var arr=str.split('-'); //返回：,,aaa,,cd alert(arr); </script>
Exemple : Utilisez des méthodes ordinaires pour rechercher tous les nombres dans une chaîne
Idée d'implémentation : Trouvez-le n'est en fait pas difficile d'extraire les nombres dans la chaîne. Faites d'abord appel au jugement pour extraire les nombres dans la chaîne. Ensuite, il doit y avoir plus d'un nombre dans la chaîne, donc une chaîne vide est nécessaire pour stocker les caractères numériques extraits, puis. Ajoutez ces caractères numériques au tableau et renvoyez-le enfin, et vous avez terminé. Voyons comment le programme est implémenté :
<script>
var str=' abc d aa c zz -=-=s-';
var arr=[];
var num='';
//首先循环遍历字符串
for(var i=;i<str.length;i++){
//再判断当前字符大于等于并且小于等于，则为数字
if(str.charAt(i)>='' && str.charAt(i)<=''){
//那么就将当前的字符存储在空字符串中
num += str.charAt(i);
}
else{
//如果字符串中有值。
if(num){
//将值添加到数组中。
arr.push(num);
//再清空字符串，避免重复添加。
num='';
}
}
}
//最后在整个字符串结束之后有可能还会有数字，再做一次判断。
if(num){
//如果还有值就添加到数组中。
arr.push(num);
//再清空字符串。
num='';
}
//返回：OK，现在返回就完成了。
alert(arr); //返回：,,,,,,,
</script>
Bien qu'il puisse être complété en utilisant des méthodes ordinaires et qu'il ait une structure claire, le code est relativement long. vous utilisez des expressions régulières, puis une expression a effectué tellement de travail, ce qui est très pratique. Voyons comment utiliser les expressions régulières.
3. Utilisez des règles régulières.
Syntaxe de l'expression régulière : var re = new RegExp('pattern', 'modifier');
Le modèle est le modèle de l'expression, et le modificateur est utilisé pour spécifier Correspondance globale, insensible à la casse, etc., le formulaire complet est une expression régulière.
Étant donné que la syntaxe régulière ressemble à ceci, n'est-ce pas la syntaxe typique des objets nouvellement créés en JS. Au fait, cela signifie créer un nouvel objet régulier ? Nous savons tous que nous devrions essayer d'éviter d'utiliser le mot-clé new. L'utilisation de new créera sans aucun doute un nouvel objet, ce qui signifie également qu'il occupera une certaine quantité d'espace mémoire. S'il n'est pas géré correctement, une accumulation excessive entraînera un débordement de mémoire, ce qui est le cas. assez coûteux. Les ressources ne sont pas propices à la mise en œuvre de l’optimisation du code. En même temps, cette façon d'écrire ne reflète pas le pouvoir de la régularité. Elle doit donc être très concise. Par conséquent, dans la pratique, cette syntaxe régulière de style JS n'est pas utilisée, mais un autre style est utilisé : <.>
Syntaxe : var re = /mode/modifier; Ce style est relativement concis et est une expression que la plupart des gens ne peuvent pas comprendre. (1) Modificateur. Le modificateur est utilisé pour effectuer la correspondance globale et la sensibilité à la casse. Ignorer la casse : i (abréviation de ignore, traduction chinoise : ignorer) Correspondance globale : g (abréviation de global, traduction chinoise : all/global)Exemple : Recherche globale des caractères spécifiés
<script> var str='AbCdEFgiX'; //JS风格： //这个正则表达式什么也不代表，只代表abc本身。 var reg=new RegExp('abc', 'i'); alert(str.match(reg)); //返回：AbC //常用风格： var re=/efg/i; alert(str.match(re)); //返回：EFg </script>
4, crochets et métacaractères.
(1) Crochets. Les crochets sont utilisés pour rechercher des caractères dans une certaine plage. ①. N'importe quel caractère
Expression : [abc]
Recherchez n'importe quel caractère entre crochets.
[] signifie ici ou, c'est-à-dire, celui qui apparaît fera l'affaire.
<script> var str='apc xpc ppc bpc spc opc'; //[apx]pc，随便出现哪个都行，即：apc ppc xpc var re=/[apx]pc/g; alert(str.match(re)); //返回前个pc。 </script>
②、范围查找。
表达式：[0-9] [a-z] [A-z] [A-Z]
[0-9] 查找任意 0 - 9 的数字。
[a-z] 查找任意 a - z 的字符。
[A-z] 查找任意 大写A - 小写z 的字符。
[A-Z] 查找任意 大写A - 大写Z的字符。
③、排除查找。
表达式：[^abc] [^a-z] [^0-9]
[^abc] 查找任意不在方括号中的字符。
[^a-z] 查找任意除了字母以外的字符，包括数字符号中文外文。
[^0-9] 查找任意除了数字以外的字符，包括字母符号中文外文。
<script> var str='ot out o.t o t o`t ot ot'; //o和t中间除了数字，什么都可以 var re=/o[^-]t/g; alert(str.match(re)); //返回：out,o.t,o t,o`t </script>
④、选择查找。
表达式：(a|b|c)
查找任何指定的选项，a或b或c。
⑤、匹配还可以使用组合模式，比如：[a-z0-9A-Z] [^a-z0-9]
[a-z0-9A-Z] 任意大小写字母和数字。
[^a-z0-9] 除了字母和数字以外，什么都可以。
(2)、元字符。
元字符是拥有特殊含义的字符，也可以叫做转义字符。
下面是一些常用的元字符：
| Métacaractères | Description | Utilisation |
| . | trouve un seul caractère, représentant n'importe quel caractère, à l'exclusion des nouvelles lignes et des terminateurs de ligne. | Il n'est pas recommandé de l'utiliser, il est sujet à des problèmes. |
| w | Trouver des caractères de mots, y compris des chiffres anglais et des traits de soulignement, équivalents à [a-z0-9] | /w/ |
| W | trouve un non-mot caractères, équivalent à [^a-z0-9] | /W/ |
| d | Trouver un nombre équivalent à [0-9] | /d/ |
| D | Trouver des non-chiffres, équivalents à [^0-9] | /D/ |
| s | Rechercher les caractères d'espacement, y compris les espaces, les retours chariot et les tabulations , les caractères de saut de ligne et de saut de page, ainsi que les caractères non imprimables ne peuvent pas être affichés. | /s/ |
| S | Trouver des espaces non blancs personnages. | /S/ |
| b | Trouver le mot localisé in Une correspondance au début ou à la fin, ou null si aucune correspondance n'est trouvée. | /b/ |
| B |
Trouver Correspondance sans limite de mot, c'est-à-dire non situé au début ou à la fin, le type des caractères précédent et suivant dans la position correspondante est le même : c'est-à-dire qu'ils doivent tous deux être des mots, ou doit être identique Pour les non-mots, le début et la fin de la chaîne sont traités comme des caractères non-mots. Si aucune correspondance n'est trouvée, null est renvoyé. |
/B/ |
| n | Recherche le caractère de nouvelle ligne, s'il est trouvé puis renvoie l'emplacement, ou -1 s'il n'est pas trouvé. | /n/ |
| f | Rechercher un caractère de saut de page . | /f/ |
| r | Trouver le retour chariot personnage . | /r/ |
| t | Onglet Rechercher . |
5. Quantificateur.
Le soi-disant quantificateur est un quantificateur, c'est-à-dire un nombre. Il est utilisé dans les expressions régulières pour exprimer le nombre d'occurrences.
Voici quelques quantificateurs couramment utilisés :
| Quantificateur | Description | Utilisation |
| * | zéro fois ou n'importe quelle heure, équivalent à {0,} | Non recommandé, la gamme est trop large et pas assez précise. |
| ? | zéro ou une fois, équivalent à {0, 1} | /10?/g effectue une recherche globale de 1, en incluant zéro ou 1 '0' qui le suit immédiatement. |
| une ou un nombre quelconque de fois, équivalent à {1, } | /w /g Effectuez une recherche globale d'au moins un mot. | |
| {n} | exactement n fois | /j {4}/g effectue une recherche globale de nombres à quatre chiffres. |
| {n,} | Au moins n fois, aucune limite à | /d{3,}/g effectue une recherche globale des nombres contenant au moins trois chiffres. |
| {n, m} | Au moins n fois, au plus m fois | /d{3,4}/g Effectue une recherche globale de nombres contenant trois ou quatre chiffres. |
Voici quelques modèles de correspondance couramment utilisés :
| Mode | Description | Utilisation |
| ^a | Tout caractère commençant par a signifie le début de la ligne | /^d / Commençant par un chiffre /^a/g Recherche globale de caractères commençant par 'a' |
| a$ | tous les caractères se terminant par un représentent la fin de la ligne | /d$/ Finissant par un chiffre /z$/g Recherche globale de caractères finissant par 'z' |
| ? = a | N'importe quel caractère suivi de a | /a(?= b)/g Recherche globale de 'a' suivi de 'b ' caractères |
| ?!a | Tout caractère non suivi d'un | /c(?= d)/g Recherche globale des caractères qui ne suivent pas 'd' après 'c' |
6、字符串和正则配合。
(1)、search()配合正则
实例：找出字符串中第一次出现数字的位置
<script> var str='asdf zxcvbnm'; //元字符\d，表示转义为数字 var re=/\d/; alert(str.search(re)); //返回： 第一个数字为出现在第位 </script>
(2)、match()配合正则
其实没有什么东西是非正则不可的，只是正则可以让做东西更方便。下面就完成本章遗留的历史问题，怎么使用正则，能一句代码就完成普通方法需要很多行代码才能完成的东西。
在实例之前，先看看match()与正则的配合。
<script> var str='asdf zxcvm'; //找出字符串中的数字可以使用元字符\d var re=/\d/; //没告诉系统要找多少数字，系统在找到数字后就返回 alert(str.match(re)); //返回： //因此需要全局匹配，使用修饰符g var re=/\d/g; //没告诉系统要找几位，系统会将所有找到的数字返回 alert(str.match(re)); //返回：,,,,,,,,,,,, //所以可以使用两个元字符，告诉系统要找的数字是位 var re=/\d\d/g; //显然这样是不可取的，因为数字的位数并不固定，可能是位，有可能还是多位 alert(str.match(re)); //返回：,,,, //所以需要用到量词+，+代表若干,也就是多少都可以。 var re=/\d+/g; //现在返回正确。 alert(str.match(re)); //返回：,,,, </script>
实例：使用正则找出字符串中所有数字
<script> var str=' abc d aa c zz -=-=s-'; //alert(str.match(/\d+/g)); //元字符\d也可以使用[-]代替，到随便哪个都行。 alert(str.match(/[-]+/g)); //返回：,,,,,,, </script>
正则是强大的字符串匹配工具，就这样简单的使用一句代码就完成了。
(3)、replace()配合正则
<script> var str='abc zaaz deaxcaa'; //将字符串中的a替换为数字 alert(str.replace('a', )); //仅仅只将第一个a替换为 //配合正则使用匹配所有a再替换 var re=/a/g; alert(str.replace(re, '')); //返回所有的a都为 </script>
实例：简单的敏感词过滤
所谓的敏感词，就是法律不允许的词语，一切非法词都可以叫做敏感词，这包括的范围就太广了，比如危害国家安全，反对宪法确立的基本原则，散步谣言，扰乱民心，扰乱社会秩序，破坏社会稳定，色情、暴力、赌博、虚假、侵害、骚扰、粗俗、猥亵或其他道德上令人反感的词，以及含有法律规定或禁止的其他内容的词语。在平时最常见也是大多数人都会用的词莫属道德上令人反感的词了，说斯文一点就是吵架时用于攻击别人的词语。这里就列举几个热门的网络词语作为例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript实例</title>
<script>
window.onload=function (){
var oBtn=document.getElementById('btn');
var oTxt=document.getElementById('txt');
var oTxt=document.getElementById('txt');
oBtn.onclick=function (){
//这里的|在正则中表示 或 的意思
var re=/元芳|萌萌哒|然并卵|毛线|二货|城会玩/g;
//文本框的值等于文本框的值过滤掉敏感词
oTxt.value=oTxt.value.replace(re,'***');
};
};
</script>
</head>
<body>
<textarea id="txt" rows="" cols=""></textarea><br>
<input id="btn" type="button" value="过滤"><br>
<textarea id="txt" rows="" cols=""></textarea>
</body>
</html>
可在第一个文本框中输入一些相关语句，点击过滤按钮，查看过滤后的效果。
此外，支持正则表达式的 String 对象的方法还包括 split() 方法，可把字符串分割为字符串数组。
7、RegExp对象方法。
在JS中，RegExp对象是一个预定义了属性和方法的正则表达式对象。
(1)、test()
test() 方法用于检测一个字符串是否匹配某个模式，也就是检测指定字符串是否含有某个子串，如果字符串中含有匹配的文本，返回 true，否则返回 false。
语法：RegExpObject.test(str)
调用 RegExp 对象 re 的 test() 方法，并为它传递字符串str，与这个表示式是等价的：(re.exec(str) != null)。
实例：搜索字符串是否含有指定的字符
<script> var str='The best things in life are free, like hugs, smiles, friends, kisses, family, love and good memories.'; var re=/i/; alert(re.test(str)); //返回：true var reg=/z/; alert(reg.test(str)); //返回：false //上面的代码可以不用定义正则的变量，直接使用，将两行合并为一行。 alert(/i/.test(str)); alert(/z/.test(str)); </script>
(2)、exec()
exec() 方法用于检索字符串中的正则表达式的匹配，提取指定字符串中符合要求的子串，该方法返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回 null。可以使用循环提取所有或者指定index的数据。
语法：RegExpObject.exec(str)
exec() 方法的功能非常强大，它是一个通用的方法，可以说是test() 方法的升级版，因为他不仅可以检测，而且检测到了可以直接提取结果。该方法使用起来比 test() 方法以及支持正则表达式的 String 对象的方法更为复杂。
<script> var str = 'good good study day day up'; var re = /good/; var arr = re.exec(str); console.log(arr); //控制台显示：["good"]点开后显示： "good"，index ，input "good good study day day up"。 console.log(arr.index); //控制台显示： console.log(arr.input); //控制台显示：good good study day day up </script>
通过上面的实例，可以看到，如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推。
除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看出，在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用方法 String.match() 返回的数组是相同的。
什么是"与子表达式相匹配的文本"？
所谓的子表达式就是正则表达式中包含在圆括号中的内容。看下面实例：
<script> var str = 'good good study day day up'; var re = /g(o+)d/; var arr = re.exec(str); console.log(arr); //显示：["good", "oo"]点开后显示： "good", "oo", index ，input: "good good study day day up" console.log(arr.length); //显示： var reg = /(o+)/; //var reg = /o+/; 只返回一个"oo"，长度为 var arr = reg.exec(str); console.log(arr); //显示：["oo", "oo"]点开后显示： "oo", "oo", index ，input: "good good study day day up" console.log(arr.length); //显示： </script>
通过上例，可以看到，子表达式是一个大的表达式的一部分，并且必须用()包含起来。一个表达式可使用多个子表达式，同时还支持多层嵌套，把一个表达式划分为多个子表达式的目的是为了把那些子表达式当作一个独立的元素来使用。也就是说表达式中的子表达式可以作为整个表达式返回，也可以作为一个单独的表达式返回。所以上面的数组长度为 2。
使用子表达式是为了提取匹配的子字符串，表达式中有几个()就有几个相应的匹配字符串，顺序会依照()出现的顺序依次进行，并且()中可以使用 或"|" 进行多个选择。也就是说可以使用()对字符进行分组，并保存匹配的文本。
如果该方法使用全局匹配，则找到第一个指定字符，并存储其位置，如果再次运行 exec()，则从存储的位置（lastIndex）开始检索，并找到下一个指定字符，存储其位置。lastIndex属性是RegExp对象属性，是一个整数，标示开始下一次匹配的字符位置。看下面实例：
<script>
var str = 'good good study day day up';
var re = /good/g;
var arr;
do{
arr = re.exec(str);
console.log(arr);
console.log(re.lastIndex);
}
while(arr !== null)
/*
结果如下：
显示：["good"]，点开后： "good", index , input "good good study day day up"。
lastIndex为。
显示：["good"]，点开后： "good", index , input "good good study day day up"。
lastIndex为。
显示：null
lastIndex为。
*/
</script>
在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用 String.match() 返回的数组是相同的。但是，当 RegExpObject 是一个全局正则表达式时，exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。
通过上面实例，可以看到，当第三次循环时，找不到指定的 "good"，于是返回null，lastIndex值也变成0了。找到的第一个"good"的lastIndex值为4，是匹配文本最后一个字符的下一个位置。
<script>
var str = 'good good study day day up';
var re = /good/g;
var arr;
while((arr = re.exec(str)) != null){
console.log(arr);
console.log(re.lastIndex);
}
/*
结果如下：
显示：["good"]，点开后： "good", index , input "good good study day day up"。
lastIndex为。
显示：["good"]，点开后： "good", index , input "good good study day day up"。
lastIndex为。
*/
</script>
这里需要注意，如果在一个字符串中完成了一次模式匹配之后要开始检索新的字符串(仍然使用旧的re)，就必须手动地把 lastIndex 属性重置为 0。
无论 RegExpObject 是否是全局模式，exec() 都会把完整的细节添加到它返回的数组中。这就是 exec() 与 String.match() 的不同之处，后者在全局模式下返回的信息要少得多。因此可以这么认为，在循环中反复地调用 exec() 方法是唯一一种获得全局模式的完整模式匹配信息的方法。
(3)、compile
compile() 方法用于在脚本执行过程中编译正则表达式，也可用于改变和重新编译正则表达式。主要作用是改变当前(re)匹配模式。
语法：RegExpObject.compile(模式, 修饰符)
模式就是正则表达式，修饰符用于规定匹配的类型，g匹配全局，i忽略大小写，gi全局匹配忽略大小写。
该方法是改变匹配模式时使用的，一般情况下，能用到的地方很少。
实例：在全局中忽略大小写 搜索"day"，并用 "天" 替换，然后通过compile()方法，改变正则表达式，用 "日" 替换 "Today" 或 "day"。
<script> var str = 'Today is a beautiful day, Day day happy！'; var re = /day/gi; var str = str.replace(re, '天'); console.log(str); //输出：To天 is a beautiful 天, 天 天 happy！ reg = /(to)?day/gi; reg.compile(reg); str = str.replace(reg, '日'); console.log(str); //输出：日 is a beautiful 日, 日 日 happy！ </script>
8、正则应用。
正则表达式也叫规则表达式，所以在编写时，和编写JS的流程一样，先虑再写。最重要的就是，要搞清楚他所要表达的规则，先仔细端详其外表，看他到底长的什么模样，也就是以什么样的格式存在，再根据这种格式去写表达式，看是否能达到我们预期的目的，如果未达到，其实一般情况下直接将格式描述成表达式，都不会达到预期的效果，好在我们的主框架已经有了，我们只需要知道是什么地方出错了，什么地方没有达到预期，就可以很简单的在这个框架基础上稍加修改，最后就是完美的表达式了。比如要写一个验证手机号的正则表达式，手机号大家都知道是11位，全部为数字，而且开头是1，紧跟着的2位，因为运营商不同，可有多种组合，后面8位是任意数字，所以我们就可以规定开头必须为1，后面2位根据各运营商提供的不同组合进行限定，最后再输入8位任意数字。这样主框架就算完成了，但是手机号也有特殊情况，比如移动给手机号码前边加上+86依然可以使用，必要的时候我们还需要把这种情况考虑进去，不然用户输入了自己的移动手机号给前边加了个+86，然后点击提及，系统 "啪" 弹出一个窗口，你输入的是毛线，系统不识别，这样就闹笑话了，所以再只需要对框架做出修改，把这种情况考虑进去，就大功告成了。
这么说起来正则表达式貌似很简单的样子，其实挺难的，why are you so diao？归根结底就是这种一般人很难看懂的表达方式，自己当时写的时候很明白表达的是什么，过段时间回头，哎哟我去，怎么不认识了。其实这是一个熟能生巧的过程，记得有篇课文中写到“好记性不如烂笔头”，勤能补拙，多动手多写多思考，通过码海战术，反复推敲代码，让自己身经百战，见的多了，自然就不虚了，编程是一门艺术，精通任何一门艺术，都需要大量的练习和领悟，知识就是一个积累的过程，当然更重要的还是要自己去总结归纳，让知识真正属于自己。我觉着写程序这东西吧，最重要的还是思维，让代码始终跟着这种思维走，目的只有一个，怎么简单怎么省事怎么做，当然不是偷工减料，要明白需要什么，不需要什么，要呈现出什么样的效果，应该怎么去一步步实现，只要有这种实现目的的思维，就可以让代码始终保持着清晰简洁的状态，加快编写代码的效率，还有助于排错，也有利于代码的优化。那个好像扯太远了，每个人都有自己思考问题的方式，有不同的做事风格，只要最优化解决问题就好了，回到正事，接下来看看正则表达式应用的两个实例。
(1)、正则验证QQ号。
思路分析：QQ号有一个特性全部为数字，而且第一位不为0，那么就可以这样写/^[1-9]/，开头为1-9随便哪个数字，常见的QQ号最少的是5位数，最多的是10位数，那么可以使用量词{n,m}限定位数，表达式为/\d{5,10}/，这有一个小问题，前边我们已经限定了开头的第一位，那就说明还可以再输入至少4位，最多9位的数字，这样才匹配了最少5位最多10位，将表达式改为/\d{4,9}/，最后再限定结尾不能是非数字，就完事了。下面看代码是怎么完成的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript实例</title>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn');
oBtn.onclick = function (){
var oTxt = document.getElementById('txt').value;
var re=/^[-]\d{,}$/;
//用定义的正则表达式检测输入框的值是否匹配。
if(re.test(oTxt)){
alert("格式正确");
}
else{
alert('输入错误');
}
};
};
</script>
</head>
<body>
<input id="txt" type="text" placeholder="请输入QQ">
<input id="btn" type="button" value="验证">
</body>
</html>
(2)、正则验证邮箱。
思路分析：先端详下邮箱的外表，随便来个abc123_@ss789.xyz，邮箱是典型的粗俗的分析下其结构组成，大致可分为五部分，第一部分若干字母、若干数字还有一个下划线，第二部分是一个@，第三部分又是若干字母、若干数字，第四部分是一个点，最后一部分又是若干字母，诶、邮箱长的好复杂，各种若干。现在我们看光了邮箱的模样，清楚了邮箱的规则，就可以使用表达式描述了，第一部分可写为/\w+/，表示若干英文，第二部分就采用@，第三部分可表达为[a-z0-9]+，若干字母数字都可以，第四部分需要注意，点在正则中代表任意字符，如果想直接显示为点，就需要使用转义，就写为\.，最后一部分若干英文，表达为[a-z]+，这样就用正则的规则把邮箱的规则描述完了，最后再使用忽略大小写，将格式整理下：/\w+@[a-z0-9]+\.[a-z]+/ 下面就用我们分析的表达式直接验证一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript实例</title>
<script>
window.onload=function (){
var oBtn=document.getElementById('btn');
var oTxt=document.getElementById('txt');
oBtn.onclick=function (){
var re=/\w+@[a-z-]+\.[a-z]+/i;
if(re.test(oTxt.value)){
alert('合法邮箱');
}
else{
alert('非法邮箱');
}
};
};
</script>
</head>
<body>
<input id="txt" type="text" placeholder="请输入邮箱">
<input id="btn" type="button" value="验证">
</body>
</html>
将我们上面用于分析的邮箱例子abc123_@ss789.xyz拿来检测，OK，合法邮箱，这就没问题了吗？我们再来验证下这个邮箱：正则abc123_@ss789.xyz校验，OK，还是合法邮箱，这邮箱看着都不正规，跟我们之前分析的邮箱样子，长的从本质上都不一样，正则怎么会判断合法呢？这不是我们要的效果，显然是我们的表达式有点小问题，就像之前说的，一般情况下直接将格式描述成表达式，都不会达到预期的效果，那怎么解决呢？先开分析下是什么原因导致的，其实因为正则对象方法test()造成的，该方法有一个特性：只要这个字符串其中的一部分符合要求，就返回true。解决方法其实也很简单，让整个字符串都被正则检测，而不只是检测一部分，所以再加上行首行尾就OK了。其实熟练了正则之后，像这样的小问题，一般也不可能出现，这里的注重点是思路，要养成一种编写代码的思维模式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript实例</title>
<script>
window.onload=function (){
var oBtn=document.getElementById('btn');
var oTxt=document.getElementById('txt');
oBtn.onclick=function (){
var re=/^\w+@[a-z-]+\.[a-z]+$/i;
if(re.test(oTxt.value)){
alert('合法邮箱');
}
else{
alert('非法邮箱');
}
};
};
</script>
</head>
<body>
<input id="txt" type="text" placeholder="请输入邮箱">
<input id="btn" type="button" value="验证">
</body>
</html>
现在对刚才的2个邮箱再次验证，第一个合法，第二个非法，这个正则验证邮箱的表达式就没问题了。其实还是不够严谨，现在网站大多要填邮箱的地方，邮箱的服务器地址也就是后缀名如@qq.com等都提供了下拉列表，可供用户选择，如果是需要整个邮箱都自行输入，那么这个正则表达式问题就来了，邮箱的后缀名可以分为几类，其第三部分和最后一部分都是固定的格式，如果使用该表达式验证，那事就大了，因为我们给每一部分定义的都是可输入若干，很显然这是非法的格式，邮箱的后缀是需要做限定的，这里只是简单的做一个实现思路的分析，在真正用的时候，还需要具体问题具体对待。像这种需要验证的东西，前端不可能做到完美，前端就算写的再严谨，也是很容易出问题的，所以这是属于后端干的事，但是前端可以对用户的输入做一个简单的格式验证，只有确保用户输入正确了，再配合后端，那就是事半功倍的。
PS:RegExp几个常用方法说明
1、Test()
RegExpObject.test(string)
判断string中是否有与表达式匹配的字符串，有则返回true,否则返回false
例如
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：true
2、exec()
RegExpObject.exec(string)
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
例如
JScript 代码
var str= "cat2,hat8" ; var reg=/c(at)\\d/ ; 有分组 console.info(reg.exec(str));//运行返回 ["cat2", "at"]
3、Match()
string.match(RegExpObject)
它和exec有类似，也是返回一个数组，但它们有区别。
区别1：如下如果正则中有g，则match返回所有匹配。而exec永远只返回与第一个匹配有关的信息。
区别2：如果没有g，但是有分组，则两个结果一样。或者没有g也没有分组。只返回第一个匹配。
实例
JScript 代码
var someText= "web2.0 .net2.0" ; var pattern=/(\\w+)(\\d)\\.(\\d)/g; var outCome_exec=pattern.exec(someText); ["web2.0","web","2","0"] var outCome_matc=someText.match(pattern); ["web2.0","net2.0"]
4、Search()
stringObject.search(regexp)
返回第一个匹配的起始位置。
5、Replace()
stringObject.replace(regexp/substr,replacement)
返回新替换过后的新字符串。
如果是字符串，替换第一个。如果是正则表达式中有g，则全部替换，否则也是一个。
例如
JScript 代码
function fn() {
for(var i = 0;i < arguments.length;i++){
alert("第"+(i+1)+"个参数的值："+arguments[i]);
}
}
var str = '<p id="{wo}" >{ni}</p>';
str.replace(/\\{([a-z]+)\\}/ig, fn);
6、Split()
stringObject.split(separator,howmany)
第一个参数是字符串或者正则表达式，从它开始分解字符串。第二个参数表示返回数组的最大长度。
例如
JScript 代码
var str= "cat2,hat8" ; var reg=/at/ ; console.info(str.split(reg)); ["c", "2,h", "8"] console.info(str.split(reg，2)); ["c", "2,h"]
7、compile()
compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。
例如
JScript 代码
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
8、关于$0~$99的例子
JScript 代码
var str="alert.login.verifyfailed=Your email or password is incorrect!"; var reg=/^alert.\\w*(.\\w*)=((?:\\w*[ !\\.])*)$/; var out=str.match(reg); console.info($0);
9、测试RegExp属性
JScript 代码
function demo(){
var str = "abcdd abcsszabcdddccabAbcddABCEE";
var regex = /a(bc)/gi;
var t = null;
while(t = regex.exec(str)){
var result = "index = " + t.index + ", match = " + t[0] + ", group = " + t[1];
result += "/n$1=" + RegExp.$1 + ", lastMatch=" + RegExp.lastMatch + ", leftContext=" + RegExp.leftContext;
alert(result);
}
}以上就是JavaScript，学习小结， RegExp的内容，更多相关内容请关注PHP中文网（www.php.cn）！
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript