JavaScript学习总结（9）——JS常用函数（一）-白红宇

JavaScript学习总结（9）——JS常用函数（一）

阅读量：6653 次

发布时间：2019-06-25

本文共 12017 字，大约阅读时间需要 40 分钟。

本文中，收集了一些比较常用的Javascript函数，希望对学习JS的朋友们有所帮助。

1. 字符串长度截取

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
           12 
           13 
           14 
           15 
           16 
           17 
           18 
           19 
           20 
         
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 + 
"..."
}
        
      

2. 替换全部

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

3. 清除空格

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

4. 清除左空格/右空格

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

5. 判断是否以某个字符串开头

                
           1 
           2 
           3 
         
String.prototype.startWith = 
function
 (s) { 
    
return
 this
.indexOf(s) == 0
}
        
      

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

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

7. 转义html标签

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

8. 时间日期格式转换

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
           12 
           13 
           14 
           15 
           16 
           17 
           18 
         
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
}
        
      

9. 判断是否为数字类型

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

10. 设置cookie值

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
         
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;"
}
        
      

11. 获取cookie值

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

12. 加入收藏夹

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

13. 设为首页

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
           12 
           13 
           14 
           15 
           16 
         
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'
)
    
}
}
        
      

14. 加载样式文件

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
           12 
         
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)
    
}
}
        
      

15. 返回脚本内容

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
           12 
           13 
           14 
           15 
           16 
           17 
           18 
         
function
 evalscript(s) { 
    
if
(s.indexOf(
'<script'
) == -1) 
return
 s;
    
var
 p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;
    
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;
}
        
      

16. 清除脚本内容

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

17. 动态加载脚本文件

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
           12 
           13 
           14 
           15 
           16 
           17 
           18 
           19 
           20 
           21 
           22 
           23 
           24 
           25 
           26 
           27 
           28 
           29 
           30 
           31 
         
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) {}
}
        
      

18. 返回按ID检索的元素对象

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

19. 跨浏览器绑定事件

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
         
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;
    
} 
}
        
      

20. 跨浏览器删除事件

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
         
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;
    
}
}
        
      

21. 为元素添加on方法

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
         
Element.prototype.on = Element.prototype.addEventListener;
 
NodeList.prototype.on = 
function
 (event, fn) {、
    
[][
'forEach'
].call(
this
, 
function
 (el) { 
        
el.on(event, fn);
    
});
    
return
 this
;
};
        
      

22. 为元素添加trigger方法

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
           12 
           13 
           14 
           15 
         
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
;
};
        
      

23. 检验URL链接是否有效

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
           12 
           13 
           14 
           15 
           16 
           17 
           18 
           19 
         
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
); 
         
} 
    
}
}
        
      

24. 格式化CSS样式代码

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
         
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 {\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;
}
        
      

25. 压缩CSS样式代码

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
         
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];
}
        
      

26. 获取当前路径

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

27. 判断是否移动设备

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
           12 
           13 
           14 
           15 
           16 
           17 
         
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;
}
        
      

28. 判断是否移动设备访问

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

29. 判断是否苹果移动设备访问

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

30. 判断是否安卓移动设备访问

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

31. 判断是否Touch屏幕

                
           1 
           2 
           3 
         
function
 isTouchScreen(){ 
    
return
 ((
'ontouchstart'
 in
 window) || window.DocumentTouch && document 
instanceof
 DocumentTouch);
}
        
      

32. 判断是否打开视窗

                
           1 
           2 
           3 
         
function
 isViewportOpen() { 
    
return
 !!document.getElementById(
'wixMobileViewport'
);
}
        
      

33. 获取移动设备初始化大小

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
         
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;
}
        
      

34. 获取移动设备最大化大小

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
           12 
           13 
         
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;
    
}
}
        
      

35. 获取移动设备屏幕宽度

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
         
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;
}
        
      

36. 完美判断是否为网址

                
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
         
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
;
    
}
}
        
      