front-end javascript utils function snap code
npm install utils-snap-fn> Collect some common utility functions for use in work. If you also have some common code, welcome to submit pr for this project.
Front-end tool function code snippets with full typescript support. If you are using TS too, you can use these in Vue, Svelte, React files, try it!
https://utils-snap-fn.netlify.app
``bashnpm
npm i utils-snap-fn -D
:anchor: Usage Example
$3
js
import { isPhoneNum } from 'utils-snap-fn'
`$3
js
import * as snapFn from 'utils-snap-fn'// example
snapFn.isPhoneNum('18811112222') // true
snapFn.isPhoneNum('28811112222') // false
`$3
You can download the
file from the lib directory and use it directly.
It also supports CDN, so you can include it in your HTML file through the CDN link`js
// isPhoneNum('13344445555') // true
`$3
You can download the
file from the lib directory and use it directly.
It is designed to be used in a Node.js environment, so you can import it in your Node.js code:package: API DOC
> The examples below assume the use of import on demand
$3
- isPhoneNum -- check if an phone number
`js
isPhoneNum('13344445555') // true
isPhoneNum('28811112222') // false
`- isSafari -- check if is safari browser
js
isSafari() // true or false
`- isMobile -- check if is Mobile device
js
isMobile() // true or false
`- isEmail -- Check if is an email address
js
isEmail('123@gmail.com') // true
isEmail('123@.exm.com') // false
`- isIdCard -- Check if is an IdCard number
js
isIdCard('13068219990814293X') // true
isIdCard('187329473298') // false
`- isIpv4 -- Check if is an IPV4 address
js
isIpv4('192.168.1.1') // true
isIpv4('19.256.3.2') // false
`- isIpv6 -- Check if is an IPV6 address
js
isIpv6('2001:0db8::1:0:0:1') // true
isIpv6('2001:0db8:85a3::8a2e:03707334') // false
`- isValidUUID -- Check if is an valid UUID
js
// use the generateUUID function
isValidUUID(generateUUID()) // true
`$3
- isArrayEqual -- Check if two arrays are equal
js
isArrayEqual([1, 2, 3], [1, 2, 3]) // true
isArrayEqual([1, 2, 3], [1, 2, 3, 4]) // false
`- removeDuplicatesObj -- Remove duplicate objects
js
const arr = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'John' },
{ id: 4, name: 'Bob' },
{ id: 5, name: 'Jane' },
]const actual = removeDuplicatesObj(arr, 'name')
/*
output:
[
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 4, name: 'Bob' },
]
*/
`$3
- generateUUID -- Generate random UUID
js
generateUUID() // random UUID
`- randomNum -- Generate random number
js
randomNum(11, 800) // random number
`- randomColor -- Generate random hex color or rgba color
js
randomColor('hex') // random hex color, example: #f31a34randomColor('rgb', 0.5) // random rgba color, example: rgba(31, 55, 78, 0.5)
randomColor('rgb') // random rgba color, example: rgba(31, 55, 78, 1)
`$3
- capitalsFirstLetter -- Capitals first letter
js
capitalsFirstLetter('hello') // Hello
`- uppercaseEveryWord -- Capitals every word's first letter
js
uppercaseEveryWord('hello world') // Hello World
`- uppercaseEveryLetters -- Capitals every letters
js
uppercaseEveryLetters('thank you javascript') // THANK YOU JAVASCRIPT
`- lowercaseEveryLetters -- Lowercase every letters
js
lowercaseEveryLetters('THANK YOU VUE') // thank you vue
lowercaseEveryLetters('THANK YOU JAVASCRIPT', 'en') // thank you javascript
`$3
- findTreeNode -- Find a tree node
js
const tree = {
id: 1,
name: 'Parent',
children: [
{
id: 2,
name: 'Child 1',
children: [],
},
{
id: 3,
name: 'Child 2',
children: [
{
id: 4,
name: 'Grandchild',
children: [],
},
],
},
],
}const result = findTreeNode(tree, 'id', 4)
/*
output:
{
id: 4,
name: 'Grandchild',
children: [],
}
*/
`- findAllNode -- Find all objects that meet the criteria, and return an array
js
const tree = {
id: 1,
name: 'Parent',
type: 'folder',
children: [
{
id: 2,
name: 'Child 1',
type: 'file',
children: [],
},
{
id: 3,
name: 'Child 2',
type: 'folder',
children: [
{
id: 4,
name: 'Grandchild',
type: 'file',
children: [],
},
],
},
],
}const result = findAllNode(tree, 'type', 'file')
/*
output:
[
{
id: 2,
name: 'Child 1',
type: 'file',
children: [],
},
{
id: 4,
name: 'Grandchild',
type: 'file',
children: [],
}
]
*/
`$3
- getScrollTop -- Get document scrollTop value
js
const scrollTopVal = getScrollTop()
`- setScrollTop -- Set document scrollTop value
js
setScrollTop(0)
`- scrollTo -- Scroll to document top
js
scrollTo(0, 1)
`$3
- copyToClipboard -- Copy data to clipboard
js
await copyToClipboard('Thank you javascript', () => console.log('Copied!'))
`$3
- formatTimeLength -- Format time length
js
formatTimeLength(45)); // 45秒
formatTimeLength(310)); // 5分10秒
formatTimeLength(7383)); // 2小时3分3秒
formatTimeLength(259200)); // 3天0小时0分0秒``> Continuously updating...