tab 2 space

Converts tabs to (4) spaces

by Lucas Krause

HTML

<textarea id="code" autofocus="autofocus"></textarea>
<div class="navi">
    <input type="number" value="4" id="tab-width" />
    <input type="button" value="Replace tabs" id="replace-tabs" />
</div>

CSS

html, body, textarea {
    height:100%;
}

body {
    margin:0;
}

input, textarea {
    font-size:inherit;
}
input:focus, textarea:focus {
    outline:none;
}

#code, .navi {
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
         -o-box-sizing:border-box;
            box-sizing:border-box;
}

/*textarea*/#code {
    width:100%;
    resize:none;
    font-family:monospace, serif;
    border:solid transparent 0;
    padding:1em;
    margin:0;
    display:block;
}

.navi {
    text-align:right;
    position:absolute;
    bottom:0;
    right:0;
    width:100%;
    padding:0 1em 1em;
}

    .navi > * {
        vertical-align:middle;
    }

JavaScript

$("#code").css("border-bottom-width", "+="+$(".navi").outerHeight()+"px");

$("#replace-tabs").bind("click", function(){
    $("#code").val($("#code").val().replace(/\t/g, (function(){
        var str_a="";
        
        for(var i=0; i<parseInt($("#tab-width").val()); i++){
            str_a+=" ";
        }
        
        return str_a;
    })())).trigger("select");
});
$("#code").bind("click", function(){
    $(this).trigger("select");
});