14 Useful JavaScript Regularization Methods

14 Useful JavaScript Regularization Methods
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'))
// true
console.log(versionRegexp.test('1.000.1')) 
//true
console.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→

Learn more


14 Useful JavaScript Regularization Methods was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.

Leave a Reply

Your email address will not be published.