100个直接可以拿来用的JavaScript实用功能代码片段(一)

标签： javascript 功能 代码 | 发表时间：2013-09-12 14:23 | 作者：
出处：http://www.iteye.com

1、原生JavaScript实现字符串长度截取

 1    function cutstr(str, len) {
 2         var temp;
 3         var icount = 0;
 4         var patrn = /[^\x00-\xff]/;
 5         var strre = "";
 6         for (var i = 0; i < str.length; i++) {
 7             if (icount < len - 1) {
 8                 temp = str.substr(i, 1);
 9                 if (patrn.exec(temp) == null) {
10                     icount = icount + 1
11                 } else {
12                     icount = icount + 2
13                 }
14                 strre += temp
15             } else {
16                 break
17             }
18         }
19         return strre + "..."
20     }

 

2、原生JavaScript获取域名主机

 1     function getHost(url) {
 2         var host = "null";
 3         if(typeof url == "undefined"|| null == url) {
 4             url = window.location.href;
 5         }
 6         var regex = /^\w+\:\/\/([^\/]*).*/;
 7         var match = url.match(regex);
 8         if(typeof match != "undefined" && null != match) {
 9             host = match[1];
10         }
11         return host;
12 }

 

3、原生JavaScript清除空格

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


4、原生JavaScript替换全部

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


5、原生JavaScript转义html标签

1 function HtmlEncode(text) {
2         return text.replace(/&/g, '&amp').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
3     }

 
6、原生JavaScript还原html标签

1 function HtmlDecode(text) {
2         return text.replace(/&amp;/g, '&').replace(/&quot;/g, '\"').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
3     }

 
7、原生JavaScript时间日期格式转换

 1     Date.prototype.Format = function(formatStr) {
 2         var str = formatStr;
 3         var Week = ['日', '一', '二', '三', '四', '五', '六'];
 4         str = str.replace(/yyyy|YYYY/, this.getFullYear());
 5         str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100));
 6         str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1));
 7         str = str.replace(/M/g, (this.getMonth() + 1));
 8         str = str.replace(/w|W/g, Week[this.getDay()]);
 9         str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate());
10         str = str.replace(/d|D/g, this.getDate());
11         str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours());
12         str = str.replace(/h|H/g, this.getHours());
13         str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes());
14         str = str.replace(/m/g, this.getMinutes());
15         str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds());
16         str = str.replace(/s|S/g, this.getSeconds());
17         return str
18     }


8、原生JavaScript判断是否为数字类型

1 function isDigit(value) {
2         var patrn = /^[0-9]*$/;
3         if (patrn.exec(value) == null || value == "") {
4             return false
5         } else {
6             return true
7         }
8     }


9、原生JavaScript设置cookie值

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


10、原生JavaScript获取cookie值

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


11、原生JavaScript加入收藏夹

 1 function AddFavorite(sURL, sTitle) {
 2         try {
 3             window.external.addFavorite(sURL, sTitle)
 4         } catch(e) {
 5             try {
 6                 window.sidebar.addPanel(sTitle, sURL, "")
 7             } catch(e) {
 8                 alert("加入收藏失败，请使用Ctrl+D进行添加")
 9             }
10         }
11     }

 
12、原生JavaScript设为首页

 1 function setHomepage() {
 2         if (document.all) {
 3             document.body.style.behavior = 'url(#default#homepage)';
 4             document.body.setHomePage('http://www.jq-school.com')
 5         } else if (window.sidebar) {
 6             if (window.netscape) {
 7                 try {
 8                     netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")
 9                 } catch(e) {
10                     alert("该操作被浏览器拒绝，如果想启用该功能，请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true")
11                 }
12             }
13             var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
14             prefs.setCharPref('browser.startup.homepage', 'http://www.jq-school.com')
15         }
16     }

 
13、原生JavaScript判断IE6

1 var ua = navigator.userAgent.toLowerCase();
2     var isIE6 = ua.indexOf("msie 6") > -1;
3     if (isIE6) {
4         try {
5             document.execCommand("BackgroundImageCache", false, true)
6         } catch(e) {}
7     }

 
14、原生JavaScript加载样式文件

 1 function LoadStyle(url) {
 2         try {
 3             document.createStyleSheet(url)
 4         } catch(e) {
 5             var cssLink = document.createElement('link');
 6             cssLink.rel = 'stylesheet';
 7             cssLink.type = 'text/css';
 8             cssLink.href = url;
 9             var head = document.getElementsByTagName('head')[0];
10             head.appendChild(cssLink)
11         }
12     }

 

15、原生JavaScript返回脚本内容

 1 function evalscript(s) {
 2         if(s.indexOf('<script') == -1) return s;
 3         var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;
 4         var arr = [];
 5         while(arr = p.exec(s)) {
 6             var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
 7             var arr1 = [];
 8             arr1 = p1.exec(arr[0]);
 9             if(arr1) {
10                 appendscript(arr1[1], '', arr1[2], arr1[3]);
11             } else {
12                 p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;
13                 arr1 = p1.exec(arr[0]);
14                 appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
15             }
16         }
17         return s;
18     }

 

16、原生JavaScript清除脚本内容

1 function stripscript(s) {
2         return s.replace(/<script.*?>.*?<\/script>/ig, '');
3     }

 

17、原生JavaScript动态加载脚本文件

 1 function appendscript(src, text, reload, charset) {
 2         var id = hash(src + text);
 3         if(!reload && in_array(id, evalscripts)) return;
 4         if(reload && $(id)) {
 5             $(id).parentNode.removeChild($(id));
 6         }
 7      
 8         evalscripts.push(id);
 9         var scriptNode = document.createElement("script");
10         scriptNode.type = "text/javascript";
11         scriptNode.id = id;
12         scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset);
13         try {
14             if(src) {
15                 scriptNode.src = src;
16                 scriptNode.onloadDone = false;
17                 scriptNode.onload = function () {
18                     scriptNode.onloadDone = true;
19                     JSLOADED[src] = 1;
20                 };
21                 scriptNode.onreadystatechange = function () {
22                     if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) {
23                         scriptNode.onloadDone = true;
24                         JSLOADED[src] = 1;
25                     }
26                 };
27             } else if(text){
28                 scriptNode.text = text;
29             }
30             document.getElementsByTagName('head')[0].appendChild(scriptNode);
31         } catch(e) {}
32     }

 

18、原生JavaScript返回按ID检索的元素对象

1 function $(id) {
2         return !id ? null : document.getElementById(id);
3     }

 

19、原生JavaScript返回浏览器版本内容

 1 function browserVersion(types) {
 2         var other = 1;
 3         for(i in types) {
 4             var v = types[i] ? types[i] : i;
 5             if(USERAGENT.indexOf(v) != -1) {
 6                 var re = new RegExp(v + '(\\/|\\s)([\\d\\.]+)', 'ig');
 7                 var matches = re.exec(USERAGENT);
 8                 var ver = matches != null ? matches[2] : 0;
 9                 other = ver !== 0 && v != 'mozilla' ? 0 : other;
10             }else {
11                 var ver = 0;
12             }
13             eval('BROWSER.' + i + '= ver');
14         }
15         BROWSER.other = other;
16     }

 

20、原生JavaScript元素显示的通用方法

 1 function $(id) {
 2         return !id ? null : document.getElementById(id);
 3     }
 4     function display(id) {
 5         var obj = $(id);
 6         if(obj.style.visibility) {
 7             obj.style.visibility = obj.style.visibility == 'visible' ? 'hidden' : 'visible';
 8         } else {
 9             obj.style.display = obj.style.display == '' ? 'none' : '';
10         }
11     }

 

21、原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法?用如下函数实现

1 function insertAfter(newChild,refChild){ 
2     var parElem=refChild.parentNode; 
3     if(parElem.lastChild==refChild){ 
4         refChild.appendChild(newChild); 
5     }else{ 
6         parElem.insertBefore(newChild,refChild.nextSibling); 
7     } 
8 }

 

22、原生JavaScript中兼容浏览器绑定元素事件

1 function addEventSamp(obj,evt,fn){ 
2     if (obj.addEventListener) { 
3         obj.addEventListener(evt, fn, false); 
4     }else if(obj.attachEvent){ 
5         obj.attachEvent('on'+evt,fn); 
6     } 
7 }

 

23、原生JavaScript光标停在文字的后面，文本框获得焦点时调用

1 function focusLast(){ 
2     var e = event.srcElement; 
3     var r =e.createTextRange(); 
4     r.moveStart('character',e.value.length); 
5     r.collapse(true); 
6     r.select(); 
7 }

 

24、原生JavaScript检验URL链接是否有效

 1 function getUrlState(URL){ 
 2     var xmlhttp = new ActiveXObject("microsoft.xmlhttp"); 
 3     xmlhttp.Open("GET",URL, false);  
 4     try{  
 5         xmlhttp.Send(); 
 6     }catch(e){
 7     }finally{ 
 8         var result = xmlhttp.responseText; 
 9         if(result){ 
10             if(xmlhttp.Status==200){ 
11                 return(true); 
12             }else{ 
13                 return(false); 
14             } 
15         }else{ 
16             return(false); 
17         } 
18     } 
19 }

 

25、原生JavaScript格式化CSS样式代码

1 function formatCss(s){//格式化代码
2     s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
3     s = s.replace(/;\s*;/g, ";"); //清除连续分号
4     s = s.replace(/\,[\s\.\#\d]*{/g, "{");
5     s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");
6     s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");
7     s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");
8     return s;
9 }

 

26、原生JavaScript压缩CSS样式代码

1 function yasuoCss (s) {//压缩代码
2     s = s.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释
3     s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
4     s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理
5     s = s.replace(/;\s*;/g, ";"); //清除连续分号
6     s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
7     return (s == null) ? "" : s[1];
8 }

 

27、原生JavaScript获取当前路径

1 var currentPageUrl = "";
2 if (typeof this.href === "undefined") {
3     currentPageUrl = document.location.toString().toLowerCase();
4 }
5 else {
6     currentPageUrl = this.href.toString().toLowerCase();
7 }

 

28、原生JavaScriptIP转成整型

1 function _ip2int(ip){
2     var num = 0;
3     ip = ip.split(".");
4     num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
5     num = num >>> 0;
6     return num;
7 }

 

29、原生JavaScript整型解析为IP地址

 1 function _int2iP(num){
 2     var str;
 3     var tt = new Array();
 4     tt[0] = (num >>> 24) >>> 0;
 5     tt[1] = ((num << 8) >>> 24) >>> 0;
 6     tt[2] = (num << 16) >>> 24;
 7     tt[3] = (num << 24) >>> 24;
 8     str = String(tt[0]) + "." + String(tt[1]) + "." + String(tt[2]) + "." + String(tt[3]);
 9     return str;
10 }

 

30、原生JavaScript实现checkbox全选与全不选

 1 function checkAll() {
 2     var selectall = document.getElementById("selectall");
 3     var allbox = document.getElementsByName("allbox");
 4     if (selectall.checked) {
 5         for (var i = 0; i < allbox.length; i++) {
 6             allbox[i].checked = true;
 7         }
 8     } else {
 9         for (var i = 0; i < allbox.length; i++) {
10             allbox[i].checked = false;
11         }
12     }
13 }

 

100个直接可以拿来用的JavaScript实用功能代码片段(二)  



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [javascript 功能 代码] 推荐：

两行 JavaScript 代码

- MessyCS - Dreamer&#39;s Blog
最近看到了两行 JavaScript 代码，很受启发. 在 JavaScript 中，我们可以获取HTML元素的属性值，例如 element.id. 但是，因为 for 和 class 是 JavaScript 中的关键字，所以在 JavaScript 中这两个属性名称分别用 htmlFor 和 className 代替，于是在封装的时候需要先对这两个属性进行特殊判断.

100个直接可以拿来用的JavaScript实用功能代码片段(一)

- - ITeye博客
1、原生JavaScript实现字符串长度截取. 2、原生JavaScript获取域名主机. 3、原生JavaScript清除空格. 4、原生JavaScript替换全部. 5、原生JavaScript转义html标签. 6、原生JavaScript还原html标签. 7、原生JavaScript时间日期格式转换.

一段Javascript的代码

- Deland - 酷壳 - CoolShell.cn
我们先看一段Javascript的代码，如下所示：（你能看出来这是干什么的. 这段代码来自BlackHat DC 2011（(黑帽安全大会，全世界最大两个黑客大会之一，另一个是Defcon）中的一个叫Ryan Barnett黑客做的XSS Street-Fight. 的演讲(XSS是Web上比较经典的跨站式攻击，操作起来也有些复杂)，一共69页，基本上都是一些比较枯燥的Javascript，不过这段代码挺有意思的，如果上面这段代码换个样子：.

JavaScript代码复用模式

- - SegmentFault 最新的文章
代码复用，顾名思义就是对曾经编写过的代码的一部分甚至全部重新加以利用，从而构建新的程序. 在谈及代码复用的时候，我们首先可以想到的是 继承性. 优先使用对象组合，而不是类继承. 在js中，由于没有类的概念，因此实例的概念也就没多大意义，js中的对象是简单的键-值对，可以动态的创建和修改它们. 但在 js中，我们可以使用构造函数和 new操作符来实例化一个对象，这与其他使用类的编程语言在语法上有其相似之处.

更好的用vim浏览Javascript代码

- cRabdanceR - Kejun&#39;s Blog
vim默认没有一般IDE的outline视图，浏览长篇Javascript源文件很麻烦，taglist插件正是弥补这点不足. 它可以将所有方法和变量分级罗列出来，一目了然. taglist是依赖强大的ctags实现的. ctags支持41种编程语言，其中包括Javascript，但对Javascript支持较随意.

使用 JSLint 保证 JavaScript 代码质量

- zhibin - IBM developerWorks 中国 : Web development : Articles,Tutorials
随着富 Web 前端应用的出现，开发人员不得不重新审视并重视 JavaScript 语言的能力和使用，抛弃过去那种只靠“复制 / 粘贴”常用脚本完成简单前端任务的模式. JavaScript 语言本身是一种弱类型脚本语言，具有相对于 C++ 或 Java 语言更为松散的限制，一切以函数为中心的函数式编程思想也为开发人员提供了更加灵活的语法实现.

也谈JavaScript代码性能优化

- 可乐加糖 - Fdream&#39;s Blog
差不多两年前写了个选择器whiz，除在DOM查找方面做了许多优化工作之外，还在代码优化上做了很多工作，一直没有分享. 抽空总结一下，基本上在jQuery、Mootools和YUI的源码里面都可以看到这些写法. 有些是已经在网上分享很多遍了，众所周知的，也有一些可能写了多年的JavaScript的开发人员也不一定想得到的.

用JSLint精炼提升JavaScript代码

- - 博客 - 伯乐在线
英文原文： Using JSLint to Refine Your Code，编译： 伯乐在线 – 胡蓉（ @蓉_inShanghai）. 由于移动应用的盛行和HTML5的广泛运用，JavaScript正越来越流行. JavaScript受欢迎的部分原因是因为它的灵活便捷，你可以快速上手，它不需要重量级的开发环境，也不需要第三方应用支持，只要你打开一个文本编辑器，然后保存，最后通过网页 浏览器运行即可.

JavaScript：避免代码的重复执行

- - WebHek
我喜欢到一些大型网站上去翻阅它们的原代码，期望能找到一些可以应用到自己的代码中的模式，或发现一些之前从未听说过的工具和技巧. 可是，在我查看这些大型网站的源代码时，经常会发现一个问题，那就是重复的代码执行，重复的功能应用. 下面就是一些在查看它们的源代码时发现一些问题，把这些分享给大家，希望能让你们更加简洁高效的写出JavaScript代码.

Android WebView中的JavaScript代码使用

- - 博客园_首页
　　上一篇博文： Android WebView使用基础已经说了一些Android中WebView的基本使用. 　　本篇文章主要介绍WebView中的JavaScript代码的执行相关，已经JS代码与Android代码的互相调用. 　　（因为本人对Web开发并不是很熟悉，所以如果有哪些地方说得不对，还请指正.