JavaScript常用工具函数汇总（一）

01 为元素添加 on 方法

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

02 为元素添加 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;
};

03 转义 html 标签

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

04 HTML 标签转义

// HTML 标签转义
// @param {Array.} 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, "&")
      .replace(//g, ">");
    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}
// 调用

05 跨浏览器绑定事件

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

06 加入收藏夹

function addFavorite(sURL, sTitle) {
  try {window.external.addFavorite(sURL, sTitle);
  } catch (e) {
    try {window.sidebar.addPanel(sTitle, sURL, "");
    } catch (e) {alert("加入收藏失败，请使用 Ctrl+ D 进行添加");
    }
  }
}

07 提取页面代码中所有网址

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

08 动态加载脚本文件

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) {}}

09 返回顶部的通用方法

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");

10 实现 base64 解码

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

11 确认是否是键盘有效输入值

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

12 全角半角转换

//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("");
}

13 版本对比

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

14 压缩 CSS 样式代码

function compressCss(s) {
  // 压缩代码
  s = s.replace(//*(.|n)*?*//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];
}

15 获取当前路径

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

16 字符串长度截取

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 + "..."
}

17 时间日期格式转换

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"));

18 跨浏览器删除事件

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

19 判断是否以某个字符串结束

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

20 返回脚本内容

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