hta工具:从.css文件中清理不使用的样式类(id或class类)

最新推荐文章于 2023-08-31 16:03:37 发布

qidizi

最新推荐文章于 2023-08-31 16:03:37 发布

阅读量755

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qidizi/article/details/8779896

版权

js 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

-----------代码----------

<!DOCTYPE html>
<html>
<head>
<title>清除不使用的样式</title>
</head>
<body>
<iframe id="html" application="yes" style="display:none;"></iframe>
选择html文件<input type="file" id="htmlPath" />选择css文件<input type="file" id="cssPath" /><button οnclick="startCls();">开始整理</button><br/>
整理后css内容<textarea id="outCss" /></textarea>

<script>
function getObj(id) {
    return 'string' == typeof id ? document.getElementById(id) : id;
}

function startCls() {
    var hPath = getObj('htmlPath').value;
    var cPath = getObj('cssPath').value;

    if (!hPath || !cPath) {
        alert('请选择css/html文件');return;
    }

    if (!/\.html?$/i.test(hPath) || !/\.css$/i.test(cPath)) {
        alert('html文件后缀必须是.html(htm)/css文件后缀必须是.css');return;
    }

    getObj('html').src = hPath;
    cPath = setInterval(function() {
        if ('complete' == frames[0].document.readyState) {
            document.title = '载入完成';
            clearInterval(cPath);
            getChild(frames[0].document);
        }
    }, 500);
}

function getChild(doc){//获取所有body内的标签的id或class

    var allTag = doc.body.getElementsByTagName('*');
    window.allClass = {};
    var clas;

    for (var i = 0; i < allTag.length; i++) {
        window.allClass[allTag[i].className] = true;//记录标签名

        if (clas = (' ' + allTag[i].className + ' ').match(/ (\w+)(?= )/g) ) {//得到所有class
            for (var ii = 0; ii < clas.length; ii++) {
                window.allClass['.' + clas[ii].toString().replace(' ', '')] = true;
            }
        } else if (/^[a-z]\w*$/i.test(allTag[i].id)) {//只获取以字母开始的id
            window.allClass['#' + allTag[i].id] = true;
        }
    }

    compace();
}

function compace() {//检测class是否用上
    var utf = frames[0].document.charset.toLowerCase().indexOf('utf-8utf8') > -1 ? 1 : 0;//根据html的编码打开css文件模式
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var r = 1;
    var c = 0;
    var r = fso.OpenTextFile(getObj('cssPath').value, r, c, utf);
    var css = r.readAll().replace(/\/\*[\s\S]*?\*\//g, '');//移除注释;
    r.close();

    if (! (css = css.match(/[^\{\}]+\{[^\{\}]*\}/g))) {
        return alert('没有存在class格式内容');
    }

    window.css = [];
    css[0] = css[0].replace(/(@charset [^;]+;)\s?/i, function($0, $1){//确定编码
            window.css.push($1);//编码
            return '';
        }
    );

    for (var vals, tmp, names, name, n, r, i = 0; i < css.length; i++) {
        vals = css[i].split('{');
        names = vals[0].split(',');//根据,号分开成多个name
        tmp = [];
        vals = clSpace('{' + vals[1]);//class规则

        for (var ii = 0; ii < names.length; ii++) {
            name = names[ii].replace(/^\s+|\s+$/g, '');//移除空格

            if ('*' == name) {//直接放回//针对所有标签
                tmp.push(name);
            } else if (/^[a-z]/i.test(name)) {//指定标签式,暂不做对比,可能后面在增加标签上用上此class
                /*
                if (window.allClass[name]) {//存在id//id式
                    tmp.push(name);
                } else {//不存在
                    continue;
                }
                */
                tmp.push(name);
            } else if (/^\./i.test(name)) {//类名式
                n = name.split(' ')[0];

                if (window.allClass[n]) {//类被使用
                    tmp.push(name);
                } else {//未使用
                    continue;
                }
            } else if (/^#/i.test(name)) {
                n = name.split(' ')[0];

                if (window.allClass[n]) {//存在id//id式
                    tmp.push(name);
                } else {//不存在
                    continue;
                }
            } else{//必须是非已知格式//无法预料格式,
                tmp.push(name);
            }
        }

        tmp.length && window.css.push(tmp.join(',') + vals);//有用
    }

    function clSpace (str) {//移除样式内的空格
        str = str.replace(/\s+(?=[\{,;\:\}])/g, '');
        str = str.replace(/([\{,;\:\}])\s+/g, '$1');
        return str;
    }

    getObj('outCss').value = window.css.join('\n');
}

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

-----------------说明--------

只支持一个页面内是否使用的清理,如果多个文件可能使用到,需要把所有可能使用到文件进行手工合并,反正原理是,载入html,取到body下面的所有的子对象的tagname(目前未对此类指定模式进行清理)/id/class样式名,然后把所有的样式名进行检测,如果所有的body子对象都没使用到,就认为未被使用.将清理.