6

14 Useful JavaScript Regularization Methods

 2 years ago
source link: https://blog.bitsrc.io/14-commonly-used-regularization-methods-b97db6956ac4
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

14 Useful JavaScript Regularization Methods

0*xltbpZ0ZlMQX3eun

Photo by Sigmund on Unsplash

1. Thousands Format

In the project, the page display about the amount of currency is often encountered. In order to make the display of the amount more humanized and standardized, a currency formatting strategy needs to be added. This is the so-called digit thousandth formatting.

  • 123456789 => 123,456,789
  • 123456789.123 => 123,456,789.123

2. Parse URL Parameters

You must often encounter such a need to get the value of the parameter of the url, like this:

// url <https://qianlongo.github.io/vue-demos/dist/index.html?name=fatfish&age=100#/home>  
const name = getQueryByName('name') // fatfish 
const age = getQueryByName('age') // 100

With regularity, the getQueryByName function can be easily implemented:

3. camelCase String

JS variables are best written in camelCase. Let’s look at how we can write a function that converts other case formats to camelCase.

1. foo Bar => fooBar 
2. foo-bar---- => fooBar 
3. foo_bar__ => fooBar

4. Lowercase to Uppercase

5. Implement trim()

The trim() method is used to remove whitespace at the beginning and end of the string, and trim can be simulated with regular expressions:

The trim() method does not change the original string, and similarly, the custom implementation of trim1 does not change the original string.

6. HTML Escape

One of the ways to prevent XSS attacks is to perform HTML escaping, the escape character corresponding to the symbol.

Regular processing is as follows:

7. HTML Escaping

With a forward escape, there is a reverse reverse escape, the operation is as follows:

8. Check 24-Hour Clock

For processing time, regular rules are often used, such as the common one: check whether the time format is a legal 24-hour clock:

9. Check Date Format

Common date formats are: yyyy-mm-dd, yyyy.mm.dd, yyyy/mm/dd.

If there is a situation where symbols are used indiscriminately, such as 2021.08/22, it is not a legal date format. We can write a function that checks this:

10. Match Colors

Match hexadecimal color values within a string:

const matchColorRegex = /#(?:[\da-fA-F]{6}|[\da-fA-F]{3})/g const colorString = '#12f3a1 #ffBabd #FFF #123 #586'  console.log(colorString.match(matchColorRegex)) 
// [ '#12f3a1', '#ffBabd', '#FFF', '#123', '#586' ]

11. Determine HTTPS/HTTP

This requirement is also very common, to determine whether the request protocol is HTTPS/HTTP.

const checkProtocol = /^https?:/  console.log(checkProtocol.test('https://google.com/')) // true console.log(checkProtocol.test('http://google.com/')) // true console.log(checkProtocol.test('//google.com/')) // false

12. Check Version Number

The version number must be in x.y.z format, where XYZ is at least one digit, and we can use regular expressions to check:

// x.y.z const versionRegexp = /^(?:\d+\.){2}\d+$/  console.log(versionRegexp.test('1.1.1'))
// trueconsole.log(versionRegexp.test('1.000.1')) 
//trueconsole.log(versionRegexp.test('1.000.1.1'))
//false

13. Get Web Page Img Address

This requirement may be used by crawlers more, and use regular to obtain the addresses of all pictures on the current web page.

14. Format Phone Number

let mobile = '18379836654'  
let mobileReg = /(?=(\d{4})+$)/g   console.log(mobile.replace(mobileReg, '-')) // 183-7983-6654

Bit: Feel the power of component-driven dev

Say hey to Bit. It’s the #1 tool for component-driven app development.

With Bit, you can create any part of your app as a “component” that’s composable and reusable. You and your team can share a toolbox of components to build more apps faster and consistently together.

  • Create and compose “app building blocks”: UI elements, full features, pages, applications, serverless, or micro-services. With any JS stack.
  • Easily share, and reuse components as a team.
  • Quickly update components across projects.
  • Make hard things simple: Monorepos, design systems & micro-frontends.

Try Bit open-source and free→

1*p3UFa6xnmmbrkTzfRm_EmQ.png

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK