Log In

Email:
Password:
Keep me logged in

Forgot Password

Email:




Social Media
     
CategoriesCSS (5)
jQuery (73)
PHP (30)
.htaccess (4)
Sponsored Links


String Padding
jQuery Javascript
Demo | Browse Category | Wednesday, January 11, 2012 by




jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
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"

//PADS "str" ACCORDING TO THE "PADDING TYPE" SELECTED
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);
//DIVIDED BY 2 TO PAD BOTH SIDES.

//THESE MAY BE DECIMALS
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("");
}
}
</script>
</head>
<body>
<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>
<span id="strpad"></span>
</body>
</html>
Views: 159 Likes: 0 Dislikes: 0