Pad Strings in PHP and JavaScript

"Padding" a string ensures that its length meets or exceeds a desired minimum. PHP has a built-in function aptly named str_pad to pad strings to the left, to the right, or even on both sides. The default is to pad to the right with spaces, but you can choose to pad using any character, or even multiple characters.

    $input = "test";
    
    echo str_pad($input, 8, "x");               // testxxxx
    echo str_pad($input, 8, "x", STR_PAD_LEFT); // xxxxtest
    echo str_pad(23, 3, "0", STR_PAD_LEFT);     // 023, useful for aligning numbers
    echo str_pad(1000, 4);                      // 1000, no change

JavaScript has no built-in function to do the same, but here's an extension to the String object that works the same way:

    // arguments are "length", "character", and "direction"
    String.prototype.pad = String.prototype.pad || function(len, chr, dir) {
        var str = this;
        len = (typeof len == 'number') ? len : 0;
        chr = (typeof chr == 'string') ? chr : ' ';
        dir = (/left|right|both/i).test(dir) ? dir : 'right';
        var repeat = function(c, l) { // inner "character" and "length"
            var repeat = '';
            while (repeat.length < l) {
                repeat += c;
            }
            return repeat.substr(0, l);
        }
        var diff = len - str.length;
        if (diff > 0) {
            switch (dir) {
                case 'left':
                    str = '' + repeat(chr, diff) + str;
                    break;
                case 'both':
                    var half = repeat(chr, Math.ceil(diff / 2));
                    str = (half + str + half).substr(1, len);
                    break;
                default: // and "right"
                    str = '' + str + repeat(chr, diff);
            }
        }
        return str;
    };

    var input = 'Alien';
    alert(input.pad(10));               // "Alien     "
    alert(input.pad(10, '-=', 'left')); // "-=-=-Alien"
    alert(input.pad(10, '_', 'both'));  // "__Alien___"
    alert(input.pad(6, '___'));         // "Alien_"

My solution was adapted from PHP.js. Their port has an unused variable and does not produce the same output as native PHP str_pad for all of the examples in PHP's own documentation, but the above code should.

It can be dangerous to extend native objects in JavaScript, because changes to the language itself can produce unexpected results — If a newer version of JavaScript includes a native String.pad, you will suddenly be overriding that native function! If you prefer, you can avoid extending native String:

    function str_pad(str, chr, len, dir) {
        str = str || '';
        /* the rest of the function body is the same */
    }
    alert(str_pad('Alien', 10, '-=', 'left')); // "-=-=-Alien"
Tags




blog comments powered by Disqus
search blog
random posts
  • Art-Science-CSS-Jonathan-Snook
  • Flash-Catalyst-CS5-Bible-Huddleston
categories & tags
about hb stone

I'm a Front-End Engineer at Yahoo! working on the Mail and Messenger teams. I blog about web design and development topics including accessibility, usability, performance, and developing HTML / CSS / JavaScript applications on Appcelerator Titanium and Adobe AIR.

If you're a web developer, you might enjoy Jelo, my JavaScript library.

@hbstone follows:
@hbstone tweets:
  • CSS-Definitive-Guide-Eric-Meyer
  • HTML5-Designing-Internet-Applications-Visualizing
copyright

All original work on this site is covered by a Creative Commons Attribution 3.0 license unless otherwise specified.

You may share or use any code or images from this site in any manner, for free, so long as reasonable effort has been made to give credit where due.

The views expressed in the posts and comments on this blog do not necessarily reflect the views of Yahoo!