utils-es

javascript util functions with ES syntax

Table of Contents

• Usage
• - formatter
  • thousandsSeparatorFormat(n)
• - url
  • getQueryString(queryKey, searchString)
  • paramsToQueryString(params)
• - string
  • changePosition(souce, startPosition, length, targetPosition)
• - dom
• - event
• - queue
• - safe
• - transform
• - lang
• For Commonjs module

Usage

npm install utils-es
# or
yarn add utils-es

- formatter

thousandsSeparatorFormat(n)

• @description Thousands Separator Formatter
• @param {Number | String} n
• @return { String }

import { thousandsSeparatorFormat } from "utils-es/formatter";
// import formatter from "utils-es/formatter";
// import { formatter } from "utils-es";

const result = thousandsSeparatorFormat(-123456.78);
// const result = formatter.thousandsSeparatorFormat(-123456.78);
// result=> -123,456.78

- url

getQueryString(queryKey, searchString)

• @method getQueryString
• @param queryString {String}
• @param searchString {String}
• @return {String}

import { getQueryString } from "utils-es/url";
// import url from "utils-es/url";
// import { url } from "utils-es";

const result = getQueryString("key");
// const result = url.getQueryString("key");
// result=> query value for key

const result = getQueryString("key", "https://localhost/?key=value");
// result => "value"

paramsToQueryString(params)

• transform params object to query string
• @param {Object} params
• @return { String } query string

paramsToQueryString({
  name: 'tom',
  age: 16
}); // return name=tom&age=16

- string

changePosition(souce, startPosition, length, targetPosition)

• @description move a part from string to another position
• @param {String | Number} source source content
• @param {Integer} startPosition move start position
• @param {Integer} length move length
• @param {Integer} targetPosition target position to put

import { changePosition } from "utils-es/string";
// import string from "utils-es/string";
// import { string } from "utils-es";

const result = changePosition("abcdefg", 0, 2, 7); // return "cdefgab"
// const result = string.changePosition("abcdefg", 0, 2, 7);
// result=> string position changed

- dom

createElement(tagName, attrs)

• create dom element
• @param {String} tagName dom tag name
• @param {Object} attrs dom attributes
• @return { DomElement} dom element

import { createElement } from "utils-es/dom";
const link = createElement("a", {
  class: "link",
  href: "https://www.google.com",
  target: "_blank",
  innerText: "Google"
}); // return HTMLElement

removeElement(element)

• remove element
• @param {DomElement} element

import { removeElement } from "utils-es/dom";
removeElement(link);

addClass(element, className)

• add new class name
• @param {DomElement} element
• @param {String | Array} className
• @returns {DomElement} element

import { addClass } from "utils-es/dom";
addClass(link, "hover");
addClass(link, "hover active");
addClass(link, ["hover", "active"]);

removeClass(element, className)

• remove class name from element
• @param {DomElement} element
• @param {String | Array} className
• @returns {DomElement} element

import { removeClass } from "utils-es/dom";
removeClass(link, "hover");
removeClass(link, "hover active");
removeClass(link, ["hover", "active"]);

- event

- queue

debounce(func, wait, immediate)

• @param {Function} func
• @param {Integer} wait debounce wait time in milliseconds
• @param {Boolean} immediate
• @returns {Function} new Function

import { debounce } from "utils-es/queue";
const newFunc = debounce(oldFunc);

- safe

xssFilter(source)

• xss filter
• @param {String} source source content
• @returns {String} html safe content

import { xssFilter } from "utils-es/safe";
const safeInnerHTML = xssFilter(originalHTMLString));
// replace all script tag to <script>

htmlSafe(source)

• html source safe encode
• @param {String} source raw html content
• @returns safe html

import { htmlSafe } from "utils-es/safe";
const safeInnerHTML = htmlSafe(originalHTMLString));

// html safe encode will replace below characters
// replace(/&/g, "&")
// replace(/>/g, ">")
// replace(/</g, "&lt;")
// replace(/"/g, "&quot;")
// replace(/'/g, "&#39;")

- transform

data2Set(source)

• data2Set transform data to Set Object
• @param {Any} data
• @return {Set | Any} Set object or source data

import { data2Set } from "utils-es/transform";
data2Set(); // return Set(0)
data2Set(1); // return Set(1) {1}
data2Set("foo"); // return Set(1) {"foo"}
data2Set([1,2,3]); // return Set(3) {1,2,3}

- lang

isType(source, type)

• check varible type
• @param {Any} source
• @param {String} type
• @return {String | Boolean}

import { isType } from "utils-es/lang";
isType(1); // return "Number"
isType(1, "Number"); // return true

For Commonjs module

Use modules in utils-es/dist

files in dist folder are umd modules

const utils = require("utils-es/dist");
const formatter = require("utils-es/dist/formatter");
const { getQueryString } = require("utils-es/dist/url");