jQuery: Padding a Variable or String with a Specific Character

Input: Some text

Output: Some text*****************************************

Input: Some more text

Output: ************************************Some more text

Input:9

Output: 09

Input: 50

Output: 50

Leveraging $.extend() and this.each

In the first and second example, an asterisk is being prefixed and postfixed, respectively, to fill in up to 50 characters of text. The last two examples, prefix the numbers with a 0 if the length is less than 2. Now to the code:

(function($) {
$.extend($.fn, {
prefixString: function(value, length) {
var $this = this;
return this.each(function() {
$(this).text($this.padString(value, $(this).text().length, length) + $(this).text());
});
},
postfixString: function(value, length) {
var $this = this;
return this.each(function() {
$(this).text($(this).text() + $this.padString(value, $(this).text().length, length));
});
},
padString: function(value, minLength, maxLength) {
var newString = "";
for (var x = minLength; x < maxLength; x++) {
newString += value;
}
return newString;
}
});
})(jQuery);

The above jQuery extension contains three functions. The first two are the ones that will allow you to prefix or postfix the string to the contents of an HTML element's text contents. The following extension can be used in the following way:

$("#test1").postfixString('*', 50);
$("#test2").prefixString('*', 50);
$("#test3").prefixString('0', 2);
$("#test4").prefixString('0', 2);
some text
some more text
5
50

By extending jQuery, we can enable our basic JavaScript code to pad a jQuery element with a specific value to a specific length with a single function call.

Published on Feb 23, 2019

Tags: JavaScript | jQuery Tutorial