JavaScript tools and functions

Time:2020-9-27

JavaScript tools and functions

If articles and notes can bring you a little help or inspiration, please don’t be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

  • Attached note link, read more high-quality articles in the past, and give me praise and encouragement if you like https://github.com/Wscats/CV/issues/27

Add on method for element

Element.prototype.on = Element.prototype.addEventListener;

NodeList.prototype.on = function (event, fn) {、
    []['forEach'].call(this, function (el) {
        el.on(event, fn);
    });
    return this;
};

Add trigger method to element

Element.prototype.trigger = function(type, data) {
  var event = document.createEvent("HTMLEvents");
  event.initEvent(type, true, true);
  event.data = data || {};
  event.eventName = type;
  event.target = this;
  this.dispatchEvent(event);
  return this;
};

NodeList.prototype.trigger = function(event) {
  []["forEach"].call(this, function(el) {
    el["trigger"](event);
  });
  return this;
};

Escaping HTML tags

function HtmlEncode(text) {
  return text
    .replace(/&/g, "&")
    .replace(/\"/g, '"')
    .replace(/</g, "<")
    .replace(/>/g, ">");
}

HTML tag escape

//HTML tag escape
//@ param {array. < domstring >} tokens of templatedata string type
//@ param {...}.. Vals the operation result tokens of the placeholder
//
function SaferHTML(templateData) {
  var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = String(arguments[i]);
    // Escape special characters in the substitution.
    s += arg
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}
//Call
Var HTML = saferhtml '< p > this is about the introduction of string template < / P >';

Binding events across browsers


function addEventSamp(obj, evt, fn) {
  if (!oTarget) {
    return;
  }
  if (obj.addEventListener) {
    obj.addEventListener(evt, fn, false);
  } else if (obj.attachEvent) {
    obj.attachEvent("on" + evt, fn);
  } else {
    oTarget["on" + sEvtType] = fn;
  }
}

Add favorites

function addFavorite(sURL, sTitle) {
  try {
    window.external.addFavorite(sURL, sTitle);
  } catch (e) {
    try {
      window.sidebar.addPanel(sTitle, sURL, "");
    } catch (e) {
      Alert ("failed to add collection, please use Ctrl + D to add");
    }
  }
}

Extract all URLs in the page code

var aa = document.documentElement.outerHTML
  .match(
    /(url\(|src=|href=)[\"\']*([^\"\'\(\)\<\>\[\] ]+)[\"\'\)]*|(http:\/\/[\w\-\.]+[^\"\'\(\)\<\>\[\] ]+)/gi
  )
  .join("\r\n")
  .replace(/^(src=|href=|url\()[\"\']*|[\"\'\>\) ]*$/gim, "");
alert(aa);

Dynamically load script files

function appendscript(src, text, reload, charset) {
  var id = hash(src + text);
  if (!reload && in_array(id, evalscripts)) return;
  if (reload && $(id)) {
    $(id).parentNode.removeChild($(id));
  }

  evalscripts.push(id);
  var scriptNode = document.createElement("script");
  scriptNode.type = "text/javascript";
  scriptNode.id = id;
  scriptNode.charset = charset
    ? charset
    : BROWSER.firefox
    ? document.characterSet
    : document.charset;
  try {
    if (src) {
      scriptNode.src = src;
      scriptNode.onloadDone = false;
      scriptNode.onload = function() {
        scriptNode.onloadDone = true;
        JSLOADED[src] = 1;
      };
      scriptNode.onreadystatechange = function() {
        if (
          (scriptNode.readyState == "loaded" ||
            scriptNode.readyState == "complete") &&
          !scriptNode.onloadDone
        ) {
          scriptNode.onloadDone = true;
          JSLOADED[src] = 1;
        }
      };
    } else if (text) {
      scriptNode.text = text;
    }
    document.getElementsByTagName("head")[0].appendChild(scriptNode);
  } catch (e) {}
}

General method to return to top

function backTop(btnId) {
  var btn = document.getElementById(btnId);
  var d = document.documentElement;
  var b = document.body;
  window.onscroll = set;
  btn.style.display = "none";
  btn.onclick = function() {
    btn.style.display = "none";
    window.onscroll = null;
    this.timer = setInterval(function() {
      d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
      b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
      if (d.scrollTop + b.scrollTop == 0)
        clearInterval(btn.timer, (window.onscroll = set));
    }, 10);
  };
  function set() {
    btn.style.display = d.scrollTop + b.scrollTop > 100 ? "block" : "none";
  }
}
backTop("goTop");

Implementation of Base64 decoding


function base64_decode(data) {
  var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  var o1,
    o2,
    o3,
    h1,
    h2,
    h3,
    h4,
    bits,
    i = 0,
    ac = 0,
    dec = "",
    tmp_arr = [];
  if (!data) {
    return data;
  }
  data += "";
  do {
    h1 = b64.indexOf(data.charAt(i++));
    h2 = b64.indexOf(data.charAt(i++));
    h3 = b64.indexOf(data.charAt(i++));
    h4 = b64.indexOf(data.charAt(i++));
    bits = (h1 << 18) | (h2 << 12) | (h3 << 6) | h4;
    o1 = (bits >> 16) & 0xff;
    o2 = (bits >> 8) & 0xff;
    o3 = bits & 0xff;
    if (h3 == 64) {
      tmp_arr[ac++] = String.fromCharCode(o1);
    } else if (h4 == 64) {
      tmp_arr[ac++] = String.fromCharCode(o1, o2);
    } else {
      tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);
    }
  } while (i < data.length);
  dec = tmp_arr.join("");
  dec = utf8_decode(dec);
  return dec;
}

Confirm whether it is a valid keyboard input value

function checkKey(iKey) {
  if (iKey == 32 || iKey == 229) {
    return true;
  }/ * spaces and exceptions*/
  if (iKey > 47 && iKey < 58) {
    return true;
  }/ * number*/
  if (iKey > 64 && iKey < 91) {
    return true;
  }/ * letters*/
  if (iKey > 95 && iKey < 108) {
    return true;
  }/ * numeric keyboard 1*/
  if (iKey > 108 && iKey < 112) {
    return true;
  }/ * numeric keyboard 2*/
  if (iKey > 185 && iKey < 193) {
    return true;
  }/ * symbol 1*/
  if (iKey > 218 && iKey < 223) {
    return true;
  }/ * symbol 2*/
  return false;
}

Full angle half angle conversion

//ICASE: 0 all to half, 1 half to all, others not converted
function chgCase(sStr, iCase) {
  if (
    typeof sStr != "string" ||
    sStr.length <= 0 ||
    !(iCase === 0 || iCase == 1)
  ) {
    return sStr;
  }
  var i,
    oRs = [],
    iCode;
  if (iCase) {
    /*Half to all*/
    for (i = 0; i < sStr.length; i += 1) {
      iCode = sStr.charCodeAt(i);
      if (iCode == 32) {
        iCode = 12288;
      } else if (iCode < 127) {
        iCode += 65248;
      }
      oRs.push(String.fromCharCode(iCode));
    }
  } else {
    /*All to half*/
    for (i = 0; i < sStr.length; i += 1) {
      iCode = sStr.charCodeAt(i);
      if (iCode == 12288) {
        iCode = 32;
      } else if (iCode > 65280 && iCode < 65375) {
        iCode -= 65248;
      }
      oRs.push(String.fromCharCode(iCode));
    }
  }
  return oRs.join("");
}

Version comparison

function compareVersion(v1, v2) {
  v1 = v1.split(".");
  v2 = v2.split(".");

  var len = Math.max(v1.length, v2.length);

  while (v1.length < len) {
    v1.push("0");
  }

  while (v2.length < len) {
    v2.push("0");
  }

  for (var i = 0; i < len; i++) {
    var num1 = parseInt(v1[i]);
    var num2 = parseInt(v2[i]);

    if (num1 > num2) {
      return 1;
    } else if (num1 < num2) {
      return -1;
    }
  }
  return 0;
}

Compress CSS style code

function compressCss(s) {
  //Compression code
  S = s.replace (/ \ / \ * (. |)? \ * \ // g, "); // delete comments
  s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
  S = s.replace (/ \, [\ s \. \ #) * \ {/ g, "{"); // fault tolerant processing
  S = s.replace (/;, s *; / g, ";"); // clear continuous semicolons
  S = s.match (/ ^ \ \ s * (\ S + (\ S + \ S +) *); s * $/); // remove the first and last blanks
  return s == null ? "" : s[1];
}

Get current path

var currentPageUrl = "";
if (typeof this.href === "undefined") {
  currentPageUrl = document.location.toString().toLowerCase();
} else {
  currentPageUrl = this.href.toString().toLowerCase();
}

String length truncation

function cutstr(str, len) {
    var temp,
        icount = 0,
        patrn = /[^\x00-\xff]/,
        strre = "";
    for (var i = 0; i < str.length; i++) {
        if (icount < len - 1) {
            temp = str.substr(i, 1);
                if (patrn.exec(temp) == null) {
                   icount = icount + 1
            } else {
                icount = icount + 2
            }
            strre += temp
            } else {
            break;
        }
    }
    return strre + "..."
}

Time date format conversion

Date.prototype.format = function(formatStr) {
  var str = formatStr;
  Var week = ["day", "one", "two", "three", "four", "Five", "six"];
  str = str.replace(/yyyy|YYYY/, this.getFullYear());
  str = str.replace(
    /yy|YY/,
    this.getYear() % 100 > 9
      ? (this.getYear() % 100).toString()
      : "0" + (this.getYear() % 100)
  );
  str = str.replace(
    /MM/,
    this.getMonth() + 1 > 9
      ? (this.getMonth() + 1).toString()
      : "0" + (this.getMonth() + 1)
  );
  str = str.replace(/M/g, this.getMonth() + 1);
  str = str.replace(/w|W/g, Week[this.getDay()]);
  str = str.replace(
    /dd|DD/,
    this.getDate() > 9 ? this.getDate().toString() : "0" + this.getDate()
  );
  str = str.replace(/d|D/g, this.getDate());
  str = str.replace(
    /hh|HH/,
    this.getHours() > 9 ? this.getHours().toString() : "0" + this.getHours()
  );
  str = str.replace(/h|H/g, this.getHours());
  str = str.replace(
    /mm/,
    this.getMinutes() > 9
      ? this.getMinutes().toString()
      : "0" + this.getMinutes()
  );
  str = str.replace(/m/g, this.getMinutes());
  str = str.replace(
    /ss|SS/,
    this.getSeconds() > 9
      ? this.getSeconds().toString()
      : "0" + this.getSeconds()
  );
  str = str.replace(/s|S/g, this.getSeconds());
  return str;
};

//Or
Date.prototype.format = function(format) {
  var o = {
    "M+": this.getMonth() + 1, //month
    "d+": this.getDate(), //day
    "h+": this.getHours(), //hour
    "m+": this.getMinutes(), //minute
    "s+": this.getSeconds(), //second
    "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
    S: this.getMilliseconds() //millisecond
  };
  if (/(y+)/.test(format))
    format = format.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(format))
      format = format.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  }
  return format;
};
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

Deleting events across browsers

function delEvt(obj, evt, fn) {
  if (!obj) {
    return;
  }
  if (obj.addEventListener) {
    obj.addEventListener(evt, fn, false);
  } else if (oTarget.attachEvent) {
    obj.attachEvent("on" + evt, fn);
  } else {
    obj["on" + evt] = fn;
  }
}

Determine whether to end with a string

String.prototype.endWith = function(s) {
  var d = this.length - s.length;
  return d >= 0 && this.lastIndexOf(s) == d;
};

Return script content

function evalscript(s) {
  if (s.indexOf("<script") == -1) return s;
  var p = /<script[^\>]*?>([^\x00]*?)<\/script>/gi;
  var arr = [];
  while ((arr = p.exec(s))) {
    var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
    var arr1 = [];
    arr1 = p1.exec(arr[0]);
    if (arr1) {
      appendscript(arr1[1], "", arr1[2], arr1[3]);
    } else {
      p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;
      arr1 = p1.exec(arr[0]);
      appendscript("", arr1[2], arr1[1].indexOf("reload=") != -1);
    }
  }
  return s;
}

Format CSS style code

function formatCss(s) {
  //Format code
  s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
  S = s.replace (/;, s *; / g, ";"); // clear continuous semicolons
  s = s.replace(/\,[\s\.\#\d]*{/g, "{");
  s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");
  s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");
  s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");
  return s;
}

Get cookie value

function getCookie(name) {
  var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) return unescape(arr[2]);
  return null;
}

Get the get parameter value in the URL

//Usage: if the address is test.htm?t1=1&t2=2&t3=3 , then we can get: get ["T1"], get ["T2"], get ["T3"]
function getGet() {
  querystr = window.location.href.split("?");
  if (querystr[1]) {
    GETs = querystr[1].split("&");
    GET = [];
    for (i = 0; i < GETs.length; i++) {
      tmp_arr = GETs.split("=");
      key = tmp_arr[0];
      GET[key] = tmp_arr[1];
    }
  }
  return querystr[1];
}

Get mobile device initialization size

function getInitZoom() {
  if (!this._initZoom) {
    var screenWidth = Math.min(screen.height, screen.width);
    if (this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()) {
      screenWidth = screenWidth / window.devicePixelRatio;
    }
    this._initZoom = screenWidth / document.body.offsetWidth;
  }
  return this._initZoom;
}

Get page height

function getPageHeight() {
  var g = document,
    a = g.body,
    f = g.documentElement,
    d = g.compatMode == "BackCompat" ? a : g.documentElement;
  return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);
}

Get page scrollleft

function getPageScrollLeft() {
  var a = document;
  return a.documentElement.scrollLeft || a.body.scrollLeft;
}

Get page scrolltop

function getPageScrollTop() {
  var a = document;
  return a.documentElement.scrollTop || a.body.scrollTop;
}

Get page visual height

function getPageViewHeight() {
  var d = document,
    a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
  return a.clientHeight;
}

Get page visible width

function getPageViewWidth() {
  var d = document,
    a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
  return a.clientWidth;
}

Get page width

function getPageWidth() {
  var g = document,
    a = g.body,
    f = g.documentElement,
    d = g.compatMode == "BackCompat" ? a : g.documentElement;
  return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
}

Get mobile device screen width

function getScreenWidth() {
  var smallerSide = Math.min(screen.width, screen.height);
  var fixViewPortsExperiment =
    rendererModel.runningExperiments.FixViewport ||
    rendererModel.runningExperiments.fixviewport;
  var fixViewPortsExperimentRunning =
    fixViewPortsExperiment && fixViewPortsExperiment.toLowerCase() === "new";
  if (fixViewPortsExperiment) {
    if (this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()) {
      smallerSide = smallerSide / window.devicePixelRatio;
    }
  }
  return smallerSide;
}

Get the location of the web page being rolled

function getScrollXY() {
  return document.body.scrollTop
    ? {
        x: document.body.scrollLeft,
        y: document.body.scrollTop
      }
    : {
        x: document.documentElement.scrollLeft,
        y: document.documentElement.scrollTop
      };
}

Gets the parameters on the URL

//Gets the value of a parameter in the URL, case insensitive
//Gets the value of a parameter in the URL, case insensitive,
//The default is to take the parameter in 'hash',
//If other parameters are passed, the parameters in "search" are supported
//@ param {string} name parameter name
export function getUrlParam(name, type = "hash") {
  let newName = name,
    reg = new RegExp("(^|&)" + newName + "=([^&]*)(&|$)", "i"),
    paramHash = window.location.hash.split("?")[1] || "",
    paramSearch = window.location.search.split("?")[1] || "",
    param;

  type === "hash" ? (param = paramHash) : (param = paramSearch);

  let result = param.match(reg);

  if (result != null) {
    return result[2].split("/")[0];
  }
  return null;
}

Verify that the URL link is valid

function getUrlState(URL) {
  var xmlhttp = new ActiveXObject("microsoft.xmlhttp");
  xmlhttp.Open("GET", URL, false);
  try {
    xmlhttp.Send();
  } catch (e) {
  } finally {
    var result = xmlhttp.responseText;
    if (result) {
      if (xmlhttp.Status == 200) {
        return true;
      } else {
        return false;
      }
    } else {
      return false;
    }
  }
}

Gets the width and height of the form’s visible range

function getViewSize() {
  var de = document.documentElement;
  var db = document.body;
  var viewW = de.clientWidth == 0 ? db.clientWidth : de.clientWidth;
  var viewH = de.clientHeight == 0 ? db.clientHeight : de.clientHeight;
  return Array(viewW, viewH);
}

Get maximum mobile device size

function getZoom() {
  var screenWidth =
    Math.abs(window.orientation) === 90
      ? Math.max(screen.height, screen.width)
      : Math.min(screen.height, screen.width);
  if (this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()) {
    screenWidth = screenWidth / window.devicePixelRatio;
  }
  var FixViewPortsExperiment =
    rendererModel.runningExperiments.FixViewport ||
    rendererModel.runningExperiments.fixviewport;
  var FixViewPortsExperimentRunning =
    FixViewPortsExperiment &&
    (FixViewPortsExperiment === "New" || FixViewPortsExperiment === "new");
  if (FixViewPortsExperimentRunning) {
    return screenWidth / window.innerWidth;
  } else {
    return screenWidth / document.body.offsetWidth;
  }
}

Determine whether Android mobile device access

function isAndroidMobileDevice() {
  return /android/i.test(navigator.userAgent.toLowerCase());
}

Determine whether Apple mobile device access

function isAppleMobileDevice() {
  return /iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent.toLowerCase());
}

Determine whether it is a number type

function isDigit(value) {
  var patrn = /^[0-9]*$/;
  if (patrn.exec(value) == null || value == "") {
    return false;
  } else {
    return true;
  }
}

Is it a certain type of mobile phone

//Judging by device pixel ratio and resolution
const isIphonex = () => {
  // X XS, XS Max, XR
  const xSeriesConfig = [
    {
      devicePixelRatio: 3,
      width: 375,
      height: 812
    },
    {
      devicePixelRatio: 3,
      width: 414,
      height: 896
    },
    {
      devicePixelRatio: 2,
      width: 414,
      height: 896
    }
  ];
  // h5
  if (typeof window !== "undefined" && window) {
    const isIOS = /iphone/gi.test(window.navigator.userAgent);
    if (!isIOS) return false;
    const { devicePixelRatio, screen } = window;
    const { width, height } = screen;
    return xSeriesConfig.some(
      item =>
        item.devicePixelRatio === devicePixelRatio &&
        item.width === width &&
        item.height === height
    );
  }
  return false;
};

Determine whether mobile device

function isMobile() {
  if (typeof this._isMobile === "boolean") {
    return this._isMobile;
  }
  var screenWidth = this.getScreenWidth();
  var fixViewPortsExperiment =
    rendererModel.runningExperiments.FixViewport ||
    rendererModel.runningExperiments.fixviewport;
  var fixViewPortsExperimentRunning =
    fixViewPortsExperiment && fixViewPortsExperiment.toLowerCase() === "new";
  if (!fixViewPortsExperiment) {
    if (!this.isAppleMobileDevice()) {
      screenWidth = screenWidth / window.devicePixelRatio;
    }
  }
  var isMobileScreenSize = screenWidth < 600;
  var isMobileUserAgent = false;
  this._isMobile = isMobileScreenSize && this.isTouchScreen();
  return this._isMobile;
}

Is it a mobile phone number

function isMobileNumber(e) {
  var i =
      "134,135,136,137,138,139,150,151,152,157,158,159,187,188,147,182,183,184,178",
    n = "130,131,132,155,156,185,186,145,176",
    a = "133,153,180,181,189,177,173,170",
    o = e || "",
    r = o.substring(0, 3),
    d = o.substring(0, 4),
    s =
      !!/^1\d{10}$/.test(o) &&
      (n.indexOf(r) >= 0
        ? Unicom
        : a.indexOf(r) >= 0
        ? Telecommunications
        : "1349" == d
        ? Telecommunications
        : i.indexOf(r) >= 0
        ? move
        : "unknown");
  return s;
}

Determine whether it is a mobile device access

function isMobileUserAgent() {
  return /iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(
    window.navigator.userAgent.toLowerCase()
  );
}

Determine whether the mouse moves out of the event

function isMouseOut(e, handler) {
  if (e.type !== "mouseout") {
    return false;
  }
  var reltg = e.relatedTarget
    ? e.relatedTarget
    : e.type === "mouseout"
    ? e.toElement
    : e.fromElement;
  while (reltg && reltg !== handler) {
    reltg = reltg.parentNode;
  }
  return reltg !== handler;
}

Determine whether to touch the screen

function isTouchScreen() {
  return (
    "ontouchstart" in window ||
    (window.DocumentTouch && document instanceof DocumentTouch)
  );
}

Determine whether it is a website address


function isURL(strUrl) {
  var regular = /^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%$]*)?)$/i;
  if (regular.test(strUrl)) {
    return true;
  } else {
    return false;
  }
}

Determine whether to open the window

function isViewportOpen() {
  return !!document.getElementById("wixMobileViewport");
}

Load style file

function loadStyle(url) {
  try {
    document.createStyleSheet(url);
  } catch (e) {
    var cssLink = document.createElement("link");
    cssLink.rel = "stylesheet";
    cssLink.type = "text/css";
    cssLink.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(cssLink);
  }
}

Replace address bar

function locationReplace(url) {
  if (history.replaceState) {
    history.replaceState(null, document.title, url);
    history.go(0);
  } else {
    location.replace(url);
  }
}

Resolving offsetx compatibility issues

//Offsetx / y is not supported for Firefox
function getOffset(e) {
  Var target = e.target, // the target object currently triggered
    eventCoord,
    pageCoord,
    offsetCoord;

  //Calculates the distance from the current trigger element to the document
  pageCoord = getPageCoord(target);

  //Calculates the distance from the cursor to the document
  eventCoord = {
    X: window.pageXOffset + e.clientX,
    Y: window.pageYOffset + e.clientY
  };

  //Subtraction gets the coordinates of the cursor to the first positioned parent element
  offsetCoord = {
    X: eventCoord.X - pageCoord.X,
    Y: eventCoord.Y - pageCoord.Y
  };
  return offsetCoord;
}

function getPageCoord(element) {
  var coord = { X: 0, Y: 0 };
  //From the current trigger element to the root node,
  //The sum of the offsetleft or offsettop values of each level of the offsetparent element
  while (element) {
    coord.X += element.offsetLeft;
    coord.Y += element.offsetTop;
    element = element.offsetParent;
  }
  return coord;
}

General method of opening a form

function openWindow(url, windowName, width, height) {
  var x = parseInt(screen.width / 2.0) - width / 2.0;
  var y = parseInt(screen.height / 2.0) - height / 2.0;
  var isMSIE = navigator.appName == "Microsoft Internet Explorer";
  if (isMSIE) {
    var p = "resizable=1,location=no,scrollbars=no,width=";
    p = p + width;
    p = p + ",height=";
    p = p + height;
    p = p + ",left=";
    p = p + x;
    p = p + ",top=";
    p = p + y;
    retval = window.open(url, windowName, p);
  } else {
    var win = window.open(
      url,
      "ZyiisPopup",
      "top=" +
        y +
        ",left=" +
        x +
        ",scrollbars=" +
        scrollbars +
        ",dialog=yes,modal=yes,width=" +
        width +
        ",height=" +
        height +
        ",resizable=no"
    );
    eval("try { win.resizeTo(width, height); } catch(e) { }");
    win.focus();
  }
}

Splicing key value pairs into URL with parameters

export default const fnParams2Url = obj=> {
      let aUrl = []
      let fnAdd = function(key, value) {
        return key + '=' + value
      }
      for (var k in obj) {
        aUrl.push(fnAdd(k, obj[k]))
      }
      return encodeURIComponent(aUrl.join('&'))
 }

Remove URL prefix

function removeUrlPrefix(a) {
  a = a
    .replace(/:/g, ":")
    .replace(/./g, ".")
    .replace(///g, "/");
  while (
    trim(a)
      .toLowerCase()
      .indexOf("http://") == 0
  ) {
    a = trim(a.replace(/http:\/\//i, ""));
  }
  return a;
}

Replace all

String.prototype.replaceAll = function(s1, s2) {
  return this.replace(new RegExp(s1, "gm"), s2);
};

Restore operation

(function() {
  var fn = function() {
    var w = document.documentElement
        ? document.documentElement.clientWidth
        : document.body.clientWidth,
      r = 1255,
      b = Element.extend(document.body),
      classname = b.className;
    if (w < r) {
      //When the width of the form is less than 1255, perform the corresponding operation
    } else {
      //When the width of the form is greater than 1255, perform the corresponding operation
    }
  };
  if (window.addEventListener) {
    window.addEventListener("resize", function() {
      fn();
    });
  } else if (window.attachEvent) {
    window.attachEvent("onresize", function() {
      fn();
    });
  }
  fn();
})();

Scroll to the top

//Use document.documentElement.scrollTop  Or document.body.scrollTop  Gets the distance to the top, from the top
//Roll a small distance. use window.requestAnimationFrame () to scroll.
// @example
// scrollToTop();
function scrollToTop() {
  var c = document.documentElement.scrollTop || document.body.scrollTop;

  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
}

Set cookie value

function setCookie(name, value, Hours) {
  var d = new Date();
  var offset = 8;
  var utc = d.getTime() + d.getTimezoneOffset() * 60000;
  var nd = utc + 3600000 * offset;
  var exp = new Date(nd);
  exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
  document.cookie =
    name +
    "=" +
    escape(value) +
    ";path=/;expires=" +
    exp.toGMTString() +
    ";domain=360doc.com;";
}

Set as home page

function setHomepage() {
  if (document.all) {
    document.body.style.behavior = "url(#default#homepage)";
    document.body.setHomePage("http://w3cboy.com");
  } else if (window.sidebar) {
    if (window.netscape) {
      try {
        netscape.security.PrivilegeManager.enablePrivilege(
          "UniversalXPConnect"
        );
      } catch (e) {
        alert(
          "This operation is rejected by the browser. If you want to enable this function, please enter it in the address bar about:config , and then put the item signed.applets.codebase_ principal_ The support value should be true“
        );
      }
    }
    var prefs = Components.classes[
      "@mozilla.org/preferences-service;1"
    ].getService(Components.interfaces.nsIPrefBranch);
    prefs.setCharPref("browser.startup.homepage", "http://w3cboy.com");
  }
}

Sort by alphabet, sort each row in an array

function setSort() {
  var text = K1.value
    .split(/[\r\n]/)
    .sort()
    . join ("\ R \ \ n"); // order
  var test = K1.value
    .split(/[\r\n]/)
    .sort()
    .reverse()
    . join ("- R / N"); // reverse order
  K1.value = K1.value != text ? text : test;
}

Delay execution

//For example, sleep (1000) means waiting for 1000 milliseconds. It can also be implemented from promise, generator, async / await, etc.
// Promise
const sleep = time => {
  return new Promise(resolve => setTimeout(resolve, time));
};

sleep(1000).then(() => {
  console.log(1);
});


// Generator
function* sleepGenerator(time) {
  yield new Promise(function(resolve, reject) {
    setTimeout(resolve, time);
  });
}

sleepGenerator(1000)
  .next()
  .value.then(() => {
    console.log(1);
  });

//async
function sleep(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}

async function output() {
  let out = await sleep(1000);
  console.log(1);
  return out;
}

output();

function sleep(callback, time) {
  if (typeof callback === "function") {
    setTimeout(callback, time);
  }
}

function output() {
  console.log(1);
}

sleep(output, 1000);

Determine whether to start with a string

String.prototype.startWith = function(s) {
  return this.indexOf(s) == 0;
};

Clear script content

function stripscript(s) {
  return s.replace(/<script.*?>.*?<\/script>/gi, "");
}

Time personalized output function

/*
1. < 60s, displayed as "just"
2. > = 1min and < 60min, display the difference between the current time and "XX minutes ago"
3. > = 60min and < 1day, display the difference between the current time and "today XX: XX"
4. > = 1day & < 1year, display date "XX month XX day XX: XX"
5. > = 1year, the specific date "XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX, XX
*/
function timeFormat(time) {
  var date = new Date(time),
    curDate = new Date(),
    year = date.getFullYear(),
    month = date.getMonth() + 10,
    day = date.getDate(),
    hour = date.getHours(),
    minute = date.getMinutes(),
    curYear = curDate.getFullYear(),
    curHour = curDate.getHours(),
    timeStr;

  if (year < curYear) {
    Timestr = year + "year" + month + "month" + day + "day" + hour + ":" + minute;
  } else {
    var pastTime = curDate - date,
      pastH = pastTime / 3600000;

    if (pastH > curHour) {
      Timestr = month + month + day + day + hour + ":" + minute;
    } else if (pastH >= 1) {
      Timestr: "today" + hour + ":" + minute + "minute";
    } else {
      var pastM = curDate.getMinutes() - minute;
      if (pastM > 1) {
        Timestr = pastm + "minutes ago";
      } else {
        Timestr = just now;
      }
    }
  }
  return timeStr;
}

Full angle to half angle function

function toCDB(str) {
  var result = "";
  for (var i = 0; i < str.length; i++) {
    code = str.charCodeAt(i);
    if (code >= 65281 && code <= 65374) {
      result += String.fromCharCode(str.charCodeAt(i) - 65248);
    } else if (code == 12288) {
      result += String.fromCharCode(str.charCodeAt(i) - 12288 + 32);
    } else {
      result += str.charAt(i);
    }
  }
  return result;
}

Half angle to full angle function

function toDBC(str) {
  var result = "";
  for (var i = 0; i < str.length; i++) {
    code = str.charCodeAt(i);
    if (code >= 33 && code <= 126) {
      result += String.fromCharCode(str.charCodeAt(i) + 65248);
    } else if (code == 32) {
      result += String.fromCharCode(str.charCodeAt(i) + 12288 - 32);
    } else {
      result += str.charAt(i);
    }
  }
  return result;
}

Amount to capital conversion function

function transform(tranvalue) {
  try {
    var i = 1;
    Var dw2 = new array ("," million "," 100 million); // large unit
    Var dw1 = new array ("ten", "hundred", "thousand"); // small unit
    var dw = new Array(
      "Zero",
      "One",
      Two,
      Three,
      "Four",
      "Wu",
      "Lu",
      Seven,
      Eight,
      "Nine"
    ); 
    //For integer part
    //The following is the conversion of lowercase to uppercase, which is shown in the text box of total uppercase
    //Separating integers from decimals
    var source = splits(tranvalue);
    var num = source[0];
    var dig = source[1];
    //Convert integer part
    Var K1 = 0; // small unit
    Var K2 = 0; // large unit
    var sum = 0;
    var str = "";
    Var len = source [0]. Length; // length of integer
    for (i = 1; i <= len; i++) {
      Var n = source [0]. Charat (len - I); // get the number in a certain digit
      var bn = 0;
      if (len - i - 1 >= 0) {
        BN = source [0]. Charat (len - I - 1); // gets the number in the first digit of a digit
      }
      sum = sum + Number(n);
      if (sum != 0) {
        STR = DW [number (n)]. Concat (STR); // get the upper case number corresponding to the number and insert it before the str string
        if (n == "0") sum = 0;
      }
      if (len - i - 1 >= 0) {
        //Within the range of numbers
        if (k1 != 3) {
          //Add small units
          if (bn != 0) {
            str = dw1[k1].concat(str);
          }
          k1++;
        } else {
          //No small units, larger units
          k1 = 0;
          var temp = str.charAt(0);
          If (temp = = ten thousand "|||||||||||||||||||||
            //If there is no number before the large unit, the large unit is omitted
            str = str.substr(1, str.length - 1);
          str = dw2[k2].concat(str);
          sum = 0;
        }
      }
      if (k1 == 3) {
        //Small units to 1000, large units into one
        k2++;
      }
    }
    //Convert decimal part
    var strdig = "";
    if (dig != "") {
      var n = dig.charAt(0);
      if (n != 0) {
        Strdig + = DW [number (n)] + "angle"; // add number
      }
      var n = dig.charAt(1);
      if (n != 0) {
        Strdig + = DW [number (n)] + "Min"; // add numbers
      }
    }
    STR + = yuan "+ strdig;
  } catch (e) {
    Return "0 yuan";
  }
  return str;
}
//Split integers and decimals
function splits(tranvalue) {
  var value = new Array("", "");
  temp = tranvalue.split(".");
  for (var i = 0; i < temp.length; i++) {
    value = temp;
  }
  return value;
}

Clear spaces

String.prototype.trim = function() {
  var reExtraSpace = /^\s*(.*?)\s+$/;
  return this.replace(reExtraSpace, "$1");
};

//Clear left space
function ltrim(s) {
  return s.replace(/^(\s*| *)/, "");
}

//Clear right space
function rtrim(s) {
  return s.replace(/(\s*| *)$/, "");
}

Random number timestamp

function uniqueId() {
  var a = Math.random,
    b = parseInt;
  return (
    Number(new Date()).toString() + b(10 * a()) + b(10 * a()) + b(10 * a())
  );
}

Implementation of utf8 decoding

function utf8_decode(str_data) {
  var tmp_arr = [],
    i = 0,
    ac = 0,
    c1 = 0,
    c2 = 0,
    c3 = 0;
  str_data += "";
  while (i < str_data.length) {
    c1 = str_data.charCodeAt(i);
    if (c1 < 128) {
      tmp_arr[ac++] = String.fromCharCode(c1);
      i++;
    } else if (c1 > 191 && c1 < 224) {
      c2 = str_data.charCodeAt(i + 1);
      tmp_arr[ac++] = String.fromCharCode(((c1 & 31) << 6) | (c2 & 63));
      i += 2;
    } else {
      c2 = str_data.charCodeAt(i + 1);
      c3 = str_data.charCodeAt(i + 2);
      tmp_arr[ac++] = String.fromCharCode(
        ((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)
      );
      i += 3;
    }
  }
  return tmp_arr.join("");
}

Below are some functions recommended by Puxiao submission, which are used as common input value checking and replacing operations, mainly for checking rules in mainland China:

Check whether it is a number and whether the number of decimal places is consistent with the parameter floats

Verification rules:

  • If the parameter floats has a value, the number of digits after the decimal point is checked.
  • If the parameter floats has no value, only check whether it is a number.
function isNum(value,floats=null){
    let regexp = new RegExp(`^[1-9][0-9]*.[0-9]{${floats}}$|^0.[0-9]{${floats}}$`);
    return typeof value === 'number' && floats?regexp.test(String(value)):true;
}
function anysicIntLength(minLength,maxLength){
    let result_str = '';
    if(minLength){
        switch(maxLength){
            case undefined:
                result_str = result_str.concat(`{${minLength-1}}`);
                break;
            case null:
                result_str = result_str.concat(`{${minLength-1},}`);
                break;
            default:
                result_str = result_str.concat(`{${minLength-1},${maxLength-1}}`);
        }
    }else{
        result_str = result_str.concat('*');
    }

    return result_str;
}

Check whether it is a positive non-zero integer

function isInt(value,minLength=null,maxLength=undefined){
    if(!isNum(value)) return false;

    let regexp = new RegExp(`^-?[1-9][0-9]${anysicIntLength(minLength,maxLength)}$`);
    return regexp.test(value.toString());
}

Check whether it is a positive non-zero integer

function isPInt(value,minLength=null,maxLength=undefined) {
    if(!isNum(value)) return false;

    let regexp = new RegExp(`^[1-9][0-9]${anysicIntLength(minLength,maxLength)}$`);
    return regexp.test(value.toString());
}

Check whether it is a non-zero negative integer

function isNInt(value,minLength=null,maxLength=undefined){
    if(!isNum(value)) return false;
    let regexp = new RegExp(`^-[1-9][0-9]${anysicIntLength(minLength,maxLength)}$`);
    return regexp.test(value.toString());
}

Check whether the integer is within the value range

Verification rules:

  • MININT is the smallest integer in the range of values
  • Maxint is the largest integer in the value range
function checkIntRange(value,minInt,maxInt=9007199254740991){
    return Boolean(isInt(value) && (Boolean(minInt!=undefined && minInt!=null)?value>=minInt:true) && (value<=maxInt));
}

Is the mobile phone number of Chinese mainland verified?

function isTel(value) {
    return /^1[3,4,5,6,7,8,9][0-9]{9}$/.test(value.toString());
}

Check whether it is a fax or fixed number in mainland China.

function isFax(str) {
    return /^([0-9]{3,4})?[0-9]{7,8}$|^([0-9]{3,4}-)?[0-9]{7,8}$/.test(str);
}

Check whether it is an email address

function isEmail(str) {
    return /^[a-zA-Z0-9_-][email protected][a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(str);
}

Check whether it is QQ number

Verification rules:

  • 5-13 bit integers not beginning with 0
function isQQ(value) {
    return /^[1-9][0-9]{4,12}$/.test(value.toString());
}

Check whether it is a web address

Verification rules:

  • Start with http: / /, http: / /, FTP: / /, FTP: / /, or none
  • Can not start with WWW (or other secondary domain name), only domain name
  • Other allowed symbols such as /% *? @ & are allowed in the web address
function isURL(str) {
    return /^(https:\/\/|http:\/\/|ftp:\/\/|rtsp:\/\/|mms:\/\/)?[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/.test(str);
}

Check whether it is an IP address without port number

Verification rules:

  • IP format is xxx.xxx.xxx . XXX, the value range of each number is 0-255
  • Numbers other than 0 cannot begin with 0, such as 02
function isIP(str) {
    return /^((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])$/.test(str);
}

Verify that it is an IPv6 address

Verification rules:

  • Supports IPv6 normal format
  • Supports IPv6 compression format
function isIPv6(str){
    return Boolean(str.match(/:/g)?str.match(/:/g).length<=7:false && /::/.test(str)?/^([\da-f]{1,4}(:|::)){1,6}[\da-f]{1,4}$/i.test(str):/^([\da-f]{1,4}:){7}[\da-f]{1,4}$/i.test(str));
}

Is the second generation ID card certified in mainland China?

Verification rules:

  • There are 18 bits in total, and the last bit can be x (both upper and lower case)
  • Cannot start with 0
  • The date of birth will be checked: the year can only start from 18 / 19 / 2 *, the month can only be 01-12, and the day can only be 01-31
function isIDCard(str){
    return /^[1-9][0-9]{5}(18|19|(2[0-9]))[0-9]{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)[0-9]{3}[0-9Xx]$/.test(str);
}

Is the Chinese mainland postal encoding checked?

The parameter value is a number or a string

Verification rules:

  • 6 bits in total and cannot start with 0
function isPostCode(value){
    return /^[1-9][0-9]{5}$/.test(value.toString());
}

Verify that the two parameters are exactly the same, including the type

Verification rules:

  • The values are the same, and the data types are the same
function same(firstValue,secondValue){
    return firstValue===secondValue;
}

Check whether the length of the character is within the specified range

Verification rules:

  • MININT is the smallest length in the range of values
  • Maxint is the maximum length in the value range
function lengthRange(str,minLength,maxLength=9007199254740991) {
    return Boolean(str.length >= minLength && str.length <= maxLength);
}

Verify that the character begins with a letter

Verification rules:

  • Must start with a letter
  • The initial letter is not case sensitive
function letterBegin(str){
    return /^[A-z]/.test(str);
}

Check whether the character is a pure number (integer)

Verification rules:

  • All characters are positive integers (including 0)
  • Can start with 0
function pureNum(str) {
    return /^[0-9]*$/.test(str);
}
function anysicPunctuation(str){
    if(!str) return null;
    let arr = str.split('').map(item => {
        return item = '\' + item;
    });
    return arr.join('|');
}
function getPunctuation(str){
    return anysicPunctuation(str) || '\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\\'|\,|\<|\.|\>|\/|\?';
}
function getExcludePunctuation(str){
    let regexp = new RegExp(`[${anysicPunctuation(str)}]`,'g');
    return getPunctuation(' ~`[email protected]#$%^&*()-_+=\[]{};:"\',<.>/?'.replace(regexp,''));
}

Returns the number of types of string composition (letters, numbers, punctuation marks)

The origin of lip abbreviation: l (letter letter) + I (uint number) + P (punctuation mark)

Description of parameter punctuation:

  • Punctuation refers to the set of acceptable punctuation marks
  • If you want to customize the symbol set, such as “include only middle dashes and underscores”, set the parameter to “-_ “Yes
  • If no value is passed or the default is null, the internal default punctuation set is other English punctuation except null: ~ ‘! @ # $% ^ & * ()-_ +=[]{};:”‘,<.>/?
function getLIPTypes(str,punctuation=null){
    let p_regexp = new RegExp('['+getPunctuation(punctuation)+']');
    return /[A-z]/.test(str) + /[0-9]/.test(str) + p_regexp.test(str);
}

Verify that the number of types formed by the string is greater than or equal to the value of the parameter num. It is usually used to verify the password complexity set by the user.

Verification rules:

  • The parameter num is the type to be formed (letters, numbers, punctuation marks), and the value can only be 1-3.
  • The value of the default parameter num is 1, which means that it contains at least one of letters, numbers and punctuation marks
  • If the value of the parameter num is 2, it means that it contains at least two kinds of letters, numbers and punctuation marks
  • If the value of the parameter num is 3, it means that it must contain both letters, numbers and punctuation marks
  • The parameter punctuation refers to the acceptable punctuation set. For specific setting, please refer to the explanation of punctuation set in getliptypes() method.
function pureLIP(str,num=1,punctuation=null){
    let regexp = new RegExp(`[^A-z0-9|${getPunctuation(punctuation)}]`);
    return Boolean(!regexp.test(str) && getLIPTypes(str,punctuation)>= num);
}

Clear all spaces

function clearSpaces(str){
    return str.replace(/[ ]/g,'');
}

Clear all Chinese characters (including Chinese punctuation)

function clearCNChars(str){
    return str.replace(/[\u4e00-\u9fa5]/g,'');
}

Clear all Chinese characters and spaces

function clearCNCharsAndSpaces(str){
    return str.replace(/[\u4e00-\u9fa5 ]/g,'');
}

Clear all punctuation marks (including spaces) in English except for preserving the punctuation set

All English punctuation marks are: ~ ‘! @ $% ^ & * ()-_ +=[]{};:”‘,<.>/?

The parameter excludepunctuation refers to the set of punctuation marks to be retained, for example, if the value passed is’ 0_ ‘means clear_ All other English punctuation marks except.

function clearPunctuation(str,excludePunctuation=null){
    let regexp = new RegExp(`[${getExcludePunctuation(excludePunctuation)}]`,'g');
    return str.replace(regexp,'');
}

Check for spaces

function haveSpace(str) {
    return /[ ]/.test(str);
}

Check whether Chinese characters are included (including Chinese punctuation marks)

function haveCNChars(str){
    return /[\u4e00-\u9fa5]/.test(str);
}

communication

The article keeps updating continuously, and you can search the front end of WeChat search for official account to facilitate your reading. https://github.com/Wscats/art…
Welcome your attention and exchange

JavaScript tools and functions

Recommended Today

Explain idea git branch backoff specified historical version

scene When I submitted this modification to the local and remote branches, I found that there were still some changes missing in this submission, or this modification was totally wrong, but I also pushed it to the remote repository. How to go back? problem How can the content that has been submitted to the repository […]