An overview of the

Front-end regulars are not commonly used, but they are also indispensable. The following summarizes the common front-end regulars in my development process to share with you.

Application Scenarios

Scenario 1: Extract the last qualified target string

  • Example 1: Extract the contents of the last () parenthesis
/ / return the result 10.202.2.39 '(123) auth - the console - (234) - consoletest (10.202.2.39)'. The replace (/. * ((. *)). * /, "$1")Copy the code

Scenario 2: Extract the first qualified target string. Represents ignoring priority quantifiers.)

  • Example 1: Extract the contents of the first () bracket
123 '(123) auth-webconsole01- (234) -webconsoletest (10.202.2.39) '.replace(/.*? ((. *?) ). * /, "$1")Copy the code
  • Example 2: Extract the content between the first :: colon
Permission-center_resource_policies "atlas:permission-center_resource_policies:*:action:kk". Replace (/.*? : (. *?) : * /, "$1")Copy the code

Scenario 3: Extract a specified character, such as a matching project identifier in a string

  • Extract fixed format ‘/console/ XXXX /idc’, extract content XXX
/ / return baseui '/ console/baseui/idc. Replace (/ \ / console \ / (. *?) \ /. * /, "$1")Copy the code

Scenario 4: Split strings

  • Divided into svn-svn://svn-test19.gz.netease.com/svn/branches/b1 and 163 two strings
/ / return after the arrays' svn-svn://svn-test19.gz.netease.com/svn/branches/b1-163 segmentation. The match (/ (. *) - (. *) /)Copy the code

Scenario 5: Replace strings

  • Remove the SVN in front of the string svn-svn://svn-test19.gz.netease.com/svn/branches/b1-163 – requirements
/ / return svn://svn-test19.gz.netease.com/svn/branches/b1 'svn-svn://svn-test19.gz.netease.com/svn/branches/b1'.replace(/(svn-)/, '')Copy the code
  • String ‘xiao | | mei | | yu && li | | wu && oi’, demanded the | | && string replace label on both sides of the characters

Such as: < sapn > xiao < / span > < sapn > mei < / sapn > < sapn > yu < / span > < span > li < / span > < span > wu < / span > < span > oi < / span >

let testStr = 'xiao || mei || yu && li || wu && oi'.replace(/(\|\|)|(\&\&)/g, '</span><span>')
let latestStr = `<span>${testStr}</span>`
console.log(latestStr)
Copy the code
  • Extract the URL link from the string and replace it with<a href=" _blank" target="_blank" rel=" referrer">In the form of
/ / extraction and replace text in the HTTP link function changeUrl (content) {const expression = / (FTP | HTTPS?) : \ \ / [9 - a - zA - Z0 - @ : %. _ \ + ~ # =] {1256} \. [a zA - Z0-9 ()] {1, 6} \ b ([- a - zA - Z0-9 ()! @ : % _ \ +. ~ #? & \ \ / =] *)/g const regex = new RegExp(expression) return content.replace( regex, '<a href="$&" target="_blank" rel="noreferrer">$&</a>' ) } const targetStr = ChangeUrl (' test opens target link https://music.163.com/ welcome ') console.log(targetStr)Copy the code