Re-learn the front end (9) to be more regular practice really

Introduction to Regular Expressions

What is a regular expression

Regular expressions: matching rule for regular expression, regular expressions originally early research scientists working principle of the human nervous system, now widely used in programming languages. Regular table is usually used to retrieve, replace the text in line with those of a model (rule) is. A regular expression is a logical formula of string operations , it is to use some combination of a particular pre-defined characters, and these particular character, form a "string rule", this "rule string" is used to express characters for string filter logic.

Regular expressions role

  1. Whether the given string regular expression filtering logic (match)
  2. Can get through a regular expression from a particular part of the string we want (extract)
  3. Strong ability to string replacement (replacement)

Regular expression features

  1. Flexibility, logic and functionality is very strong
  2. String can quickly reach a very simple manner with a complex control
  3. For people who are new, relatively obscure

Regular expressions are composed of

  • Ordinary characters
  • Special characters (metacharacters): regular expression characters that have special meaning

Metacharacters

Common yuan string

Metacharacters Explanation
\d Matching numbers
\D Matches any non-numeric characters
\w Match letters or numbers or an underscore
\W Not match any letters, numbers, underscores
\s Matches any whitespace
\S Matches any character is not whitespace
. Match any single character other than the line feed
^ It represents the beginning of a line of text matching (to who started)
$ Indicates text matching end of the line (to whom the end)

Qualifier

Qualifier Explanation
* Repeated zero or more times
+ Repeated one or more times
? Repeat zero or one time
{n} N times
{n,} Repeated n times or more
{n,m} Repeated n times to m

other

[] 字符串用中括号括起来,表示匹配其中的任一字符,相当于或的意思
[^]  匹配除中括号以内的内容
\ 转义符
| 或者,选择两者中的一个。注意|将左右两边分为两部分,而不管左右两边有多长多乱
() 从两个直接量中选择一个,分组
   eg:wh(a|e)y匹配whay和whey
[\u4e00-\u9fa5]  匹配汉字
复制代码

demo

Check Mobile:

^\d{11}$
复制代码

Verify Zip Code:

^\d{6}$
复制代码

Verify mail [email protected]:

^\w+@\w+\.\w+$
复制代码

Using regular expressions in JavaScript

Create a regular target

Mode 1:

var reg = new Regex('\\d', 'i');
var reg = new Regex('\\d', 'gi');
复制代码

Option 2:

var reg = /\d/i;
var reg = /\d/gi;
复制代码

parameter

Mark Explanation
i Ignore case
g Global Matching
give Global matching + ignore case

Regular match

// 匹配日期
var dateStr = '2019-04-10';
var reg = /^\d{4}-\d{1,2}-\d{1,2}$/
console.log(reg.test(dateStr));
复制代码

Regular extraction

// 1. 提取工资
var str = "张三:1000,李四:5000,王五:8000。";
var array = str.match(/\d+/g);
console.log(array);

// 2. 提取email地址
var str = "[email protected],[email protected] [email protected] 2、[email protected] [email protected]...";
var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
console.log(array);

// 3. 分组提取  
// 3. 提取日期中的年部分  2015-5-10
var dateStr = '2016-1-5';
// 正则表达式中的()作为分组来使用,获取分组匹配到的结果用Regex.$1 $2 $3....来获取
var reg = /(\d{4})-\d{1,2}-\d{1,2}/;
if (reg.test(dateStr)) {
  console.log(RegExp.$1);
}


复制代码

Regular replacement

// 1. 替换所有空白
var str = "   123AD  asadf   asadfasf  adf ";
str = str.replace(/\s/g,"xx");
console.log(str);

// 2. 替换所有,|,
var str = "abc,efg,123,abc,123,a";
str = str.replace(/,|,/g, ".");
console.log(str);
复制代码

Finishing a small demo, you can expand your


    var str = 'b';
//    var reg = /\d/; //只要字符串中有数字,就符合要求
//    var reg = /\D/; //只要字符串中有非数字,就符合要求
//    var reg = /\w/; //只要字符串中有数字或者字母,或者下划线,就符合要求
//    var reg = /\W/; //只要字符串中有数字或者字母,或者下划线,就符合要求
//  var reg = /\s/; //只要字符串中有空白字符就符合要求
//  var reg = /\S/; //只要字符串中有非空白字符就符合要求
//  var reg = /./; //只要有非换行符就符合条件
//  var reg = /^a/; //只要字符串以a开头就符合条件
//  var reg = /a$/; //只要字符串以a结尾就符合条件
//  var reg = /^abc$/; //要求字符串中只能有abc
//  var reg = /^\d$/; //要求字符串中只能有abc
//  var reg = /^\d\d$/; //要求字符串中只能有abc
//  var reg = /^\d{11}$/;//要求字符串中只能出现11次数字
//  var reg = /^\d{3,}$/;//要求字符串中只能出现3次及以上的数字
//  var reg = /\d{3,}/;//要求字符串中只要包含3个及以上的数字就符合条件
//  var reg  = /^\d{3,5}$/;//字符串中只能出现3~5次的数字
//  var reg = /^\d*$/; //字符串中要么什么都没有,要么就只能是数字
//  var reg = /^\d+$/; //字符串中至少一个数字
//  var reg = /^\d?$/; //字符串中要么什么都没有,要么只能有一个数字
//  var reg = /^[abcd]$/; //只能有一个字符,而这个字符可以是中括号的任何一个
//  var reg = /^[^abcd]$/; //只能有一个字符,而这个字符可以不能有中括号的任何一个
//  var reg = /^\.$/; // 字符串中只能有一个点
//  var reg = /^a|c$/; //以a开头获取以c结尾
//  var reg = /^wh(a|g)y$/ //whay或者是whgy
//    var reg = /^[a-Z]$/; //错误的
//  var reg = /^[a-zA-Z]$/;
//  var reg = /^[A-z]$/;//大写字母在字符集中排序更靠前
  console.log(reg.test(str));
  
复制代码

Epilogue

  • Regular expressions, this thing, very simple when simple and complex time thief complex, in the final analysis, is that you are not familiar with, or forget, finishing when I would find, but over time many will forget, because in most cases in google, so in order to stabilize, it will only more training, and more consolidation, and then forget when have the impression regain fast.
  • Go too far, look back'll find a lot of harvest

If the programmers want to learn web front end, plus VX: TZED-21, free delivery web front-end video tutorial oh

Guess you like

Origin blog.csdn.net/weixin_44970764/article/details/90902257