Fire JS Bin - Tabifier

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

//gogo global variable
(function(win) {
  var level = 0;
  var LOOP_SIZE = 100;
  var singleLine = false;
  var tabSize = 2;
  var tabChar = tabSize == 1 ? '\t' : ' ';
  var rowColumn = 80;
  
  win.runTabifier = function(code, options) {
    if (options.tabSize) tabSize = options.tabSize;
    if (options.tabChar) tabChar = options.tabChar;
    if (options.rowColumn) rowColumn = options.rowColumn;
    if (options.singleLine) singleLine = options.singleLine;

if ('html' == options.type) code = cleanHTML(code);
    if ('css' == options.type) code = cleanCSS(code);
    if ('c' == options.type) code = cleanCStyle(code);
  
    return code;
  };
  
  function finishTabifier(code) {
    code = code.replace(/\n\s*\n/g, '\n'); //blank lines
    code = code.replace(/^[\s\n]*/, ''); //leading space
    code = code.replace(/[\s\n]*$/, ''); //trailing space
    level = 0;
    //hideProgress();
    return code;
  }
  
  function showProgress(done, total) {
    var perc = Math.floor(100 * done / total);
  
    var bar = document.getElementById('bar');
    bar.innerHTML = perc + '%\u00A0';
    bar.style.width = perc + '%';
    bar.style.visibility = 'visible';
  }
  
  function hideProgress() {
    var bar = document.getElementById('bar');
    bar.style.visibility = 'hidden';
  }
  
  function cleanHTML(code) {
    var i = 0;
  
    function cleanAsync() {
      var iStart = i;
      for (; i < code.length && i < iStart + LOOP_SIZE; i++) {
        point = i;
  
        //if no more tags, copy and exit
        if (-1 == code.substr(i).indexOf('<')) {
          out += code.substr(i);
          return finishTabifier(out);
        }
  
        //copy verbatim until a tag
        while ('<' != code.charAt(point)) point++;
        if (i != point) {
          cont = code.substr(i, point - i);
          if (!cont.match(/^\s+$/)) {
            if ('\n' == out.charAt(out.length - 1)) {
              out += tabs();
            } else if ('\n' == cont.charAt(0)) {
              out += '\n' + tabs();
              cont = cont.replace(/^\s+/, '');
            }
            cont = cont.replace(/\s+/g, ' ');
            out += cont;
          }
          if (cont.match(/\n/)) {
            out += '\n' + tabs();
          }
        }
        start = point;
  
        //find the end of the tag
        while ('>' != code.charAt(point)) point++;
        tag = code.substr(start, point - start);
        i = point;
  
        //if this is a special tag, deal with it!
        if ('!--' == tag.substr(1, 3)) {
          if (!tag.match(/--$/)) {
            while ('-->' != code.substr(point, 3)) point++;
            point += 2;
            tag = code.substr(start, point - start);
            i = point;
          }
          if ('\n' != out.charAt(out.length - 1)) out += '\n';
          out += tabs();
          out += tag + '>\n';
        } else if ('!' == tag[1]) {
          out = placeTag(tag + '>', out);
        } else if ('?' == tag[1]) {
          out += tag + '>\n';
        } else if (t = tag.match(/^<(script|style)/i)) {
          t[1] = t[1].toLowerCase();
          tag = cleanTag(tag);
          out = placeTag(tag, out);
          end = String(code.substr(i + 1)).toLowerCase().indexOf('</' + t[1]);
          if (end) {
            cont = code.substr(i + 1, end);
            i += end;
            out += cont;
          }
        } else {
          tag = cleanTag(tag);
          out = placeTag(tag, out);
        }
      }
  
      //showProgress(i, code.length);
      if (i < code.length) {
        return cleanAsync();
      } else {
        return finishTabifier(out);
      }
    }
  
    var point = 0,
        start = null,
        end = null,
        tag = '',
        out = '',
        cont = '';
    return cleanAsync();
  }
  
  function tabs() {
    var s = '';
    var t = '';
    for (var n = 0; n < tabSize; n++) t += tabChar;
    for (var j = 0; j < level; j++) s += t;
    return s;
  }
  
  function cleanTag(tag) {
    var tagout = '';
    tag = tag.replace(/\n/g, ' '); //remove newlines
    tag = tag.replace(/[\s]{2,}/g, ' '); //collapse whitespace
    tag = tag.split(' ');
    for (var j = 0; j < tag.length; j++) {
      if (-1 == tag[j].indexOf('=')) {
        //if this part doesn't have an equal sign, just lowercase it and copy it
        tagout += tag[j].toLowerCase() + ' ';
      } else {
        //otherwise lowercase the left part and...
        var k = tag[j].indexOf('=');
        var tmp = [tag[j].substr(0, k), tag[j].substr(k + 1)];
  
        tagout += tmp[0].toLowerCase() + '=';
        var x = tmp[1].charAt(0);
        if ("'" == x || '"' == x) {
          //if the right part starts with a quote, find the rest of its parts
          tagout += tmp[1];
          while (x != String(tag[j]).charAt(String(tag[j]).length - 1)) {
            tagout += ' ' + tag[++j];
          }
          tagout += ' ';
        } else {
          //otherwise put quotes around it
          tagout += "'" + tmp[1] + "' ";
        }
      }
    }
    tag = tagout.replace(/\s*$/, '>');
    return tag;
  }
  
  /////////////// The below variables are only used in the placeTag() function
  /////////////// but are declared global so that they are read only once
  //opening and closing tag on it's own line but no new indentation level
  var ownLine = ['area', 'body', 'head', 'hr', 'i?frame', 'link', 'meta', 'noscript', 'style', 'table', 'tbody', 'thead', 'tfoot'];
  
  //opening tag, contents, and closing tag get their own line
  //(i.e. line before opening, after closing)
  var contOwnLine = ['li', 'dt', 'dt', 'h[1-6]', 'option', 'script'];
  
  //line will go before these tags
  var lineBefore = new RegExp('^<(/?' + ownLine.join('|/?') + '|' + contOwnLine.join('|') + ')[ >]');
  
  //line will go after these tags
  lineAfter = new RegExp('^<(br|/?' + ownLine.join('|/?') + '|/' + contOwnLine.join('|/') + ')[ >]');
  
  //inside these tags (close tag expected) a new indentation level is created
  var newLevel = ['blockquote', 'div', 'dl', 'fieldset', 'form', 'frameset', 'map', 'ol', 'p', 'pre', 'select', 'td', 'th', 'tr', 'ul'];
  newLevel = new RegExp('^</?(' + newLevel.join('|') + ')[ >]');
  
  function placeTag(tag, out) {
    var nl = tag.match(newLevel);
    if (tag.match(lineBefore) || nl) {
      out = out.replace(/\s*$/, '');
      out += "\n";
    }
  
    if (nl && '/' == tag.charAt(1)) level--;
    if ('\n' == out.charAt(out.length - 1)) out += tabs();
    if (nl && '/' != tag.charAt(1)) level++;
  
    out += tag;
    if (tag.match(lineAfter) || tag.match(newLevel)) {
      out = out.replace(/ *$/, '');
      out += "\n";
    }
    return out;
  }
  
  function cleanCSS(code) {
    var i = 0, iLength = 0, iBracket = null, iMedia = false;
  
    function cleanAsync() {
      var iStart = i, iChar;
      for (; i < code.length && i < iStart + LOOP_SIZE; i++) {
        iChar = code.charAt(i);
        if (out.charAt(out.length - 1) == '\n') iLength = 0;

if ('@' == iChar ) {
          out += '\r@';
          iMedia = true;
        }  else if ('{' == code.charAt(i)) {
          level++;
          out += ' {' + (singleLine && (!iMedia && level || iMedia && level == 2 )  ? ' ' : '\n') + (singleLine && (!iMedia && level || iMedia &&  level  == 2 ) ? '' : tabs());
          
          //out += ' {<replace>';
          //iBracket = '{\n'  + tabs();
        } else if ('}' == iChar) {
          out = out.replace(/\s*$/, '');
          level--;
          out += (singleLine && (!iMedia || iMedia && level == 1) ? ' ' : '\n' + tabs()) + '}\n' + tabs();
          if (!level && iMedia) iMedia = false;

/*
          if (!!iBracket) {
            if (iLength + 2 < rowColumn)
              out = out.replace(/<replace>/g, ' ') + ' }\n' + tabs();
            else
              out = out.replace(/<replace>/g, iBracket) + '\n' + tabs() + '}\n' + tabs();
            iBracket = null;
          }
          */
        } else if (iChar.match(/;|,/)) {
          if (iLength < rowColumn || singleLine) out += iChar + ' ';
          else out += iChar + '\n' + tabs();
        } else if ('\n' == iChar) {
          if (iLength < rowColumn) out += ' ';
          else out += '\n' + tabs();
        }
        else {
          out += iChar;
          iLength++;
        }
      }
  
      //showProgress(i, code.length);
      if (i < code.length) {
        return cleanAsync();
      } else {
        level = li;
        out = out.replace(/[\s\n]*$/, '');
        return finishTabifier(out);
      }
    }
  
    if ('\n' == code[0]) code = code.substr(1);
    code = code.replace(/([^\/])?\n*/g, '$1');
    code = code.replace(/\n\s+/g, '\n');
    code = code.replace(/[   ]+/g, ' ');
    code = code.replace(/\s?([;:{},+>])\s?/g, '$1');
    code = code.replace(/\{(.*):(.*)\}/g, '{$1: $2}');
  
    var out = tabs(), li = level;
    return cleanAsync();
  }
  
  function cleanCStyle(code) {
    var i = 0;
  
    function cleanAsync() {
      var iStart = i;
      for (; i < code.length && i < iStart + LOOP_SIZE; i++) {
        c = code.charAt(i);
  
        if (incomment) {
          if ('//' == incomment && '\n' == c) {
            incomment = false;
          } else if ('/*' == incomment && '*/' == code.substr(i, 2)) {
            incomment = false;
            c = '*/\n';
            i++;
          }
          if (!incomment) {
            while (code.charAt(++i).match(/\s/));;
            i--;
            c += tabs();
          }
          out += c;
        } else if (instring) {
          if (instring == c && // this string closes at the next matching quote
          // unless it was escaped, or the escape is escaped
          ('\\' != code.charAt(i - 1) || '\\' == code.charAt(i - 2))) {
            instring = false;
          }
          out += c;
        } else if (infor && '(' == c) {
          infor++;
          out += c;
        } else if (infor && ')' == c) {
          infor--;
          out += c;
        } else if ('else' == code.substr(i, 4)) {
          out = out.replace(/\s*$/, '') + ' e';
        } else if (code.substr(i).match(/^for\s*\(/)) {
          infor = 1;
          out += 'for (';
          while ('(' != code.charAt(++i));;
        } else if ('//' == code.substr(i, 2)) {
          incomment = '//';
          out += '//';
          i++;
        } else if ('/*' == code.substr(i, 2)) {
          incomment = '/*';
          out += '\n' + tabs() + '/*';
          i++;
        } else if ('"' == c || "'" == c) {
          if (instring && c == instring) {
            instring = false;
          } else {
            instring = c;
          }
          out += c;
        } else if ('{' == c) {
          level++;
          out = out.replace(/\s*$/, '') + ' {\n' + tabs();
          while (code.charAt(++i).match(/\s/));;
          i--;
        } else if ('}' == c) {
          out = out.replace(/\s*$/, '');
          level--;
          out += '\n' + tabs() + '}\n' + tabs();
          while (code.charAt(++i).match(/\s/));;
          i--;
        } else if (';' == c && !infor) {
          out += ';\n' + tabs();
          while (code.charAt(++i).match(/\s/));;
          i--;
        } else if ('\n' == c) {
          out += '\n' + tabs();
        } else {
          out += c;
        }
      }
  
      //showProgress(i, code.length);
      if (i < code.length) {
        return cleanAsync();
      } else {
        level = li;
        out = out.replace(/[\s\n]*$/, '');
        return finishTabifier(out);
      }
    }
  
    code = code.replace(/^[\s\n]*/, ''); //leading space
    code = code.replace(/[\s\n]*$/, ''); //trailing space
    code = code.replace(/[\n\r]+/g, '\n'); //collapse newlines
    var out = tabs(),
        li = level,
        c = '';
    var infor = false,
        forcount = 0,
        instring = false,
        incomment = false;
  
    return cleanAsync();
  }
})(window);

<!doctype html> 
<html> 
  <head>
    <title>Tabifier</title> 
    <meta charset="utf-8" /> 
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
  </head> 
  <body> 
    <textarea id="source" style="display: none;">* { margin:0; padding:0; }
a { color:#00a7e6; }
body { background:#fff; font-family:HelveticaNeue-Light, helvetica, arial, verdana, sans-serif; font-size:12px; line-height:1.5; margin:15px; }
footer { border-top:1px solid #e5e5e5; margin-top:30px; padding:5px 0; }
header { background:#434343; color:#fff; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; display:block; line-height:40px; margin:20px 0; padding:5px; }
h1 { float:left; font-family:HelveticaNeue-CondensedBold, helvetica, arial, verdana, sans-serif; font-size:26px; font-weight:bold; margin:0 5px; text-shadow:0 -1px 2px rgba(0, 0, 0, .75); text-transform:uppercase; }
h2#today { background:#fff; font-family:HelveticaNeue, helvetica, arial, verdana, sans-serif; font-size:14px; font-weight:normal; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:#434343; display:block; float:right; padding:0 15px; }
#add_task, #clear_data { background:#ccc; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; color:#fff; display:inline-block; float:left; font-family:HelveticaNeue, helvetica, arial, verdana, sans-serif; font-size:11px; line-height:19px; margin-right:5px; padding:0 5px; opacity:.8; text-decoration:none; text-shadow:0 -1px 2px rgba(0, 0, 0, .15); -webkit-transition:opacity .2s linear; transition:opacity .2s linear; }
#add_task { background:#00de36; background:-webkit-gradient(linear, 0% 0, 0% 100%, from(#5fd053), to(#18cb05)); background:-moz-linear-gradient(100% 100% 90deg, #18cb05, #5fd053); border:1px solid #12c400; }
#clear_data { background:#bbb; background:-webkit-gradient(linear, 0% 0, 0% 100%, from(#c8c8c8), to(#a9a9a9)); background:-moz-linear-gradient(100% 100% 90deg, #a9a9a9, #c8c8c8); border:1px solid #a4a4a4; }
#add_task:hover, #clear_data:hover { opacity:1; }
table { border-collapse:collapse; line-height:1; width:100%; }
th, td { border-bottom:1px solid #e5e5e5; padding:4px; text-align:left; vertical-align:middle; width:48px; }
th:first-child { width:auto; }
thead th:after { content:':00'; }
thead th:first-child:after, thead th:last-child:after { content:''; }
tfoot td { padding:10px 5px; }
tbody th { font-weight:normal; }
tbody td:nth-child(even) { background:#efefef; }
tfoot th, tfoot td { background:none; border:0; }
.title label { display:none; }
.task_title { background:-webkit-gradient(linear, 0% 0, 0% 10%, from(#c3c3c3), to(#fff)); background:-moz-linear-gradient(0% 10% 90deg, #fff, #c3c3c3); border:1px solid #c3c3c3; border-bottom:1px solid #ddd; border-top:1px solid #7c7c7c; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-family:"Lucida Grande", "Lucida Sans", sans-serif; font-size:11px; height:23px; outline:none; overflow:hidden; padding:4px; resize:none; width:100%; }
.task_title:focus { -webkit-box-shadow:0 0 3px rgba(4, 175, 239, 1); -moz-box-shadow:0 0 3px rgba(4, 175, 239, 1); box-shadow:0 0 3px rgba(4, 175, 239, 1); }
.task_title.has_value { background:#fff; border:0; padding:6px; }
.task_title.has_value:hover { background:rgba(4, 175, 239, .1); }
.inc { float:left; height:20px; overflow:hidden; margin:0 1px; width:10px; }
.inc label { background:#e6e6e6; background:-webkit-gradient(linear, 0% 0, 0% 100%, from(#e5e5e5), to(#ebebeb)); background:-moz-linear-gradient(19% 75% 90deg, #ebebeb, #e5e5e5); border:1px solid #ccc; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; cursor:pointer; display:block; height:100%; overflow:hidden; text-indent:-5000px; width:100%; }
.inc label:hover { background:-webkit-gradient(linear, 0% 0, 0% 100%, from(#cecece), to(#d9d9d9)); background:-moz-linear-gradient(19% 75% 90deg, #ebebeb, #d9d9d9); }
.inc input { display:none; }
.active { background:#00d0f9; background:-webkit-gradient(linear, 0% 0, 0% 100%, from(#62cdf5), to(#04afef))!important; background:-moz-linear-gradient(19% 75% 90deg, #04afef, #62cdf5)!important; border:1px solid #00a7e6!important; }
@media screen and(max-width:799px) {
  th, td { padding:2px; text-align:center; width:12px;   }
  th:first-child, td:first-child { padding:5px; text-align:left;   }
  thead th:after { content:'';   }
  .task_title { background:-webkit-gradient(linear, 0% 0, 0% 3%, from(#c3c3c3), to(#fff)); background:-moz-linear-gradient(0% 3% 90deg, #fff, #c3c3c3); height:82px;   }
  .inc { height:20px; margin:1px; }
}
@media screen and(max-width:599px) {
  header { line-height:default; }
  h1 { float:none; font-size:20px; margin-bottom:5px; text-align:center; }
  h2#today { font-size:12px; float:none; line-height:2; text-align:center; }
}
.clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height: 0; }

Pop out