原生JavaScript精選好用的代碼片段

instl 2019-08-07

展開(kāi)全文

文章目錄

1.實(shí)現(xiàn)base64解碼
2.實(shí)現(xiàn)utf8解碼
3.半角轉(zhuǎn)換為全角函數(shù)
4.全角轉(zhuǎn)換為半角函數(shù)
5. 清除html代碼中的腳本
6.獲取當(dāng)前元素樣式
7.格式化CSS樣式代碼
8.壓縮CSS樣式代碼
9.常用的正則表達(dá)式
10.格式化數(shù)字、金額
11.操作DOM class
12.分解url
13.查看全文/收起

1.實(shí)現(xiàn)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;
}

2.實(shí)現(xiàn)utf8解碼

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

3.半角轉(zhuǎn)換為全角函數(shù)

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

4.全角轉(zhuǎn)換為半角函數(shù)

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

5. 清除html代碼中的腳本

function clear_script(html){
    return html.replace(/<script.*?>[\s\S]*?<\/script>|\s+on[a-zA-Z]{3,16}\s?=\s?"[\s\S]*?"|\s+on[a-zA-Z]{3,16}\s?=\s?'[\s\S]*?'|\s+on[a-zA-Z]{3,16}\s?=[^ >]+/ig,"");
}

6.獲取當(dāng)前元素樣式

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

7.格式化CSS樣式代碼

function formatCss(s){//格式化代碼
    s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
    s = s.replace(/;\s*;/g, ";"); //清除連續(xù)分號(hào)
    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;
}

8.壓縮CSS樣式代碼

function compressCss (s) {//壓縮代碼
    s = s.replace(/\/\*(.|\n)*?\*\//g, ""); //刪除注釋
    s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
    s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); //容錯(cuò)處理
    s = s.replace(/;\s*;/g, ";"); //清除連續(xù)分號(hào)
    s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
    return (s == null) ? "" : s[1];
}

9.常用的正則表達(dá)式

//正整數(shù)
/^[0-9]*[1-9][0-9]*$/;
//負(fù)整數(shù)
/^-[0-9]*[1-9][0-9]*$/;
//正浮點(diǎn)數(shù)
/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
//負(fù)浮點(diǎn)數(shù)
/^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
//浮點(diǎn)數(shù)
/^(-?\d+)(\.\d+)?$/;
//email地址
/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
//url地址
/^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/;
或：^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$
//年/月/日（年-月-日、年.月.日）
/^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
//匹配中文字符
/[\u4e00-\u9fa5]/;
//匹配賬號(hào)是否合法(字母開(kāi)頭，允許5-10字節(jié)，允許字母數(shù)字下劃線)
/^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;
//匹配空白行的正則表達(dá)式
/\n\s*\r/;
//匹配中國(guó)郵政編碼
/[1-9]\d{5}(?!\d)/;
//匹配身份證
/\d{15}|\d{18}/;
//匹配國(guó)內(nèi)電話號(hào)碼
/(\d{3}-|\d{4}-)?(\d{8}|\d{7})?/;
//匹配IP地址
/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;
//匹配首尾空白字符的正則表達(dá)式
/^\s*|\s*$/;
//匹配HTML標(biāo)記的正則表達(dá)式
< (\S*?)[^>]*>.*?|< .*? />;
//sql 語(yǔ)句
^(select|drop|delete|create|update|insert).*$
//提取信息中的網(wǎng)絡(luò)鏈接
(h|H)(r|R)(e|E)(f|F) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)?
//提取信息中的郵件地址
\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
//提取信息中的圖片鏈接
(s|S)(r|R)(c|C) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)?
//提取信息中的 IP 地址
(\d+)\.(\d+)\.(\d+)\.(\d+)
//取信息中的中國(guó)手機(jī)號(hào)碼
(86)*0*13\d{9}
//提取信息中的中國(guó)郵政編碼
[1-9]{1}(\d+){5}
//提取信息中的浮點(diǎn)數(shù)（即小數(shù)）
(-?\d*)\.?\d+
//提取信息中的任何數(shù)字
(-?\d*)(\.\d+)?
//電話區(qū)號(hào)
^0\d{2,3}$
//騰訊 QQ 號(hào)
^[1-9]*[1-9][0-9]*$
//賬號(hào)（字母開(kāi)頭，允許 5-16 字節(jié)，允許字母數(shù)字下劃線）
^[a-zA-Z][a-zA-Z0-9_]{4,15}$
//中文、英文、數(shù)字及下劃線
^[\u4e00-\u9fa5_a-zA-Z0-9]+$

10.格式化數(shù)字、金額

function number_format(number, decimals, dec_point, thousands_sep) {
    /*
    * 參數(shù)說(shuō)明：
    * number：要格式化的數(shù)字
    * decimals：保留幾位小數(shù)
    * dec_point：小數(shù)點(diǎn)符號(hào)
    * thousands_sep：千分位符號(hào)
    * */
    number = (number + '').replace(/[^0-9+-Ee.]/g, '');
    var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        s = '',
        toFixedFix = function (n, prec) {
            var k = Math.pow(10, prec);
            return '' + Math.ceil(n * k) / k;
        };
 
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    var re = /(-?\d+)(\d{3})/;
    while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
    }
 
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}
var num = number_format(1234567.089, 2, ".", ",");//1,234,567.09

11.操作DOM class

// 判斷某個(gè)對(duì)象是否有指定的className
function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
 
// 給指定對(duì)象添加className
function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
 
// 刪除className
function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}

12.分解url

// 正則：
/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/
// 結(jié)果格式：
Array 
    [scheme] => http 
    [host] => quchao.com 
    [user] => user 
    [pass] => pass 
    [path] => /about-me 
    [query] => t=100102 
    [fragment] => hash 
)
 
// demo:
'http://user:pass@xuanfenge.com:80/category/?s=css3#first' 
.match(/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/);
// 結(jié)果
["http://user:pass@xuanfenge.com:80/category/?s=css3#first", "http", "user", "pass", "xuanfenge.com", "80", "/category/", "s=css3", "first"]

13.查看全文/收起

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
<title>隱藏功能</title>
</head>
<body>
<div id="d1">
	<div id="fullText">

	人工智能，英文縮寫為AI。它是研究、開(kāi)發(fā)用于模擬、延伸和擴(kuò)展人的智能的理論、方法、技術(shù)及應(yīng)用系統(tǒng)的一門新的技術(shù)科學(xué)。
人工智能是計(jì)算機(jī)科學(xué)的一個(gè)分支，它企圖了解智能的實(shí)質(zhì)，并生產(chǎn)出一種新的能以人類智能相似的方式做出反應(yīng)的智能機(jī)器，該領(lǐng)域的研究包括機(jī)器人、語(yǔ)言識(shí)別、圖像識(shí)別、自然語(yǔ)言處理和專家系統(tǒng)等。人工智能從誕生以來(lái)，理論和技術(shù)日益成熟，應(yīng)用領(lǐng)域也不斷擴(kuò)大，可以設(shè)想，未來(lái)人工智能帶來(lái)的科技產(chǎn)品，將會(huì)是人類智慧的“容器”。人工智能可以對(duì)人的意識(shí)、思維的信息過(guò)程的模擬。人工智能不是人的智能，但能像人那樣思考、也可能超過(guò)人的智能。

</div> 
<div id="subText"></div><a id="btn" onclick="change()" style="color: blue;"></a>

</div>
<script>
    var text;
    function show() {
        text = document.getElementById("fullText").innerHTML;
        document.getElementById("fullText").innerHTML = "";
        document.getElementById("subText").style.float = "left";
        document.getElementById("btn").style.float = "left";
        if(text.length > 20) {
            document.getElementById("subText").innerHTML = text.substring(0, 20);
            document.getElementById("btn").innerHTML = "...查看全文";
        } else {
            document.getElementById("subText").innerHTML = text;
            document.getElementById("btn").innerHTML = "";
        }
    }
    function change() {
        var t = document.getElementById("btn");
        var tt = document.getElementById("subText");
        if(t.innerHTML == "...查看全文") {
            tt.innerHTML = text;
            t.innerHTML = "收起"
        } else {
            tt.innerHTML = text.substring(0, 20);
            t.innerHTML = "...查看全文"
        }
    }
    show();

</script>
</body>
</html>

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： instl > 《javascript》

舉報(bào)/認(rèn)領(lǐng)