This content originally appeared on Bits and Pieces - Medium and was authored by chao huang
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/')) // false12. 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'))
//false13. 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.
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- Painless monorepo dependency management with Bit
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.
This content originally appeared on Bits and Pieces - Medium and was authored by chao huang
chao huang | Sciencx (2022-07-08T07:29:17+00:00) 14 Useful JavaScript Regularization Methods. Retrieved from https://www.scien.cx/2022/07/08/14-useful-javascript-regularization-methods/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.