JS regular expression creation, matching string, escape, character class, repetition and common characters

Regular expressions operate on strings

Function: search, replace and validate data

There are two ways to create regular expressions:

// Literal measure
/js/

// Constructor method
regular expression
new RegExp()

Common characters: alphanumeric characters blank;, @ (no special meaning symbol)

Two ways to match:

test, find and return true, otherwise false

exec matches the character. If it is found, it will be returned (in the form of an array). Otherwise, it will return null

These two methods are regular methods, so the preceding one is regular

var str="i love js";
var pattern=/js/;
console.log(pattern.test(str));//true
console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]

var pattern=/Js/;
console.log(pattern.test(str));//false
console.log(pattern.exec(str));//null

Regular is case sensitive by default

Use the pattern modifier to set case insensitive

Three pattern modifiers:

i. ignore case

g global match

m multiline multiline matching

var str="i love js";

var pattern=/Js/i;
console.log(pattern.test(str));//true
console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]

i g m these three pattern modifiers can be combined arbitrarily without any order requirements

var str="i love js";

var pattern=new RegExp("js");
console.log(pattern.test(str));//true
console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]

var pattern=new RegExp("Js");
console.log(pattern.test(str));//false
console.log(pattern.exec(str));//null

var pattern=new RegExp("Js","i");
console.log(pattern.test(str));//true
console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]

Differences between literal and constructor methods:

/js/i is intuitive and simple

new RegExp("js", "i") can be detected by variables

var str="i love js";

var userInput="js";//The characters that need to be matched are in the variable
var pattern=/userInput/i;//This method is not desirable, and the direct matching is userInput
console.log(pattern.test(str));//false
console.log(pattern.exec(str));//null

var userInput="js";//The characters that need to be matched are in the variable
var pattern="/"+userInput+"/i";//This method is not desirable. The regular is changed to a string, and it no longer has test and exec Method
console.log(typeof pattern);//string 
console.log(pattern.test(str));//Report errors
console.log(pattern.exec(str));//Report errors

var pattern=new RegExp(userInput,"i");
console.log(typeof pattern);//object Regular belongs to regular object
console.log(pattern.test(str));//true
console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]

Simple escape character

/Represents a regular boundary, which needs to be escaped when matching

        var str="//I'm the note“;
        var pattern=/\/\//;
        console.log(pattern.exec(str));// ["//", index: 0, input:" / / I'm comment ", groups: defined]

If \ 'exists in the string, the next character will be escaped by default. If it needs to be treated as a normal character, the escaped character \ will be escaped again

    var str="\\\\";
    console.log(str);// Results show only\\

Common characters plus \ may have special meaning

For example, li n e break

    var str="nba";
    var pattern=/n/;
    console.log(pattern.exec(str));//matching n  ["n", index: 0, input: "nba", groups: undefined]

    var pattern2=/\n/;
    console.log(pattern2.exec(str));//Match newline  null

\Tmatch tab key

    var str="    hello";
    var pattern=/\t/;
    console.log(pattern.exec(str));//matching n  ["    ", index: 0, input: "    hello", groups: undefined]

ascii code can be used to match characters regularly

    var str="hello\ncyy";
    var pattern=/\x0A/;
    console.log(pattern.exec(str));//matching\n  ["↵", index: 5, input: "hello↵cyy", groups: undefined]

You can use unicode encoding to regularly match characters

    var str="    Ahead is tab key";
    var pattern=/\u0009/;
    console.log(pattern.exec(str));//matching tab key  ["    ", index: 0, input: "    Ahead is tab key", groups: undefined]

unicode is often used to match Chinese characters

Match all Chinese characters in a string: \ u4e00-\u9fa5

    var str="i am Chen Ying Ying";
    var pattern=/[\u4e00-\u9fa5]/;
    console.log(pattern.exec(str));//Matching Chinese  ["Chen", index: 5, input: "i am Chen Ying Ying", groups: undefined]

The ones that can match newlines are: \ n \ x0A \ u000A

Character class

[] match any character in the middle

    var str="javascript";
    var pattern=/[js]/;
    console.log(pattern.exec(str));//matching j  ["j", index: 0, input: "javascript", groups: undefined]

[^] means reverse

    var str="javascript";
    var pattern=/[^js]/;//Matching except j and s Beyond
    console.log(pattern.exec(str));// ["a", index: 1, input: "javascript", groups: undefined]

[] in the middle can be a range

    var str="javascript";
    var pattern=/[k-z]/;//matching k-z Letter between
    console.log(pattern.exec(str));// ["v", index: 2, input: "javascript", groups: undefined]

When representing a range, the preceding must be less than or equal to the following

    var str="javascript";
    var pattern=/[c-c]/;//The front is equal to the back
    console.log(pattern.exec(str));// ["c", index: 5, input: "javascript", groups: undefined]

    var pattern2=/[c-b]/;//The front is bigger than the back
    console.log(pattern2.exec(str));// Report errors

Match case letters at the same time

    var str="JavaScript";
    var pattern=/[a-zA-Z]/;//The front is equal to the back
    console.log(pattern.exec(str));// ["J", index: 0, input: "JavaScript", groups: undefined]

Match all numbers 0-9

    var str="JavaScript3333";
    var pattern=/[0-9]/;
    console.log(pattern.exec(str));// ["3", index: 10, input: "JavaScript3333", groups: undefined]

[] any combination can be made, such as

[a-zA-Z0-9@_]

Common character classes:

. matches all characters except \ n

    var str="3.14";
    var pattern=/./;
    console.log(pattern.exec(str));// ["3", index: 0, input: "3.14", groups: undefined]

If only match. Escape

    var str="3.14";
    var pattern=/\./;
    console.log(pattern.exec(str));// [".", index: 1, input: "3.14", groups: undefined]

. cannot match newline

    var str="\n";
    var pattern=/./;
    console.log(pattern.exec(str));// null

Alphanumeric underline

/[a-zA-Z0-9_]/ = /\w/

/[^a-zA-Z0-9_]/ = /\W/

    var str="@_";
    var pattern=/\w/;
    console.log(pattern.exec(str));// ["_", index: 1, input: "@_", groups: undefined]

number

/[0-9]/ = /\d/

/[^0-9]/ = /\D/

    var str="@_123";
    var pattern=/\d/;
    console.log(pattern.exec(str));// ["1", index: 2, input: "@_123", groups: undefined]

// match space

// match tab

/\s / matches a space or tab

/\S / matches characters other than spaces or tabs

The order of matches depends on the order in the string

    var str="    9";
    var pattern=/[\d\s]/;
    console.log(pattern.exec(str));// ["    ", index: 0, input: "    9", groups: undefined]

repeat

{n} Quantifiers, n times

    var str="123456789";
    var pattern=/\d{3}/;//Match 3 numbers
    console.log(pattern.exec(str));// ["123", index: 0, input: "123456789", groups: undefined]

{n1, n2} indicates that the number of occurrences is greater than or equal to n1 and less than or equal to n2

    var str="123456789";
    var pattern=/\d{2,3}/;//Match 2-3 Number, will match as many as possible
    console.log(pattern.exec(str));// ["123", index: 0, input: "123456789", groups: undefined]

{n1,} means greater than or equal to n1

{, n2} does not mean less than or equal to n2, which is wrong

    var str="123456789";
    var pattern=/\d{1,}/;
    console.log(pattern.exec(str));// ["123456789", index: 0, input: "123456789", groups: undefined]

    var pattern2=/\d{,2}/;//This writing is wrong
    console.log(pattern2.exec(str));// null

? = {0,1} matches 0 or 1 times

    var str="123456789";
    var pattern=/\d?/;
    console.log(pattern.exec(str));// ["1", index: 0, input: "123456789", groups: undefined]

+= {1,} at least once

    var str="123456789";
    var pattern=/\d+/;
    console.log(pattern.exec(str));// ["123456789", index: 0, input: "123456789", groups: undefined]

*= any time (including 0 times)

    var str="123456789";
    var pattern=/\d*/;
    console.log(pattern.exec(str));// ["123456789", index: 0, input: "123456789", groups: undefined]

Matching price

    var str="KFC luxury lunch￥15.5 element";
    var pattern=/\d+\.?\d*/;
    //The number in front must be at least 1 digit
    //. 0 or 1 occurrences
    //The following numbers can be or not, any time
    console.log(pattern.exec(str));// ["15.5", index: 8, input: "KFC luxury lunch￥15.5 element", groups: undefined]

Match positive and negative integers

    var str="KFC luxury lunch￥15.5 element";
    var pattern=/-?[1-9]\d*/;
    var pattern=/-{0,1}[1-9]\d*/;

Non greedy repetition

By default, regular matching is greedy. When there are quantifiers, there will be as many matches as possible

    var str="aaab";
    var pattern=/a+/;
    console.log(pattern.exec(str));//["aaa", index: 0, input: "aaab", groups: undefined]

Add?, after the quantifier, to change from greedy mode to non greedy mode, with as few matches as possible

    var str="aaab";
    var pattern=/a+?/;
    console.log(pattern.exec(str));//["a", index: 0, input: "aaab", groups: undefined]

But there's a rule of regularity, which is to find the first character that might match

Not the best place

    var str="aaab";
    var pattern=/a+?b/;//It doesn't match here to ab
    console.log(pattern.exec(str));//["aaab", index: 0, input: "aaab", groups: undefined]

As ab ove, it will not match a b, because the regular matches a from 0, and then it will continue to look for b

The application of greedy matching and non greedy matching

    var str="<td>First case</td><td>Second case</td>";
    var pattern=/<td>.*<\/td>/;//Greedy pattern, matching two lattices
    console.log(pattern.exec(str));//["<td>First case</td><td>Second case</td>", index: 0, input: "<td>First case</td><td>Second case</td>", groups: undefined]

    var pattern2=/<td>.*?<\/td>/;//Non greedy pattern, match one grid
    console.log(pattern2.exec(str));//["<td>First case</td>", index: 0, input: "<td>First case</td><td>Second case</td>", groups: undefined]

Option

    var str="css js";
    var pattern=/js|html|css/;
    console.log(pattern.exec(str));//["css", index: 0, input: "css js", groups: undefined]

Choose the first match, not the best

    var str="ab";
    var pattern=/a|ab/;//Try matching first a，When the match is successful, it will not match again ab
    console.log(pattern.exec(str));//["a", index: 0, input: "ab", groups: undefined]

Regular matching the suffix name of uploaded pictures: the suffix names of general pictures are gif, jpg, jpeg, png, etc., and are not case sensitive

/\.gif|\.jpg|\.jpeg|\.png/i

Groups and references ()

    var str="abab";
    var pattern=/(ab)+/;//take ab As a whole
    console.log(pattern.exec(str));//(2) ["abab", "ab", index: 0, input: "abab", groups: undefined]

In the returned array, the first element is the result of matching, and the second element is the element grouped in ()

() capture group

(?:) do not capture groups

    var str="abcd";
    var pattern=/(abc)d/;//Match to abcd，Capture to abc
    console.log(pattern.exec(str));//(2) ["abcd", "abc", index: 0, input: "abcd", groups: undefined]


    var str="abcd";
    var pattern=/(?:abc)d/;//Match to abcd，No capture
    console.log(pattern.exec(str));//(2) ["abcd", index: 0, input: "abcd", groups: undefined]

Parallel groups return in turn

    var str="abcd";
    var pattern=/(ab)(cd)/;//Match to abcd，First group ab，Second group cd
    console.log(pattern.exec(str));//["abcd", "ab", "cd", index: 0, input: "abcd", groups: undefined]

Nested group, return in the order of left parenthesis

    var str="abcd";
    var pattern=/(a(b(c(d))))/;
    console.log(pattern.exec(str));//(5) ["abcd", "abcd", "bcd", "cd", "d", index: 0, input: "abcd", groups: undefined]

You can use grouping directly in the regular \ n to represent the nth grouping

    var str="abcdab";
    var pattern=/(ab)cd\1/;//\1 Represents the first group, namely ab
    console.log(pattern.exec(str));//(2) ["abcdab", "ab", index: 0, input: "abcdab", groups: undefined]

Practical application of grouping

Match the html text in the outer container, which is an indeterminate label

    var str="<div><p>This is html text</p></div>";
    var pattern=/<([a-zA-Z]+)>(.*?)<\/\1>/;//\1 Represents a closed label, which must be the same as the start label
    console.log(pattern.exec(str));//["<div><p>This is html text</p></div>", "div", "<p>This is html text</p>", index: 0, input: "<div><p>This is html text</p></div>", groups: undefined]

As above, the first group is the outer label name, and the second group is the inner html obtained

Array returned by. exec:

Matching results

Return in groups

Index matching location index

input string matched

First and last matching of position matching

^Start of string

End of $string

    var str="js";
    var pattern=/^js/;
    console.log(pattern.exec(str));//["js", index: 0, input: "js", groups: undefined]

    var str="html js";
    var pattern=/^js/;
    console.log(pattern.exec(str));//null

Matches are all numbers

    var str="123mm567";
    var pattern=/^\d+$/;
    console.log(pattern.exec(str));//null

    if(pattern.test(str)){
        alert("All numbers.");
    }else{
        alert("Not all numbers");//Not all numbers
    }

Reverse thinking, matching is not a number

    var str="123mm567";
    var pattern=/\D/;
    console.log(pattern.exec(str));//["m", index: 3, input: "123mm567", groups: undefined]

    if(!pattern.test(str)){
        alert("All numbers.");
    }else{
        alert("Not all numbers");//Not all numbers
    }

Word boundary matching of position matching

Word boundary \ b

Non word boundary \ B

    var str="js html";
    var pattern=/js\b/;
    console.log(pattern.exec(str));//["js", index: 0, input: "js html", groups: undefined]

    var str="@@@js@@@";//@Also a word boundary
    var pattern=/\bjs\b/;
    console.log(pattern.exec(str));//["js", index: 0, input: "js html", groups: undefined]

Implement getElementsByClassName() that is compatible with lower versions of IE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="odd1 odd odd2">1</li>
        <li class="even">2</li>
        <li class="odd">3</li>
        <li class="even">4</li>
    </ul>
<script>
    function getByClass(className,node){
        //Advanced browser
        if(document.getElementsByClassName(className)){
            return document.getElementsByClassName(className)
        }else{
            //IE Lower version browser
            var node=node || document;
            var arr=[];
            var elements=node.getElementsByTagName("*");//Get all elements
            //Note that using the constructor to create a regular, where the escaped characters need to be double escaped
            var pattern=new RegExp("(^|\\s+)"+className+"($|\\s+)");
            for(var i=0;i<elements.length;i++){
                //matching className
                if(pattern.test(elements[i].className)){
                    arr.push(elements[i]);
                }
            }
            return arr;
        }
    }
    var odds=getByClass("odd");
    for(var i=0;i<odds.length;i++){
        odds[i].style.background="pink";
    }
    var evens=getByClass("even");
    for(var i=0;i<evens.length;i++){
        evens[i].style.background="#abcdef";
    }
</script> 
</body>
</html>

The idea of using word boundary can also be realized

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="odd1 odd odd2">1</li>
        <li class="even">2</li>
        <li class="odd">3</li>
        <li class="even">4</li>
    </ul>
<script>
    function getByClass(className,node){
        //Advanced browser
        if(document.getElementsByClassName(className)){
            return document.getElementsByClassName(className)
        }else{
            //IE Lower version browser
            var node=node || document;
            var arr=[];
            var elements=node.getElementsByTagName("*");//Get all elements
            //Note that using the constructor to create a regular, where the escaped characters need to be double escaped
            var pattern=new RegExp("\\b"+className+"\\b");
            for(var i=0;i<elements.length;i++){
                //matching className
                if(pattern.test(elements[i].className)){
                    arr.push(elements[i]);
                }
            }
            return arr;
        }
    }
    var odds=getByClass("odd");
    for(var i=0;i<odds.length;i++){
        odds[i].style.background="pink";
    }
    var evens=getByClass("even");
    for(var i=0;i<evens.length;i++){
        evens[i].style.background="#abcdef";
    }
</script> 
</body>
</html>

Prospective match (? =)

var str="javascript";
var pattern=/java(?=script)/;//If java It's followed by script，Then match out java
console.log(pattern.test(str));//true

var str="java";
var pattern=/java(?=script)/;//If java It's followed by script，Then match out java
console.log(pattern.test(str));//false

Negative prospective matching (?!)

var str="javascript";
var pattern=/java(?!script)/;//If java It's followed by script，Then it doesn't match java
console.log(pattern.test(str));//false

var str="java";
var pattern=/java(?!script)/;//If java Not behind script，Then match out java
console.log(pattern.test(str));//true

Instance method of RegExp object

The escape characters need to be double escaped

var pattern=new RegExp("\b");
console.log(pattern);//  //

var pattern=new RegExp("\\b");
console.log(pattern);//  /\b/

Therefore, if it is \, the literal quantity method escape is \ \, and the constructor double escape is\\

var pattern=new RegExp("\\\\");
console.log(pattern);//  /\\/

Pattern is the object of regular instance, and the method owned by pattern is the instance method

For example,. test(). exec()

var str="js js js";

var pattern=/js/;
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 

var pattern=/js/g;
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 3, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 4, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// null
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined]

As above, exec has a property called lastIndex, which is 0 by default

If set to global match, lastIndex is the next bit at the end of the last match

If the match is null, it will be reset to 0 automatically and the next round will be carried out again

Can also be captured after grouping

var str="js js js";

var pattern=/(j)s/;
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]

var pattern=/(j)s/g;
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 3, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 6, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// null
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]

Example:

var str="1.js 2.js 3.js";
var pattern=/js/g;
var total=0;//Total number of occurrences
var result;

while((result=pattern.exec(str))!=null){//Assign value before judging
    total++;
    console.log(result[0]+"The first"+total+"The secondary location is:"+result.index);
}
console.log("All in all"+total+"second");

Similar principle of test and exec

var str="js js js";
var pattern=/js/;
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true

var pattern=/js/g;
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true
console.log(pattern.test(str));//false
console.log(pattern.test(str));//true

. toString() to string

. toLocaleString() to local string (few languages only)

. valueOf() returns the regular itself

var pattern=new RegExp("a\\nb");
console.log(pattern.toString());
//  /a\nb/  The return here is a literal string
console.log(pattern.toLocaleString());//  /a\nb/
console.log(pattern.valueOf());// /a\nb/
console.log(pattern.valueOf()===pattern);// true

Instance attribute

. ignoreCase

. Global: global or not

. multiline match to multiline

. source returns literal regular itself

var str="js js js";
var pattern=/js/im;
console.log(pattern.ignoreCase);//true
console.log(pattern.global);//false
console.log(pattern.multiline);//true
console.log(pattern.source);//js
console.log(pattern.source===pattern);//false

. lastIndex last match position next

var str="js js";
var pattern=/js/;
console.log(pattern.lastIndex);//0
pattern.test(str);
console.log(pattern.lastIndex);//0
pattern.test(str);
console.log(pattern.lastIndex);//0
pattern.test(str);
console.log(pattern.lastIndex);//0
pattern.test(str);
console.log(pattern.lastIndex);//0

var pattern=/js/g;
console.log(pattern.lastIndex);//0
pattern.test(str);
console.log(pattern.lastIndex);//2
pattern.test(str);
console.log(pattern.lastIndex);//5
pattern.test(str);
console.log(pattern.lastIndex);//0 Reset to 0 when the match does not arrive
pattern.test(str);
console.log(pattern.lastIndex);//2

Constructor property RegExp

. input string to match =$_

. lastMatch last matched character =$&

. leftContext last match left character =$`

. rightContext right character on last match = $'

. lastParen last matched sub option (content in group) =$+

. $n capture group

var str="js js";
var pattern=/(j)s/;
pattern.exec(str);

//String to match
console.log(RegExp.input);//js js
console.log(RegExp["$_"]);//js js

//Last matched character
console.log(RegExp.lastMatch);//js
console.log(RegExp["$&"]);//js

//Last match left character
console.log(RegExp.leftContext);//empty
console.log(RegExp["$`"]);//empty

//The character to the right of the last match
console.log(RegExp.rightContext);// js
console.log(RegExp["$'"]);// js

//Last matched suboption (content in group)
console.log(RegExp.lastParen);// j
console.log(RegExp["$+"]);// j

//Capture packet
console.log(RegExp.$1);// j

Regular related methods in string objects

str.search() has nothing to do with whether it is global. It only looks for one. If there is one, it returns index

If not, return - 1

var str="js js";
var pattern=/(j)s/;
console.log(str.search(pattern));//0
var pattern=/aa/;
console.log(str.search(pattern));//-1

str.match()

Same as exec in normal matching

When global matching: directly return all matching elements, the grouping will be invalid

var str="js js";
var pattern=/(j)s/;
console.log(str.match(pattern));//(2) ["js", "j", index: 0, input: "js js", groups: undefined]
var pattern=/aa/;
console.log(str.match(pattern));//null

var pattern=/(j)s/g;
console.log(str.match(pattern));//(2) ["js", "js"]
var pattern=/aa/;
console.log(str.match(pattern));//null

str.match( pattern )

The content in the group can only be returned when it is not a global match

When global matching, all matching characters will be returned

Combination of m and g, combined with head tail matching, reflects

var str="1.js\n2.js\n3.js";
var pattern=/js$/g;//Match end of line js，One line by default
console.log(str.match(pattern));//["js"]

var pattern=/js$/mg;//Match end of line js，The default is multiline
console.log(str.match(pattern));//(3) ["js", "js", "js"]

str.split() string split, convert to array

var str="1,2,3";
console.log(str.split(","));//(3) ["1", "2", "3"]

var str="1,  2  , 3";
var pattern=/\s*,\s*/g;
console.log(str.split(pattern));//(3) ["1", "2", "3"]

str.replace()

var str="i love js js";
console.log(str.replace("js","html"));//i love html js

var pattern=/js/g;
console.log(str.replace(pattern,"html"));//i love html html

Replace replace time format

var str="2020-2-15";
var pattern=/-/g;
console.log(str.replace(pattern,"/"));//2020/2/15

Use $n for group reference

var str="i love pink";
var pattern=/(pink)/g;
document.write(str.replace(pattern,"<span style='background:pink'>$1</span>"));

Filtering sensitive words

var str="Chinese army and a Bian handle the certificate together";
var pattern=/armed forces of the Republic of China|Bian|Accreditation/g;
document.write(str.replace(pattern,"*"));//in*Team and*Together*

A text corresponds to a * sign

$0 is the content of every match

var str="Chinese army and a Bian handle the certificate together";
var pattern=/armed forces of the Republic of China|Bian|Accreditation/g;
document.write(str.replace(pattern,function($0){
    console.log($0);
    var result="";
    for(var i=0;i<$0.length;i++){
        result+="*";
    }
    return result;
}));//in**Team and**Together**

f5 light refresh

ctrl+f5 deep refresh

Common regular expressions:

1, QQ:

The first digit of the whole number is not 0, at least 5 (at present, at most 11, which may be expanded later)

/^[1-9]\d{4,10}$/
/^[1-9]\d{4,}$/

2. User name, nickname

2-18 digit Chinese and English numbers and underline composition

/^[\ue400-\u9fa5\w]{2,18}$/
/^[\ue400-\u9fa5a-zA-Z0-9_]{2,18}$/

3, password

6-16 bits cannot have blanks case sensitive

/^\S{6,16}$/

4. Remove whitespace from the beginning and end of a string

First, remove the head or tail

var str=" cyy ";
console.log("|"+str+"|");// | cyy |

var pattern=/^\s+/;
str=str.replace(pattern,"");//Replace left margin

var pattern2=/\s+$/;
/*
Using \ S + here is more efficient than using \ s *
\s* Replace anyway, even if there is no blank
\s+ Replace only when there is a blank character, otherwise return directly
 */
str=str.replace(pattern2,"");//Replace right margin

console.log("|"+str+"|");// |cyy|

Remove the leading and trailing blanks at the same time

var str=" cyy ";
console.log("|"+str+"|");// | cyy |

var pattern=/^\s+|\s+$/g;
str=str.replace(pattern,"");//Replace left and right blanks
console.log("|"+str+"|");// |cyy|

var str=" cyy ";
console.log("|"+str+"|");// | cyy |

function trim(str){
    return str.replace(/^\s+/,"").replace(/\s+$/,"");
}
console.log("|"+trim(str)+"|");// |cyy|

5. Turn hump

str.replace(pattern, what to replace) the second parameter can be the return value of an anonymous function

Among the parameters of anonymous function, the first parameter is the matching content, and the second parameter starts with the content captured by grouping

var str="background-color";
var pattern=/-([a-z])/gi;//  Match here to-c

//Because in the matching result, the first parameter is the matching content, and the second parameter starts with the grouping content
//So here all by -c   letter by c
//It can also be used. $0 $1 Express
console.log(str.replace(pattern,function(all,letter){
    return letter.toUpperCase();
}));// backgroundColor
console.log(str.replace(pattern,function($0,$1){
    return $1.toUpperCase();
}));// backgroundColor

// Package to hump function
function toCamelCase(str){
    return str.replace(pattern,function($0,$1){
        return $1.toUpperCase();
    });
}
console.log(toCamelCase(str));//backgroundColor

6. Match HTML tags

Match start tag and end tag. Do not use the content in the tag

var str="<p style='color:red' class='active'>This is a paragraph.</p>";
var pattern=/<.+?>/g;//Non greedy pattern matches content between two angle brackets
console.log(str.match(pattern));

var pattern=/<[^>]+>/g;//Inside two angle brackets, no angle bracket matching to the end
console.log(str.match(pattern));

7. email

cyy@qq.com.cn

cyy_1@qq.com

cyy.com@qq.com.cn

/^(\w+\.)*\w+@(\w+\.)+[a-z]$/i

8,URL

/*
http://www.baicu.com
http Or https is optional
 All but: and /, belong to the host name
*/ 

//Simplified version, low requirements
/^(https?:\/\/)?[^:\/]+(:\d+)?(\/.*)?$/  

//Exact Edition
//Agreement: http://  https://   ftp://  mailto://   file:///

//Match host name www.baidu.com
//You can have hyphens, but hyphens cannot be the beginning or the end
/^([a-z0-9]+\.|[a-z0-9]+-[a-z0-9]+\.)*[a-z]+$/i

You can save the regular rules you often use to an object, such as:

var regExp={
    "chinese":/[\u4e00-\u9fa5]/,
    "qq":/^[1-9]\d{4,}$/,
    ...
}

Making a simple regular test tool

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#abcdef;
        }
        .wrap{
            width:1000px;            
            margin:10px auto;
            font-size:14px;
        }
        .container{
            width:650px;
            float:left;
        }
        .wrap h1{
            text-align: center;
            font-size:20px;
        }
        .textBox{
            border:1px solid #fff;
            padding:5px;
            width:638px;
            height:130px;
            border-radius:5px;
            resize:none;/*Do not drag input box*/
            margin-top:15px;
        }
        div.textBox{
            background:#eee;
        }
        .pattenInput{
            width:180px;
            padding:5px;
            border:1px solid #fff;
            border-radius:5px;
        }
        .matchBtn{
            width:100px;
            text-align: center;
            padding:5px;
            background-color: pink;
            border:none;
            border-radius:5px;
            margin-left:10px;
        }
        #matchResult span,
        #replaceResult span{
            background:orange;
        }
        .list{
            width:280px;
            float:right;
            border:1px solid #fff;
            border-radius:5px;
            background-color: #fff;
            margin-top:14px;
            padding:20px;
        }
        .list dt{
            font-weight:bold;
            font-size:18px;
            margin-bottom:10px;
            color:#333;
        }
        .list dd{
            height:40px;
            line-height:40px;
        }
        .list dd a{
            display: block;
            text-decoration: none;
            color:#333;
        }
        .list dd a:hover{
            color:orange;
        }
        .footer{
            text-align: center;
        }
        .footer{
            zoom:1;
        }
        .wrap::after{
            content:"";
            display: block;
            clear:both;
        }
        .footer span{
            color:orange;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h1>Regular expression test tool</h1>
        <div class="container">
            <textarea id="userInput" class="textBox" placeholder="Please enter the text to match"></textarea>
            <p>
                //Regular expression:<input type="text" placeholder="Please enter regular expression" class="pattenInput" id="pattenInput">
                <input type="checkbox" name="modifier" value="i">ignore case
                <input type="checkbox" name="modifier" value="g">Global matching
                <input type="checkbox" name="modifier" value="m">Multi line matching
                <input type="button" value="Test matching" id="matchBtn" class="matchBtn">
            </p>
            //Match results:
            <!-- Original use textarea，Internal text is not allowed to be labeled, so replace with div -->
            <div id="matchResult" class="textBox" placeholder="Please enter the text to match"></div>
            <p>
                //Replace text:<input type="text" placeholder="Please enter replacement text" class="pattenInput" id="replaceInput">
                <input type="button" value="Regular replacement" id="replaceBtn" class="matchBtn">
            </p>
            //Replacement result:
            <!-- Original use textarea，Internal text is not allowed to be labeled, so replace with div -->
            <div id="replaceResult" class="textBox" placeholder="Please enter the text to match"></div>
        </div>
        <dl class="list" id="list">
            <dt>Common regular expressions</dt>
            <dd><a href="javascript:void(0)" title="[\u4e00-\u9fa5]">Match Chinese characters</a></dd>
            <dd><a href="javascript:void(0)" title="[1-9]\d{4,}">QQ</a></dd>
        </dl>
    </div>
    <p class="footer">This procedure is composed of<span>cyy</span>Production, welcome to use~</p>

<script>
    var userInput=document.getElementById("userInput");
    var pattenInput=document.getElementById("pattenInput");
    var modifiers=document.getElementsByName("modifier");
    var matchBtn=document.getElementById("matchBtn");
    var matchResult=document.getElementById("matchResult");

    var replaceInput=document.getElementById("replaceInput");
    var replaceBtn=document.getElementById("replaceBtn");
    var replaceResult=document.getElementById("replaceResult");

    var links=document.getElementById("list").getElementsByTagName("a");

    var pattern="";
    var modifier="";

    //Processing mode modifier
    for(var i=0;i<modifiers.length;i++){
        modifiers[i].onclick=function(){
            modifier="";//Clear the original one after each click
            for(var j=0;j<modifiers.length;j++){
                if(modifiers[j].checked){
                    modifier+=modifiers[j].value;
                }
            }
        }
    }

    //Click the button to match
    matchBtn.onclick=function(){
        //No text entered
        if(!userInput.value){
            alert("Please enter the text to be matched~");
            userInput.focus();//Get cursor
            return;//Do not execute the following script again
        }

        //No input regular
        if(!pattenInput.value){
            alert("Please enter the text to be matched~");
            pattenInput.focus();
            return;
        }

        pattern=new RegExp("("+pattenInput.value+")",modifier);
        console.log(userInput);
        matchResult.innerHTML=pattern.exec(userInput.value) ? userInput.value.replace(pattern,"<span>$1</span>"): "(No match~)";
    }

    //Click button to replace
    replaceBtn.onclick=function(){
        //No text entered
        if(!userInput.value){
            alert("Please enter the text to be matched~");
            userInput.focus();//Get cursor
            return;//Do not execute the following script again
        }

        //No input regular
        if(!pattenInput.value){
            alert("Please enter the text to be matched~");
            pattenInput.focus();
            return;
        }

        //No replacement text entered
        if(!replaceInput.value){
            alert("Please enter the text to replace~");
            replaceInput.focus();
            return;
        }

        pattern=new RegExp("("+pattenInput.value+")",modifier);
        replaceResult.innerHTML=userInput.value.replace(pattern,"<span>"+replaceInput.value+"</span>");
    }

    //Click quick regular on the right
    for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
            pattenInput.value=this.title;//this Refers to the currently clicked element
        }
    }



</script>
</body>
</html>

Supplement:

() grouping can capture content

(?:) does not participate in capture

$1 $2... For captured content

How to get the captured content:

In the array returned by exec(), the first is the matched content, and the second is the captured content

/\1 / in the pattern, the captured content is referenced directly in the regular

In the second parameter of replace(), $1 (if the second parameter is an anonymous function, the first parameter of the anonymous function is the matched content, and the second parameter begins with the captured content)

RegExp.$1

Posted by Invincible on Sat, 15 Feb 2020 05:59:10 -0800

Programmer Group

JS regular expression creation, matching string, escape, character class, repetition and common characters

Hot Keywords