JavaScript常用工具関数大全書

47537 ワード
JavaScript ツール関数
本論文の実例はJavaScript常用工具関数をまとめたものである。皆さんに参考にしてあげます。具体的には以下の通りです。
元素にonを追加する方法

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

NodeList.prototype.on = function (event, fn) {、
 []['forEach'].call(this, function (el) {
  el.on(event, fn);
 });
 return this;
};
要素にtriggerを追加する方法

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;
};
タグ

function HtmlEncode(text) {
 return text
 .replace(/&/g, "&")
 .replace(/\"/g, '"')
 .replace(/</g, "<")
 .replace(/>/g, ">");
}
HTMLタグの変換

// HTML     
// @param {Array.<DOMString>} templateData       tokens
// @param {...} ..vals            tokens
//
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;
}
//   
var html = SaferHTML`<p>            </p>`;
ブラウザ間のバインディングイベント

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;
 }
}
お気に入りを入れる

function addFavorite(sURL, sTitle) {
 try {
 window.external.addFavorite(sURL, sTitle);
 } catch (e) {
 try {
  window.sidebar.addPanel(sTitle, sURL, "");
 } catch (e) {
  alert("      ，   Ctrl+D    ");
 }
 }
}
ページコードのすべてのURLを抽出します。

var aa = document.documentElement.outerHTML
 .match(
 /(url\(|src=|href=)[\"\']*([^\"\'\(\)\<\>\[\] ]+)[\"\'\)]*|(http:\/\/[\w\-\.]+[^\"\'\(\)\<\>\[\] ]+)/gi
 )
 .join("\r
")
 .replace(/^(src=|href=|url\()[\"\']*|[\"\'\>\) ]*$/gim, "");
alert(aa);
スクリプトファイルを動的に読み込む

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) {}
}
トップに戻る共通の方法

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");
base 64復号を実現する

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;
}
キーボードの有効入力値か確認します。

function checkKey(iKey) {
 if (iKey == 32 || iKey == 229) {
 return true;
 } /*     */
 if (iKey > 47 && iKey < 58) {
 return true;
 } /*  */
 if (iKey > 64 && iKey < 91) {
 return true;
 } /*  */
 if (iKey > 95 && iKey < 108) {
 return true;
 } /*    1*/
 if (iKey > 108 && iKey < 112) {
 return true;
 } /*    2*/
 if (iKey > 185 && iKey < 193) {
 return true;
 } /*  1*/
 if (iKey > 218 && iKey < 223) {
 return true;
 } /*  2*/
 return false;
}
全角半角変換

//iCase: 0   ，1   ，     
function chgCase(sStr, iCase) {
 if (
 typeof sStr != "string" ||
 sStr.length <= 0 ||
 !(iCase === 0 || iCase == 1)
 ) {
 return sStr;
 }
 var i,
 oRs = [],
 iCode;
 if (iCase) {
 /* -> */
 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 {
 /* -> */
 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("");
}
バージョンの比較

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;
}
CSSスタイルコードを圧縮

function compressCss(s) {
 //    
 s = s.replace(/\/\*(.|
)*?\*\//g, ""); //    
 s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
 s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); //    
 s = s.replace(/;\s*;/g, ";"); //      
 s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //      
 return s == null ? "" : s[1];
}
現在のパスを取得

var currentPageUrl = "";
if (typeof this.href === "undefined") {
 currentPageUrl = document.location.toString().toLowerCase();
} else {
 currentPageUrl = this.href.toString().toLowerCase();
}
文字列長切り取り

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 + "..."
}
日付書式の変換

Date.prototype.format = function(formatStr) {
 var str = formatStr;
 var Week = [" ", " ", " ", " ", " ", " ", " "];
 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;
};

//  
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"));
ブラウザをまたいでイベントを削除します。

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;
 }
}
ある文字列で終了するかどうかを判断します。

String.prototype.endWith = function(s) {
 var d = this.length - s.length;
 return d >= 0 && this.lastIndexOf(s) == d;
};
スクリプトの内容を返します

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;
}
CSSスタイルコードの書式設定

function formatCss(s) {
 //     
 s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
 s = s.replace(/;\s*;/g, ";"); //      
 s = s.replace(/\,[\s\.\#\d]*{/g, "{");
 s = s.replace(/([^\s])\{([^\s])/g, "$1 {
\t$2");
 s = s.replace(/([^\s])\}([^
]*)/g, "$1
}
$2");
 s = s.replace(/([^\s]);([^\s\}])/g, "$1;
\t$2");
 return s;
}
クッキー値を取得

function getCookie(name) {
 var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
 if (arr != null) return unescape(arr[2]);
 return null;
}
URLのGETパラメータ値を取得します。

//   ：      test.htm?t1=1&t2=2&t3=3,      ：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];
}
モバイルデバイス初期化サイズを取得

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;
}
ページの高さを取得

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);
}
ページのスケールを取得

function getPageScrollLeft() {
 var a = document;
 return a.documentElement.scrollLeft || a.body.scrollLeft;
}
ページのscrollTopを取得します。

function getPageScrollTop() {
 var a = document;
 return a.documentElement.scrollTop || a.body.scrollTop;
}
ページの可視高さを取得

function getPageViewHeight() {
 var d = document,
 a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
 return a.clientHeight;
}
ページの可視幅を取得

function getPageViewWidth() {
 var d = document,
 a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
 return a.clientWidth;
}
ページの幅を取得

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);
}
モバイルデバイスの画面幅を取得

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;
}
ページが巻かれている場所を取得します。

function getScrollXY() {
 return document.body.scrollTop
 ? {
  x: document.body.scrollLeft,
  y: document.body.scrollTop
  }
 : {
  x: document.documentElement.scrollLeft,
  y: document.documentElement.scrollTop
  };
}
URLのパラメータを取得します。

//   URL      ,      
//   URL      ,      ,
//     'hash'    ，
//           ‘search'    
// @param {String} 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;
}
URLリンクが有効かどうかを確認する。

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;
 }
 }
}
フォームの可視範囲の幅と高さを取得します。

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);
}
モバイルデバイスの最大サイズを取得

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;
 }
}
Androidモバイルデバイスのアクセスかどうかを判断します。

function isAndroidMobileDevice() {
 return /android/i.test(navigator.userAgent.toLowerCase());
}
アップルモバイルデバイスのアクセスかどうかを判断する。

function isAppleMobileDevice() {
 return /iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent.toLowerCase());
}
数字の種類かどうかを判断します。

function isDigit(value) {
 var patrn = /^[0-9]*$/;
 if (patrn.exec(value) == null || value == "") {
 return false;
 } else {
 return true;
 }
}
携帯の機種は何ですか？

//  devicePixelRatio      
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;
};
モバイル機器かどうかを判断する

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;
}
携帯の番号を判断しますか？

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
  ? "  "
  : a.indexOf(r) >= 0
  ? "  "
  : "1349" == d
  ? "  "
  : i.indexOf(r) >= 0
  ? "  "
  : "  ");
 return s;
}
モバイルデバイスアクセスかどうかを判断する。

function isMobileUserAgent() {
 return /iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(
 window.navigator.userAgent.toLowerCase()
 );
}
マウスがイベントから移動したかどうかを判断します。

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;
}
タッチスクリーンかどうかを判断する

function isTouchScreen() {
 return (
 "ontouchstart" in window ||
 (window.DocumentTouch && document instanceof DocumentTouch)
 );
}
URLかどうか判断します。

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;
 }
}
ウィンドウを開くかどうかを判断します。

function isViewportOpen() {
 return !!document.getElementById("wixMobileViewport");
}
スタイルファイルを読み込む

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);
 }
}
アドレスバーを置換

function locationReplace(url) {
 if (history.replaceState) {
 history.replaceState(null, document.title, url);
 history.go(0);
 } else {
 location.replace(url);
 }
}
オフセットX互換性の問題を解決します。

//        offsetX/Y
function getOffset(e) {
 var target = e.target, //          
 eventCoord,
 pageCoord,
 offsetCoord;

 //               
 pageCoord = getPageCoord(target);

 //           
 eventCoord = {
 X: window.pageXOffset + e.clientX,
 Y: window.pageYOffset + e.clientY
 };

 //                    
 offsetCoord = {
 X: eventCoord.X - pageCoord.X,
 Y: eventCoord.Y - pageCoord.Y
 };
 return offsetCoord;
}

function getPageCoord(element) {
 var coord = { X: 0, Y: 0 };
 //                ，
 //    offsetParent     offsetLeft   offsetTop    
 while (element) {
 coord.X += element.offsetLeft;
 coord.Y += element.offsetTop;
 element = element.offsetParent;
 }
 return coord;
}
フォーム共通の方法を開く

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();
 }
}
キーの値をURLにつづり合わせてパラメータを持ちます。

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('&'))
 }
urlプレフィックスを削除

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;
}
すべてを置換

String.prototype.replaceAll = function(s1, s2) {
 return this.replace(new RegExp(s1, "gm"), s2);
};
レジュゼの操作

(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) {
  //        1255          
 } else {
  //        1255          
 }
 };
 if (window.addEventListener) {
 window.addEventListener("resize", function() {
  fn();
 });
 } else if (window.attachEvent) {
 window.attachEvent("onresize", function() {
  fn();
 });
 }
 fn();
})();
トップにスクロール

//   document.documentElement.scrollTop   document.body.scrollTop         ，   
//         。  window.requestAnimationFrame()   。
// @example
// scrollToTop();
function scrollToTop() {
 var c = document.documentElement.scrollTop || document.body.scrollTop;

 if (c > 0) {
 window.requestAnimationFrame(scrollToTop);
 window.scrollTo(0, c - c / 8);
 }
}
クッキー値の設定

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;";
}
トップページに設定

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(
   "         ，        ，         about:config,     signed.applets.codebase_principal_support    true"
  );
  }
 }
 var prefs = Components.classes[
  "@mozilla.org/preferences-service;1"
 ].getService(Components.interfaces.nsIPrefBranch);
 prefs.setCharPref("browser.startup.homepage", "http://w3cboy.com");
 }
}
アルファベット順に並べ替えて、行ごとに配列を並べ替えます。

function setSort() {
 var text = K1.value
 .split(/[\r
]/)
 .sort()
 .join("\r
"); //  
 var test = K1.value
 .split(/[\r
]/)
 .sort()
 .reverse()
 .join("\r
"); //  
 K1.value = K1.value != text ? text : test;
}
遅延実行

//    sleep(1000)      1000  ，    Promise、Generator、Async/Await      。
// 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);
ある文字列で始まるかどうかを判断します。

String.prototype.startWith = function(s) {
 return this.indexOf(s) == 0;
};
スクリプトの内容をクリア

function stripscript(s) {
 return s.replace(/<script.*?>.*?<\/script>/gi, "");
}
時間パーソナライズ出力機能

/*
1、< 60s,    “  ”
2、>= 1min && < 60 min,         “XX   ”
3、>= 60min && < 1day,         “   XX:XX”
4、>= 1day && < 1year,     “XX XX  XX:XX”
5、>= 1year,       “XXXX 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 + " " + month + " " + day + "  " + hour + ":" + minute;
 } else {
 var pastTime = curDate - date,
  pastH = pastTime / 3600000;

 if (pastH > curHour) {
  timeStr = month + " " + day + "  " + hour + ":" + minute;
 } else if (pastH >= 1) {
  timeStr = "   " + hour + ":" + minute + " ";
 } else {
  var pastM = curDate.getMinutes() - minute;
  if (pastM > 1) {
  timeStr = pastM + "   ";
  } else {
  timeStr = "  ";
  }
 }
 }
 return timeStr;
}
全角を半角関数に変換

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;
}
半角を全角関数に変換

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;
}
金額大文字変換関数

function transform(tranvalue) {
 try {
 var i = 1;
 var dw2 = new Array("", " ", " "); //   
 var dw1 = new Array(" ", " ", " "); //   
 var dw = new Array(
  " ",
  " ",
  " ",
  " ",
  " ",
  " ",
  " ",
  " ",
  " ",
  " "
 ); 
 //     
 //                      
 //       
 var source = splits(tranvalue);
 var num = source[0];
 var dig = source[1];
 //      
 var k1 = 0; //    
 var k2 = 0; //    
 var sum = 0;
 var str = "";
 var len = source[0].length; //     
 for (i = 1; i <= len; i++) {
  var n = source[0].charAt(len - i); //          
  var bn = 0;
  if (len - i - 1 >= 0) {
  bn = source[0].charAt(len - i - 1); //             
  }
  sum = sum + Number(n);
  if (sum != 0) {
  str = dw[Number(n)].concat(str); //            ，    str      
  if (n == "0") sum = 0;
  }
  if (len - i - 1 >= 0) {
  //      
  if (k1 != 3) {
   //    
   if (bn != 0) {
   str = dw1[k1].concat(str);
   }
   k1++;
  } else {
   //     ，    
   k1 = 0;
   var temp = str.charAt(0);
   if (temp == " " || temp == " ")
   //               
   str = str.substr(1, str.length - 1);
   str = dw2[k2].concat(str);
   sum = 0;
  }
  }
  if (k1 == 3) {
  //           
  k2++;
  }
 }
 //      
 var strdig = "";
 if (dig != "") {
  var n = dig.charAt(0);
  if (n != 0) {
  strdig += dw[Number(n)] + " "; //   
  }
  var n = dig.charAt(1);
  if (n != 0) {
  strdig += dw[Number(n)] + " "; //   
  }
 }
 str += " " + strdig;
 } catch (e) {
 return "0 ";
 }
 return str;
}
//       
function splits(tranvalue) {
 var value = new Array("", "");
 temp = tranvalue.split(".");
 for (var i = 0; i < temp.length; i++) {
 value = temp;
 }
 return value;
}
スペースをクリア

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

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

//      
function rtrim(s) {
 return s.replace(/(\s*|　*)$/, "");
}
乱数タイムスタンプ

function uniqueId() {
 var a = Math.random,
 b = parseInt;
 return (
 Number(new Date()).toString() + b(10 * a()) + b(10 * a()) + b(10 * a())
 );
}
utf 8復号化を実現

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("");
}
以下はPuxia投稿で紹介されたいくつかの関数です。一般的な入力値チェックと置換操作として使われています。
数値かどうかをチェックします。小数点以下の桁数はパラメータfloatと一致していますか？
検証ルール:
  • パラメータfloatに値があれば、その小数点以下の桁数をチェックします。
  • パラメータfloatが値していない場合、数字かどうかをチェックするだけです。
    • 
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;
}
    ゼロでない正の整数かどうかをチェックします。
    
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());
}
    ゼロでない正の整数かどうかをチェックします。
    
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());
}
    ゼロでない負の整数かどうかをチェックします。
    
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());
}
    整数が取得範囲内にあるかどうかを検証します。
    検証ルール:
  • minIntは、取得範囲の中で最小の整数
    • である。
  • maxIntは、取得範囲で最大の整数
    • である。
    
function checkIntRange(value,minInt,maxInt=9007199254740991){
 return Boolean(isInt(value) && (Boolean(minInt!=undefined && minInt!=null)?value>=minInt:true) && (value<=maxInt));
}
    中国本土の携帯電話番号ですか？
    
function isTel(value) {
 return /^1[3,4,5,6,7,8,9][0-9]{9}$/.test(value.toString());
}
    中国大陸ファックスか固定電話番号かどうかを確認します。
    
function isFax(str) {
 return /^([0-9]{3,4})?[0-9]{7,8}$|^([0-9]{3,4}-)?[0-9]{7,8}$/.test(str);
}
    メールアドレスですか？
    
function isEmail(str) {
 return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(str);
}
    QQ番号ですか？
    検証ルール:
  • 非0で始まる5ビット-13ビットの整数
    • 
function isQQ(value) {
 return /^[1-9][0-9]{4,12}$/.test(value.toString());
}
    ウェブサイトかどうかを検証
    検証ルール:
  • はhttps://、http:/、ftp:/、rtsp:/、mms:/先頭、またはこれらの先頭がない
    • である。
  • は、www先頭（または他の二級ドメイン名）がなくてもいいです。ドメイン名
    • のみです。
  • ページのアドレスには/%*？@&などの他の許可記号
    • 
function isURL(str) {
 return /^(https:\/\/|http:\/\/|ftp:\/\/|rtsp:\/\/|mms:\/\/)?[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/.test(str);
}
    ポート番号を含まないIPアドレスですか？
    検証ルール:
  • IPフォーマットはxxx.xxxxxx.xxx.xxxであり、各デジタルの取得範囲は0-255
    • である。
  • は0以外の数字は0で始まることができません。例えば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);
}
    IPv 6アドレスですか？
    検証ルール:
  • は、IPv 6の通常フォーマット
    • をサポートする。
  • はIPv 6圧縮フォーマット
    • をサポートする。
    
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));
}
    中国大陸の第二世代住民の身分証明書ですか？
    検証ルール:
  • は全部で18人です。最後の方はXでもいいです。
    • です。
  • は0で始まることができません。
  • 生年月日は検査を行います。年は18/19/2*から始まります。月は01-12だけです。日は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);
}
    中国大陸郵便番号かどうかチェックします。
    パラメータvalueは数字または文字列です。
    検証ルール:
  • は全部で6桁です。0から
    • を始めることはできません。
    
function isPostCode(value){
 return /^[1-9][0-9]{5}$/.test(value.toString());
}
    二つのパラメータが同じかどうかを確認します。タイプを含めて。
    検証ルール:
  • 値は同じで、データタイプも同じ
    • です。
    
function same(firstValue,secondValue){
 return firstValue===secondValue;
}
    文字の長さを指定の範囲で確認します。
    検証ルール:
  • minIntは、取得範囲の中で最小の長さ
    • である。
  • maxIntは、取得範囲で最大の長さ
    • である。
    
function lengthRange(str,minLength,maxLength=9007199254740991) {
 return Boolean(str.length >= minLength && str.length <= maxLength);
}
    文字をアルファベットで始めますか？
    検証ルール:
  • は文字で始まる必要があります。
  • 頭の文字は大文字と小文字を区別しません。
    
function letterBegin(str){
 return /^[A-z]/.test(str);
}
    文字が整数かどうかを検証します。
    検証ルール:
  • 文字は全部正の整数(0を含む)
    • です。
  • は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(' ~`!@#$%^&*()-_+=\[]{};:"\',<.>/?'.replace(regexp,''));
}
    文字列構成の種類(文字、数字、句読点)の数を返します。
    LIPの略語の由来：L（letter文字）+I（uint数字）+P（puntuation句読点）
    パラメータの説明:
  • punctionとは、受理可能な句読点セット
    • のことである。
  • カスタム記号セットが必要であれば、例えば「中線と下線のみを含む」パラメータを「-_」に設定します。
    • でいいです
  • 値を伝えない、またはデフォルト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);
}
    文字列構成の種類数がパラメータnumの値より大きいかどうかを確認します。ユーザが設定したパスワードの複雑さを確認するために使用されます。
    検証ルール:
  • パラメータnumは構成が必要な種類（アルファベット、数字、句読点）であり、この値は1-3しかない。
  • のデフォルトパラメータnumの値は1であり、つまり、アルファベット、数字、句読点のうちの1つは少なくとも
    • を含むということです。
  • パラメータnumの値が2であれば、すなわち、少なくともアルファベット、数字、句読点の2つを含む
    • を表します。
  • パラメータnumの値が3であると、すなわち、アルファベット、数字、句読点が同時に含まれる必要があるということです。
  • パラメータpunctationとは、受理可能な句読点セットを指し、具体的な設定は、getLIPTypes()メソッドにおける句読点セットの解釈を参照することができる。
    • 
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);
}
    すべてのスペースをクリア
    
function clearSpaces(str){
 return str.replace(/[ ]/g,'');
}
    すべての中国語の文字をクリアします。中国語の句読点も含まれます。
    
function clearCNChars(str){
 return str.replace(/[\u4e00-\u9fa5]/g,'');
}
    すべての中国語文字とスペースをクリアします。
    
function clearCNCharsAndSpaces(str){
 return str.replace(/[\u4e00-\u9fa5 ]/g,'');
}
    句読点セットを保持する以外に、他のすべての英字の句読点（スペースを含む）を消去します。
    すべての英字の句読点は~！@(*)-_+='，'，'，'/？？？？？？？？？？？？？？？？？？？？
    パラメータexclude Punctionとは、保留されている句読点セットを指し、例えば、伝達された値が「*」である場合、をクリアする以外のすべての英字記号。
    
function clearPunctuation(str,excludePunctuation=null){
 let regexp = new RegExp(`[${getExcludePunctuation(excludePunctuation)}]`,'g');
 return str.replace(regexp,'');
}
    スペースを含むかどうかを確認します。
    
function haveSpace(str) {
 return /[ ]/.test(str);
}
    中国語の文字(中国語の句読点を含む)が含まれているかどうかを確認します。
    
function haveCNChars(str){
 return /[\u4e00-\u9fa5]/.test(str);
}
    興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
    もっと多くのJavaScriptに関する内容は当駅のテーマを調べられます。「JavaScript常用関数技術のまとめ」、「javascript対象向け入門教程」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」及び「JavaScript数学演算の使い方のまとめ」
    本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。
    Java concurrencyスレッド池のスレッド池原理（二）_動力ノードJava学院の整理
    Javaキーワードvolatileとsynchronizedの役割と違い