Jace's Blog

html에서 사용된 tag별로 개수를 구할 일이 생겼다.
url값을 입력받아 스트림을 정규식 패턴으로 파싱해서 구할 생각이었으나
뭐 좋은 방법이 없을까 하고 구글링을 시작.

오호 firefox 플러그인인 firebug를 이용해서 어떤 url이던 html tag별로 개수를 카운팅 하는
스크립트가 있는게 아닌가.

열라 고맙다!!~

동영상을 보면 아주쉽게 적용할 수 있다.

간단히 설명을 하자면
1. 준비물 : firefox, firebug, 그리고 아래의 스크립트

"use strict";

var CHT = (function () {



    /*global document*/



    var DIV_CLASS = "cht_data",

        HTML5_CLASS = "cht_html5",

        DEPRECATED_CLASS = "cht_deprecated",

        PROPRIETARY_CLASS = "cht_proprietary",

        style, // the STYLE element containing the style definitions for the DIV element

        div; // the DIV element containing the information about the HTML tags



    // for the given strings s and c, returns the string "<h2 class='c'>s</h2>"

    function header(s, c) {

        c = c ? " class='" + c + "'" : "";

        return "<h2" + c + ">" + s + "</h2>";

    }



    // for the given array x and string c, returns a string consisting of "<p class='c'><var>x[i]</var>N</p>"

    // strings for each element in the array where N is the number of occurances of x[i] (tag name) in the document

    function loop(x, c) {

        var L = x.length,

            s = "",

            i;

        c = c ? " class='" + c + "'" : "";

        for (i = 0; i < L; i = i + 1) {

            s += "<p " + c + "><var>" + x[i] + "</var>" + document.getElementsByTagName(x[i]).length  + "</p>";

        }

        return s;

    }



    // Building and appending the STYLE element

    style = document.createElement('style');

    style.innerHTML = [

        '#cht_data{position:fixed;z-index:1000000;top:5px;right:5px;min-height:19px;border:2px solid #063;padding:0 0 2px 6px;cursor:default;background-color:#fff;color:#000}', // container DIV

        '#cht_data div{display:none;width:130px;float:left}', // a column DIV inside the container

        '#cht_data:hover div{display:block}',

        '#cht_data h2,#cht_data p{font-family:Verdana;font-size:10px;color:#000;line-height:1;font-weight:bold;padding:0;text-align:left;letter-spacing:normal}', // H2 and P (reseting the style definitions)

        '#cht_data h2{margin:7px 0;text-decoration:underline}', // H2 (for section titles)

        '#cht_data p{margin:4px 0}', // P (for tags)

        '#cht_data var{display:inline-block;width:90px;font-style:normal;font-weight:normal;text-transform:uppercase}', // VAR (for tag names)

        '#cht_data .cht_html5{color:Blue}', // HTML5 tags are in blue

        '#cht_data .cht_deprecated{color:Red}', // deprecated tags are in red

        '#cht_data .cht_proprietary{color:Purple}', // proprietary tags are in purple

        '#cht_data #cht_contact{margin-top:20px;font-family:Arial}', // contact information

        '#cht_data #cht_contact a{font-weight:normal;color:#000;text-decoration:none;font-family:inherit}', // the e-mail address

        '#cht_data #cht_logo{position:absolute;bottom:-2px;right:-2px;padding:4px 7px 5px 6px;font-size:14px;font-family:Verdana;font-weight:bold;color:#fff;background-color:#063;text-decoration:none}' // the VIDASP.net logo

    ].join('');

    document.getElementsByTagName('head')[0].appendChild(style);



    // Building and appending the DIV element

    div = document.createElement('div');

    div.id = DIV_CLASS;

    div.innerHTML = [

        '<div>',

        header('The root element'),

        loop(['html']),

        header('Document metadata'),

        loop(['head', 'title', 'base', 'link', 'meta', 'style']),

        header('Scripting'),

        loop(['script', 'noscript']),

        header('Sections'),

        loop(['body', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'address']),

        loop(['section', 'nav', 'article', 'aside', 'hgroup', 'header', 'footer'], HTML5_CLASS), '</div><div>',

        header('Grouping content'),

        loop(['p', 'hr', 'br', 'pre', 'blockquote', 'ol', 'ul', 'li', 'dl', 'dt', 'dd', 'div']),

        header('Embedded content'),

        loop(['img', 'iframe', 'object', 'param', 'map', 'area']),

        loop(['figure', 'embed', 'video', 'audio', 'source', 'canvas'], HTML5_CLASS),

        header('Edits'),

        loop(['ins', 'del']),

        '</div><div>',

        header('Text-level semantics'),

        loop(['a', 'em', 'strong', 'small', 'cite', 'q', 'dfn', 'abbr', 'code', 'var', 'samp', 'kbd', 'sup', 'sub', 'i', 'b', 'bdo', 'span']),

        loop(['time', 'mark', 'progress', 'meter', 'ruby', 'rt', 'rp'], HTML5_CLASS),

        '</div><div>',

        header('Tabular data'),

        loop(['table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th']),

        header('Forms'),

        loop(['form', 'fieldset', 'legend', 'label', 'input', 'button', 'select', 'optgroup', 'option', 'textarea']),

        loop(['datalist', 'keygen', 'output'], HTML5_CLASS),

        header('Interactive elements'),

        loop(['details', 'command', 'menu'], HTML5_CLASS),

        '</div><div>',

        header('Deprecated', DEPRECATED_CLASS),

        loop(['listing', 'plaintext', 'xmp', 'applet', 'basefont', 'center', 'dir', 'font', 'isindex', 's', 'strike', 'u', 'acronym', 'tt', 'big'], DEPRECATED_CLASS),

        header('Proprietary', PROPRIETARY_CLASS),

        loop(['image', 'marquee', 'nobr', 'noembed', 'nolayer'], PROPRIETARY_CLASS),

        '<p id="cht_contact">contact: <a href="mailto:sime.vidas@gmail.com">sime.vidas@gmail.com</a></p></div>',

        '<a id="cht_logo" href="http://www.vidasp.net" target="_blank">VIDASP.net</a>'

    ].join('');

    document.body.appendChild(div);



}());

2. 실행방법
 - check하고자 하는 사이트를 firefox를 통해서 연다(방문).
 - firefox 오른쪽 하단에 벌레모양 아이콘(firebug실행 아이콘) 을 클릭한다.
 - firebug의 콘솔(console)탭을 클릭하면 오른쪽에 큰 입력창 (밑에 실행,지움,복사) 에 위의 스크립트를 복사하고
    실행(run)클릭
 - 스크립트 입력창 오른편에 입력한 스크립트가 실행되고 있음이 나타나고 firefox를 통해서 방문한 사이트화면의 오른쪽 상단에 vidasp.net 이라고 녹색 버튼(?) 이 나타난다. 클릭하면 호출한 url에서 사용되어진 tag개수가 나타난다.

출처 : http://www.vidasp.net/HTML_tag-counter.htm