function str_pad(){
var str = $("#str").val(); //STRING
var p = $("#p").val(); //PADDING STRING
var n = $("#n").val(); //PADDING LENGTH
var d = n - str.length; //DIFFERENCE BETWEEN "n" AND NUMBER OF CHARACTERS IN "str"
var padding = $("#padding").val(); //PADDING TYPE (left, right, both)
var s = ''; //NULL VARIABLE UNTIL "FOR LOOP"
var num = /^[0-9]+$/; //REGEX FOR NUMBERS, FOR A VALID "PADDING LENGTH"

if(n){
if(n.match(num)){ //IF "n" IS A NUMBER
if(n>str.length){ //IF "n" > NUMBER OF CHARACTERS IN "str"

if(padding=='left'){
for(i=0; i<Math.ceil(d/p.length); i++){
s += p; //PADDING STRING BEFORE THE MAIN STRING
}
if(s.length>d){
s = s.substring(0, d); //CUTS EXCESS LEFT PADDING
}
s += str; //MAIN STRING
}
if(padding=='right'){
s = str; //MAIN STRING
for(i=0; i<(d/p.length); i++){
s += p; //PADDING STRING AFTER THE MAIN STRING
}
}
if(padding=='both'){
var div = (d/2);

var left = Math.floor(div); //LEFTSIDE OF PADDING WOULD DROP THE DECIMAL
var right = Math.ceil(div); //RIGHTSIDE OF PADDING WOULD ROUND TO THE NEXT WHOLE NUMBER

for(i=0; i<left; i++){ //THIS MAY BE A DECIMAL, THEREFORE WOULD ROUND TO THE PREVIOUS WHOLE NUMBER
s += p; //FIRST PART OF PADDING STRING BEFORE THE MAIN STRING
}
if(s.length>left){
s = s.substring(0, left); //CUTS EXCESS LEFT PADDING
}
s += str; //MAIN STRING
for(i=0; i<right; i++){
s += p; //SECOND PART OF PADDING STRING AFTER THE MAIN STRING
}
}

s = s.substring(0, n); //PADDED STRING, REMOVES EXCESS FROM THE RIGHT IF NECESSAR

$("#strpad").html(s);
}
{
$("#strpad").html("Pad length must be greater than the input string length.");
}
}
{
$("#strpad").html("Pad length must be a number.");
}
}
{
$("#strpad").html("");
}
}
<table>
<tr><td align="right">String:</td><td align="left"><input id="str" onKeyUp="str_pad()"></td></tr>
<tr><td align="right">Padding:</td><td align="left"><input id="p" onKeyUp="str_pad()" style="width:70px;"></td></tr>
<tr><td align="right">Pad Length:</td><td align="left"><input id="n" onKeyUp="str_pad()" style="width:35px;"></td></tr>
<tr><td align="right">Pad Type:</td><td align="left">
<select id="padding" onChange="str_pad()">
<option value="left">left</option>
<option value="right">right</option>
<option value="both">both</option>
</select>
</td></tr>
</table><br>