We Keep Coding

Alternative way to padStart [duplicate]

I am in need of a JavaScript function which can take a value and pad it to a given length (I need spaces, but anything would do). I found this, but I have no idea what the heck it is doing and it doesn't seem to work for me.
String.prototype.pad = function(l, s, t) {
return s || (s = " "),
(l -= this.length) > 0 ?
(s = new Array(Math.ceil(l / s.length) + 1).join(s))
.substr(0, t = !t ? l : t == 1 ?
0 :
Math.ceil(l / 2)) + this + s.substr(0, l - t) :
this;
};
var s = "Jonas";
document.write(
'<h2>S = '.bold(), s, "</h2>",
'S.pad(20, "[]", 0) = '.bold(), s.pad(20, "[]", 0), "<br />",
'S.pad(20, "[====]", 1) = '.bold(), s.pad(20, "[====]", 1), "<br />",
'S.pad(20, "~", 2) = '.bold(), s.pad(20, "~", 2)
);

ECMAScript 2017 (ES8) added String.padStart (along with String.padEnd) for just this purpose:
"Jonas".padStart(10); // Default pad string is a space
"42".padStart(6, "0"); // Pad with "0"
"*".padStart(8, "-/|\\"); // produces '-/|\\-/|*'
If not present in the JavaScript host, String.padStart can be added as a polyfill.
Pre ES8
I found this solution here and this is for me much much simpler:
var n = 123
String("00000" + n).slice(-5); // returns 00123
("00000" + n).slice(-5); // returns 00123
(" " + n).slice(-5); // returns " 123" (with two spaces)
And here I made an extension to the string object:
String.prototype.paddingLeft = function (paddingValue) {
return String(paddingValue + this).slice(-paddingValue.length);
};
An example to use it:
function getFormattedTime(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
hours = hours.toString().paddingLeft("00");
minutes = minutes.toString().paddingLeft("00");
return "{0}:{1}".format(hours, minutes);
};
String.prototype.format = function () {
var args = arguments;
return this.replace(/{(\d+)}/g, function (match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
This will return a time in the format "15:30".

A faster method
If you are doing this repeatedly, for example to pad values in an array, and performance is a factor, the following approach can give you nearly a 100x advantage in speed (jsPerf) over other solution that are currently discussed on the inter webs. The basic idea is that you are providing the pad function with a fully padded empty string to use as a buffer. The pad function just appends to string to be added to this pre-padded string (one string concat) and then slices or trims the result to the desired length.
function pad(pad, str, padLeft) {
if (typeof str === 'undefined')
return pad;
if (padLeft) {
return (pad + str).slice(-pad.length);
} else {
return (str + pad).substring(0, pad.length);
}
}
For example, to zero pad a number to a length of 10 digits,
pad('0000000000',123,true);
To pad a string with whitespace, so the entire string is 255 characters,
var padding = Array(256).join(' '), // make a string of 255 spaces
pad(padding,123,true);
Performance Test
See the jsPerf test here.
And this is faster than ES6 string.repeat by 2x as well, as shown by the revised JsPerf here
Please note that jsPerf is no longer online
Please note that the jsPerf site that we originally used to benchmark the various methods is no longer online. Unfortunately, this means we can't get to those test results. Sad but true.

String.prototype.padStart() and String.prototype.padEnd() are currently TC39 candidate proposals: see github.com/tc39/proposal-string-pad-start-end (only available in Firefox as of April 2016; a polyfill is available).

http://www.webtoolkit.info/javascript_pad.html
/**
*
* JavaScript string pad
* http://www.webtoolkit.info/
*
**/
var STR_PAD_LEFT = 1;
var STR_PAD_RIGHT = 2;
var STR_PAD_BOTH = 3;
function pad(str, len, pad, dir) {
if (typeof(len) == "undefined") { var len = 0; }
if (typeof(pad) == "undefined") { var pad = ' '; }
if (typeof(dir) == "undefined") { var dir = STR_PAD_RIGHT; }
if (len + 1 >= str.length) {
switch (dir){
case STR_PAD_LEFT:
str = Array(len + 1 - str.length).join(pad) + str;
break;
case STR_PAD_BOTH:
var padlen = len - str.length;
var right = Math.ceil( padlen / 2 );
var left = padlen - right;
str = Array(left+1).join(pad) + str + Array(right+1).join(pad);
break;
default:
str = str + Array(len + 1 - str.length).join(pad);
break;
} // switch
}
return str;
}
It's a lot more readable.

Here's a recursive approach to it.
function pad(width, string, padding) {
return (width <= string.length) ? string : pad(width, padding + string, padding)
}
An example...
pad(5, 'hi', '0')
=> "000hi"

ECMAScript 2017 adds a padStart method to the String prototype. This method will pad a string with spaces to a given length. This method also takes an optional string that will be used instead of spaces for padding.
'abc'.padStart(10); // " abc"
'abc'.padStart(10, "foo"); // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0"); // "00000abc"
'abc'.padStart(1); // "abc"
A padEnd method was also added that works in the same manner.
For browser compatibility (and a useful polyfill) see this link.

Using the ECMAScript 6 method String#repeat, a pad function is as simple as:
String.prototype.padLeft = function(char, length) {
return char.repeat(Math.max(0, length - this.length)) + this;
}
String#repeat is currently supported in Firefox and Chrome only. for other implementation, one might consider the following simple polyfill:
String.prototype.repeat = String.prototype.repeat || function(n){
return n<=1 ? this : (this + this.repeat(n-1));
}

Using the ECMAScript 6 method String#repeat and Arrow functions, a pad function is as simple as:
var leftPad = (s, c, n) => c.repeat(n - s.length) + s;
leftPad("foo", "0", 5); //returns "00foo"
jsfiddle
edit:
suggestion from the comments:
const leftPad = (s, c, n) => n - s.length > 0 ? c.repeat(n - s.length) + s : s;
this way, it wont throw an error when s.lengthis greater than n
edit2:
suggestion from the comments:
const leftPad = (s, c, n) =>{ s = s.toString(); c = c.toString(); return s.length > n ? s : c.repeat(n - s.length) + s; }
this way, you can use the function for strings and non-strings alike.

The key trick in both those solutions is to create an array instance with a given size (one more than the desired length), and then to immediately call the join() method to make a string. The join() method is passed the padding string (spaces probably). Since the array is empty, the empty cells will be rendered as empty strings during the process of joining the array into one result string, and only the padding will remain. It's a really nice technique.

With ES8, there are two options for padding.
You can check them in the documentation.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

Taking up Samuel's ideas, upward here. And remember an old SQL script, I tried with this:
a=1234;
'0000'.slice(a.toString().length)+a;
It works in all the cases I could imagine:
a= 1 result 0001
a= 12 result 0012
a= 123 result 0123
a= 1234 result 1234
a= 12345 result 12345
a= '12' result 0012

Pad with default values
I noticed that I mostly need the padLeft for time conversion / number padding.
So I wrote this function:
function padL(a, b, c) { // string/number, length=2, char=0
return (new Array(b || 2).join(c || 0) + a).slice(-b)
}
This simple function supports Number or String as input.
The default pad is two characters.
The default char is 0.
So I can simply write:
padL(1);
// 01
If I add the second argument (pad width):
padL(1, 3);
// 001
The third parameter (pad character)
padL('zzz', 10, 'x');
// xxxxxxxzzz
#BananaAcid: If you pass a undefined value or a 0 length string, you get 0undefined, so:
As suggested
function padL(a, b, c) { // string/number, length=2, char=0
return (new Array((b || 1) + 1).join(c || 0) + (a || '')).slice(-(b || 2))
}
But this can also be achieved in a shorter way.
function padL(a, b, c) { // string/number, length=2, char=0
return (new Array(b || 2).join(c || 0) + (a || c || 0)).slice(-b)
}
It also works with:
padL(0)
padL(NaN)
padL('')
padL(undefined)
padL(false)
And if you want to be able to pad in both ways:
function pad(a, b, c, d) { // string/number, length=2, char=0, 0/false=Left-1/true=Right
return a = (a || c || 0), c = new Array(b || 2).join(c || 0), d ? (a + c).slice(0, b) : (c + a).slice(-b)
}
which can be written in a shorter way without using slice.
function pad(a, b, c, d) {
return a = (a || c || 0) + '', b = new Array((++b || 3) - a.length).join(c || 0), d ? a+b : b+a
}
/*
Usage:
pad(
input // (int or string) or undefined, NaN, false, empty string
// default:0 or PadCharacter
// Optional
,PadLength // (int) default:2
,PadCharacter // (string or int) default:'0'
,PadDirection // (bolean) default:0 (padLeft) - (true or 1) is padRight
)
*/
Now if you try to pad 'averylongword' with 2... that’s not my problem.
I said that I would give you a tip.
Most of the time, if you pad, you do it for the same value N times.
Using any type of function inside a loop slows down the loop!!!
So if you just want to pad left some numbers inside a long list, don't use functions to do this simple thing.
Use something like this:
var arrayOfNumbers = [1, 2, 3, 4, 5, 6, 7],
paddedArray = [],
len = arrayOfNumbers.length;
while(len--) {
paddedArray[len] = ('0000' + arrayOfNumbers[len]).slice(-4);
}
If you don't know how the maximum padding size based on the numbers inside the array.
var arrayOfNumbers = [1, 2, 3, 4, 5, 6, 7, 49095],
paddedArray = [],
len = arrayOfNumbers.length;
// Search the highest number
var arrayMax = Function.prototype.apply.bind(Math.max, null),
// Get that string length
padSize = (arrayMax(arrayOfNumbers) + '').length,
// Create a Padding string
padStr = new Array(padSize).join(0);
// And after you have all this static values cached start the loop.
while(len--) {
paddedArray[len] = (padStr + arrayOfNumbers[len]).slice(-padSize); // substr(-padSize)
}
console.log(paddedArray);
/*
0: "00001"
1: "00002"
2: "00003"
3: "00004"
4: "00005"
5: "00006"
6: "00007"
7: "49095"
*/

padding string has been inplemented in new javascript version.
str.padStart(targetLength [, padString])
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/padStart
If you want your own function check this example:
const myString = 'Welcome to my house';
String.prototype.padLeft = function(times = 0, str = ' ') {
return (Array(times).join(str) + this);
}
console.log(myString.padLeft(12, ':'));
//:::::::::::Welcome to my house

Here is a build in method you can use -
str1.padStart(2, '0')

Here's a simple function that I use.
var pad=function(num,field){
var n = '' + num;
var w = n.length;
var l = field.length;
var pad = w < l ? l-w : 0;
return field.substr(0,pad) + n;
};
For example:
pad (20,' '); // 20
pad (321,' '); // 321
pad (12345,' '); //12345
pad ( 15,'00000'); //00015
pad ( 999,'*****'); //**999
pad ('cat','_____'); //__cat

A short way:
(x=>(new Array(int-x.length+1)).join(char)+x)(String)
Example:
(x=>(new Array(6-x.length+1)).join("0")+x)("1234")
return: "001234"

Here is a simple answer in basically one line of code.
var value = 35 // the numerical value
var x = 5 // the minimum length of the string
var padded = ("00000" + value).substr(-x);
Make sure the number of characters in you padding, zeros here, is at least as many as your intended minimum length. So really, to put it into one line, to get a result of "00035" in this case is:
var padded = ("00000" + 35).substr(-5);

ES7 is just drafts and proposals right now, but if you wanted to track compatibility with the specification, your pad functions need:
Multi-character pad support.
Don't truncate the input string
Pad defaults to space
From my polyfill library, but apply your own due diligence for prototype extensions.
// Tests
'hello'.lpad(4) === 'hello'
'hello'.rpad(4) === 'hello'
'hello'.lpad(10) === ' hello'
'hello'.rpad(10) === 'hello '
'hello'.lpad(10, '1234') === '41234hello'
'hello'.rpad(10, '1234') === 'hello12341'
String.prototype.lpad || (String.prototype.lpad = function(length, pad)
{
if(length < this.length)
return this;
pad = pad || ' ';
let str = this;
while(str.length < length)
{
str = pad + str;
}
return str.substr( -length );
});
String.prototype.rpad || (String.prototype.rpad = function(length, pad)
{
if(length < this.length)
return this;
pad = pad || ' ';
let str = this;
while(str.length < length)
{
str += pad;
}
return str.substr(0, length);
});

Array manipulations are really slow compared to simple string concat. Of course, benchmark for your use case.
function(string, length, pad_char, append) {
string = string.toString();
length = parseInt(length) || 1;
pad_char = pad_char || ' ';
while (string.length < length) {
string = append ? string+pad_char : pad_char+string;
}
return string;
};

A variant of #Daniel LaFavers' answer.
var mask = function (background, foreground) {
bg = (new String(background));
fg = (new String(foreground));
bgl = bg.length;
fgl = fg.length;
bgs = bg.substring(0, Math.max(0, bgl - fgl));
fgs = fg.substring(Math.max(0, fgl - bgl));
return bgs + fgs;
};
For example:
mask('00000', 11 ); // '00011'
mask('00011','00' ); // '00000'
mask( 2 , 3 ); // '3'
mask('0' ,'111'); // '1'
mask('fork' ,'***'); // 'f***'
mask('_____','dog'); // '__dog'

If you don't mind including a utility library, lodash library has _.pad, _.padLeft and _.padRight functions.

I think its better to avoid recursion because its costly.
function padLeft(str,size,padwith) {
if(size <= str.length) {
// not padding is required.
return str;
} else {
// 1- take array of size equal to number of padding char + 1. suppose if string is 55 and we want 00055 it means we have 3 padding char so array size should be 3 + 1 (+1 will explain below)
// 2- now join this array with provided padding char (padwith) or default one ('0'). so it will produce '000'
// 3- now append '000' with orginal string (str = 55), will produce 00055
// why +1 in size of array?
// it is a trick, that we are joining an array of empty element with '0' (in our case)
// if we want to join items with '0' then we should have at least 2 items in the array to get joined (array with single item doesn't need to get joined).
// <item>0<item>0<item>0<item> to get 3 zero we need 4 (3+1) items in array
return Array(size-str.length+1).join(padwith||'0')+str
}
}
alert(padLeft("59",5) + "\n" +
padLeft("659",5) + "\n" +
padLeft("5919",5) + "\n" +
padLeft("59879",5) + "\n" +
padLeft("5437899",5));

It's 2014, and I suggest a JavaScript string-padding function. Ha!
Bare-bones: right-pad with spaces
function pad (str, length) {
var padding = (new Array(Math.max(length - str.length + 1, 0))).join(" ");
return str + padding;
}
Fancy: pad with options
/**
* #param {*} str Input string, or any other type (will be converted to string)
* #param {number} length Desired length to pad the string to
* #param {Object} [opts]
* #param {string} [opts.padWith=" "] Character to use for padding
* #param {boolean} [opts.padLeft=false] Whether to pad on the left
* #param {boolean} [opts.collapseEmpty=false] Whether to return an empty string if the input was empty
* #returns {string}
*/
function pad(str, length, opts) {
var padding = (new Array(Math.max(length - (str + "").length + 1, 0))).join(opts && opts.padWith || " "),
collapse = opts && opts.collapseEmpty && !(str + "").length;
return collapse ? "" : opts && opts.padLeft ? padding + str : str + padding;
}
Usage (fancy):
pad("123", 5);
// Returns "123 "
pad(123, 5);
// Returns "123 " - non-string input
pad("123", 5, { padWith: "0", padLeft: true });
// Returns "00123"
pad("", 5);
// Returns " "
pad("", 5, { collapseEmpty: true });
// Returns ""
pad("1234567", 5);
// Returns "1234567"

/**************************************************************************************************
Pad a string to pad_length fillig it with pad_char.
By default the function performs a left pad, unless pad_right is set to true.
If the value of pad_length is negative, less than, or equal to the length of the input string, no padding takes place.
**************************************************************************************************/
if(!String.prototype.pad)
String.prototype.pad = function(pad_char, pad_length, pad_right)
{
var result = this;
if( (typeof pad_char === 'string') && (pad_char.length === 1) && (pad_length > this.length) )
{
var padding = new Array(pad_length - this.length + 1).join(pad_char); //thanks to http://stackoverflow.com/questions/202605/repeat-string-javascript/2433358#2433358
result = (pad_right ? result + padding : padding + result);
}
return result;
}
And then you can do:
alert( "3".pad("0", 3) ); //shows "003"
alert( "hi".pad(" ", 3) ); //shows " hi"
alert( "hi".pad(" ", 3, true) ); //shows "hi "

If you just want a very simple hacky one-liner to pad, just make a string of the desired padding character of the desired max padding length and then substring it to the length of what you want to pad.
Example: padding the string store in e with spaces to 25 characters long.
var e = "hello"; e = e + " ".substring(e.length)
Result: "hello "
If you want to do the same with a number as input just call .toString() on it before.

A friend asked about using a JavaScript function to pad left. It turned into a little bit of an endeavor between some of us in chat to code golf it. This was the result:
function l(p,t,v){
v+="";return v.length>=t?v:l(p,t,p+v);
}
It ensures that the value to be padded is a string, and then if it isn't the length of the total desired length it will pad it once and then recurse. Here is what it looks like with more logical naming and structure
function padLeft(pad, totalLength, value){
value = value.toString();
if( value.length >= totalLength ){
return value;
}else{
return padLeft(pad, totalLength, pad + value);
}
}
The example we were using was to ensure that numbers were padded with 0 to the left to make a max length of 6. Here is an example set:
function l(p,t,v){v+="";return v.length>=t?v:l(p,t,p+v);}
var vals = [6451,123,466750];
var pad = l(0,6,vals[0]);// pad with 0's, max length 6
var pads = vals.map(function(i){ return l(0,6,i) });
document.write(pads.join("<br />"));

A little late, but thought I might share anyway. I found it useful to add a prototype extension to Object. That way I can pad numbers and strings, left or right. I have a module with similar utilities I include in my scripts.
// include the module in your script, there is no need to export
var jsAddOns = require('<path to module>/jsAddOns');
~~~~~~~~~~~~ jsAddOns.js ~~~~~~~~~~~~
/*
* method prototype for any Object to pad it's toString()
* representation with additional characters to the specified length
*
* #param padToLength required int
* entire length of padded string (original + padding)
* #param padChar optional char
* character to use for padding, default is white space
* #param padLeft optional boolean
* if true padding added to left
* if omitted or false, padding added to right
*
* #return padded string or
* original string if length is >= padToLength
*/
Object.prototype.pad = function(padToLength, padChar, padLeft) {
// get the string value
s = this.toString()
// default padToLength to 0
// if omitted, original string is returned
padToLength = padToLength || 0;
// default padChar to empty space
padChar = padChar || ' ';
// ignore padding if string too long
if (s.length >= padToLength) {
return s;
}
// create the pad of appropriate length
var pad = Array(padToLength - s.length).join(padChar);
// add pad to right or left side
if (padLeft) {
return pad + s;
} else {
return s + pad;
}
};

Never insert data somewhere (especially not at beginning, like str = pad + str;), since the data will be reallocated everytime. Append always at end!
Don't pad your string in the loop. Leave it alone and build your pad string first. In the end concatenate it with your main string.
Don't assign padding string each time (like str += pad;). It is much faster to append the padding string to itself and extract first x-chars (the parser can do this efficiently if you extract from first char). This is exponential growth, which means that it wastes some memory temporarily (you should not do this with extremely huge texts).
if (!String.prototype.lpad) {
String.prototype.lpad = function(pad, len) {
while (pad.length < len) {
pad += pad;
}
return pad.substr(0, len-this.length) + this;
}
}
if (!String.prototype.rpad) {
String.prototype.rpad = function(pad, len) {
while (pad.length < len) {
pad += pad;
}
return this + pad.substr(0, len-this.length);
}
}

Here is a JavaScript function that adds a specified number of paddings with a custom symbol. The function takes three parameters.
padMe --> string or number to left pad
pads --> number of pads
padSymble --> custom symbol, default is "0"
function leftPad(padMe, pads, padSymble) {
if(typeof padMe === "undefined") {
padMe = "";
}
if (typeof pads === "undefined") {
pads = 0;
}
if (typeof padSymble === "undefined") {
padSymble = "0";
}
var symble = "";
var result = [];
for(var i=0; i < pads; i++) {
symble += padSymble;
}
var length = symble.length - padMe.toString().length;
result = symble.substring(0, length);
return result.concat(padMe.toString());
}
Here are some results:
> leftPad(1)
"1"
> leftPad(1, 4)
"0001"
> leftPad(1, 4, "0")
"0001"
> leftPad(1, 4, "#")
"###1"

Yet another take at with combination of a couple of solutions:
/**
* pad string on left
* #param {number} number of digits to pad, default is 2
* #param {string} string to use for padding, default is '0' *
* #returns {string} padded string
*/
String.prototype.paddingLeft = function (b, c) {
if (this.length > (b||2))
return this + '';
return (this || c || 0) + '', b = new Array((++b || 3) - this.length).join(c || 0), b + this
};
/**
* pad string on right
* #param {number} number of digits to pad, default is 2
* #param {string} string to use for padding, default is '0' *
* #returns {string} padded string
*/
String.prototype.paddingRight = function (b, c) {
if (this.length > (b||2))
return this + '';
return (this||c||0) + '', b = new Array((++b || 3) - this.length).join(c || 0), this + b
};

How to convert one emoji character to Unicode codepoint number in JavaScript?

how to convert this 😀 into this 1f600 in javascript
'😀'.charCodeAt(0);
this will return unicode 55357 but how to get 1f600 from 😀

Two way
let hex = "😀".codePointAt(0).toString(16)
let emo = String.fromCodePoint("0x"+hex);
console.log(hex, emo);

Added script to convert this on browser side
function emojiUnicode (emoji) {
var comp;
if (emoji.length === 1) {
comp = emoji.charCodeAt(0);
}
comp = (
(emoji.charCodeAt(0) - 0xD800) * 0x400
+ (emoji.charCodeAt(1) - 0xDC00) + 0x10000
);
if (comp < 0) {
comp = emoji.charCodeAt(0);
}
return comp.toString("16");
};
emojiUnicode("😀"); # result "1f600"
thanks to https://www.npmjs.com/package/emoji-unicode

This is what I use:
const toUni = function (str) {
if (str.length < 4)
return str.codePointAt(0).toString(16);
return str.codePointAt(0).toString(16) + '-' + str.codePointAt(2).toString(16);
};

Please Read This Link.
Here is the function :
function toUTF16(codePoint) {
var TEN_BITS = parseInt('1111111111', 2);
function u(codeUnit) {
return '\\u'+codeUnit.toString(16).toUpperCase();
}
if (codePoint <= 0xFFFF) {
return u(codePoint);
}
codePoint -= 0x10000;
// Shift right to get to most significant 10 bits
var leadSurrogate = 0xD800 + (codePoint >> 10);
// Mask to get least significant 10 bits
var tailSurrogate = 0xDC00 + (codePoint & TEN_BITS);
return u(leadSurrogate) + u(tailSurrogate);
}

Here is another way. Source
"😀".codePointAt(0).toString(16)

Emojis like 👩‍⚕️ have two parts: 👩 +⚕️.
Here is how to get their code:
emoji = "👩‍⚕️" // corresponds to 1f469-200d-2695-fe0f
code1 = emoji.codePointAt(0).toString(16) // gives only 1f469
code2 = [...emoji].map(e => e.codePointAt(0).toString(16)).join(`-`) // gives correctly 1f469-200d-2695-fe0f
console.log(code1)
console.log(code2)

const
getUnicodeHex = char => char.codePointAt(0).toString(16),
getEmoji = unicodeHex => String.fromCodePoint(unicodeHex)
console.log(
getUnicodeHex('😀'), // 1f600
getEmoji(0x1f600) // 😀
)

Best answer in my view is to use node-emoji package.
https://www.npmjs.com/package/node-emoji
Here are steps.
do npm i node-emoji
var emoji = require('node-emoji');
var convertEmoji = function(data){
if(emoji.hasEmoji(data)){
return emoji.unemojify(data);
}
else{
return data;
}
}

JavaScript split and join

I have a string, 15.Prototypal-Inheritance-and-Refactoring-the-Slider.txt, I'd like to make it looks like 15.Prototypal...-Slider.txt
The length of the text is 56, how can I keep the first 12 letters and 10 last letters (incuding punctuation marks) and replace the others to ...
I don't really know how to commence the code, I made something like
var str="15.Prototypal-Inheritance-and-Refactoring-the-Slider.txt";
str.split("// ",1);
although this gives me what I need, how do I have the results base on letters not words.

You can use str.slice().
function middleEllipsis(str, a, b) {
if (str.length > a + b)
return str.slice(0, a) + '...' + str.slice(-b);
else
return str;
}
middleEllipsis("15.Prototypal-Inheritance-and-Refactoring-the-Slider.txt", 12, 10);
// "15.Prototypa...Slider.txt"
middleEllipsis("mpchc64.mov", 12, 10);
// "mpchc64.mov"

This function will do what you ask for:
function fixString(str) {
var LEN_PREFIX = 12;
var LEN_SUFFIX = 10;
if (str.length < LEN_PREFIX + LEN_SUFFIX) { return str; }
return str.substr(0, LEN_PREFIX) + '...' + str.substr(str.length - LEN_SUFFIX - 1);
}
You can adjust the LEN_PREFIX and LEN_SUFFIX as needed, but I've the values you specified in your post. You could also make the function more generic by making the prefix and suffix length input arguments to your function:
function fixString(str, prefixLength, suffixLength) {
if (str.length < prefixLength + suffixLength) { return str; }
return str.substr(0, prefixLength) + '...' + str.substr(str.length - suffixLength - 1);
}

I'd like to make it looks like 15.Prototypal...-Slider.txt
LIVE DEMO
No matter how long are the suffixed and prefixed texts, this will get the desired:
var str = "15.Prototypal-Inheritance-and-Refactoring-the-Slider.txt",
sp = str.split('-'),
newStr = str;
if(sp.length>1) newStr = sp[0]+'...-'+ sp.pop() ;
alert( newStr ); //15.Prototypal...-Slider.txt
Splitting the string at - and using .pop() method to retrieve the last Array value from the splitted String.
Instead of splitting the string at some defined positions it'll also handle strings like:
11.jQuery-infinite-loop-a-Gallery.txt returning: 11.jQuery...-Gallery.txt

Here's another option. Note that this keeps the first 13 characters and last 11 because that's what you gave in your example.:
var shortenedStr = str.substr(0, 13) + '...' + str.substring(str.length - 11);

You could use the javascript substring command to find out what you want.
If you string is always 56 characters you could do something like this:
var str="15.Prototypal-Inheritance-and-Refactoring-the-Slider.txt";
var newstr = str.substring(0,11) + "..." + str.substring(45,55)
if your string varies in length I would highly recommend finding the length of the string first, and then doing the substring.
have a look at: http://www.w3schools.com/jsref/jsref_substring.asp

How to trim a string to N chars in Javascript?

How can I, using Javascript, make a function that will trim string passed as argument, to a specified length, also passed as argument. For example:
var string = "this is a string";
var length = 6;
var trimmedString = trimFunction(length, string);
// trimmedString should be:
// "this is"
Anyone got ideas? I've heard something about using substring, but didn't quite understand.

Why not just use substring... string.substring(0, 7); The first argument (0) is the starting point. The second argument (7) is the ending point (exclusive). More info here.
var string = "this is a string";
var length = 7;
var trimmedString = string.substring(0, length);

Copying Will's comment into an answer, because I found it useful:
var string = "this is a string";
var length = 20;
var trimmedString = string.length > length ?
string.substring(0, length - 3) + "..." :
string;
Thanks Will.
And a jsfiddle for anyone who cares https://jsfiddle.net/t354gw7e/ :)

I suggest to use an extension for code neatness.
Note that extending an internal object prototype could potentially mess with libraries that depend on them.
String.prototype.trimEllip = function (length) {
return this.length > length ? this.substring(0, length) + "..." : this;
}
And use it like:
var stringObject= 'this is a verrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyylllooooooooooooonggggggggggggsssssssssssssttttttttttrrrrrrrrriiiiiiiiiiinnnnnnnnnnnnggggggggg';
stringObject.trimEllip(25)

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/substr
From link:
string.substr(start[, length])

let trimString = function (string, length) {
return string.length > length ?
string.substring(0, length) + '...' :
string;
};
Use Case,
let string = 'How to trim a string to N chars in Javascript';
trimString(string, 20);
//How to trim a string...

Prefer String.prototype.slice over the String.prototype.substring method (in substring, for some cases it gives a different result than what you expect).
Trim the string from LEFT to RIGHT:
const str = "123456789";
result = str.slice(0,5); // "12345", extracts first 5 characters
result = str.substring(0,5); // "12345"
startIndex > endIndex:
result = str.slice(5,0); // "", empty string
result = str.substring(5,0); // "12345" , swaps start & end indexes => str.substring(0,5)
Trim the string from RIGHT to LEFT: (-ve start index)
result = str.slice(-3); // "789", extracts last 3 characters
result = str.substring(-3); // "123456789" , -ve becomes 0 => str.substring(0)
result = str.substring(str.length - 3); // "789"

Little late... I had to respond. This is the simplest way.
// JavaScript
function fixedSize_JS(value, size) {
return value.padEnd(size).substring(0, size);
}
// JavaScript (Alt)
var fixedSize_JSAlt = function(value, size) {
return value.padEnd(size).substring(0, size);
}
// Prototype (preferred)
String.prototype.fixedSize = function(size) {
return this.padEnd(size).substring(0, size);
}
// Overloaded Prototype
function fixedSize(value, size) {
return value.fixedSize(size);
}
// usage
console.log('Old school JS -> "' + fixedSize_JS('test (30 characters)', 30) + '"');
console.log('Semi-Old school JS -> "' + fixedSize_JSAlt('test (10 characters)', 10) + '"');
console.log('Prototypes (Preferred) -> "' + 'test (25 characters)'.fixedSize(25) + '"');
console.log('Overloaded Prototype (Legacy support) -> "' + fixedSize('test (15 characters)', 15) + '"');
Step by step.
.padEnd - Guarentees the length of the string
"The padEnd() method pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length. The padding is applied from the end (right) of the current string. The source for this interactive example is stored in a GitHub repository."
source: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
.substring - limits to the length you need
If you choose to add ellipses, append them to the output.
I gave 4 examples of common JavaScript usages. I highly recommend using the String prototype with Overloading for legacy support. It makes it much easier to implement and change later.

Just another suggestion, removing any trailing white-space
limitStrLength = (text, max_length) => {
if(text.length > max_length - 3){
return text.substring(0, max_length).trimEnd() + "..."
}
else{
return text
}

There are several ways to do achieve this
let description = "your test description your test description your test description";
let finalDesc = shortMe(description, length);
function finalDesc(str, length){
// return str.slice(0,length);
// return str.substr(0, length);
// return str.substring(0, length);
}
You can also modify this function to get in between strings as well.

Here is my solution, which includes trimming white space too.
const trimToN = (text, maxLength, dotCount) => {
let modText = text.trim();
if (modText.length > maxLength) {
modText = text.substring(0, maxLength - dotCount);
modText = modText.padEnd(maxLength, ".");
return modText;
}
return text;
};
trimToN('Javascript', 6, 2) will return "Java.."

I think that you should use this code :-)
// sample string
const param= "Hi you know anybody like pizaa";
// You can change limit parameter(up to you)
const checkTitle = (str, limit = 17) => {
var newTitle = [];
if (param.length >= limit) {
param.split(" ").reduce((acc, cur) => {
if (acc + cur.length <= limit) {
newTitle.push(cur);
}
return acc + cur.length;
}, 0);
return `${newTitle.join(" ")} ...`;
}
return param;
};
console.log(checkTitle(str));
// result : Hi you know anybody ...

I want to truncate a text or line with ellipsis using JavaScript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I'm looking for a simple script which can truncate a string with ellipsis (...)
I want to truncate something like 'this is a very long string' to 'this is a ve...'
I don't want to use CSS or PHP.

function truncate(input) {
if (input.length > 5) {
return input.substring(0, 5) + '...';
}
return input;
};
or in ES6
const truncate = (input) => input.length > 5 ? `${input.substring(0, 5)}...` : input;

KooiInc has a good answer to this. To summarise:
String.prototype.trunc =
function(n){
return this.substr(0,n-1)+(this.length>n?'…':'');
};
Now you can do:
var s = 'not very long';
s.trunc(25); //=> not very long
s.trunc(5); //=> not...
And if you prefer it as a function, as per #AlienLifeForm's comment:
function truncateWithEllipses(text, max)
{
return text.substr(0,max-1)+(text.length>max?'…':'');
}
Full credit goes to KooiInc for this.

This will limit it to however many lines you want it limited to and is responsive
An idea that nobody has suggested, doing it based on the height of the element and then stripping it back from there.
Fiddle - https://jsfiddle.net/hutber/u5mtLznf/ <- ES6 version
But basically you want to grab the line height of the element, loop through all the text and stop when its at a certain lines height:
'use strict';
var linesElement = 3; //it will truncate at 3 lines.
var truncateElement = document.getElementById('truncateme');
var truncateText = truncateElement.textContent;
var getLineHeight = function getLineHeight(element) {
var lineHeight = window.getComputedStyle(truncateElement)['line-height'];
if (lineHeight === 'normal') {
// sucky chrome
return 1.16 * parseFloat(window.getComputedStyle(truncateElement)['font-size']);
} else {
return parseFloat(lineHeight);
}
};
linesElement.addEventListener('change', function () {
truncateElement.innerHTML = truncateText;
var truncateTextParts = truncateText.split(' ');
var lineHeight = getLineHeight(truncateElement);
var lines = parseInt(linesElement.value);
while (lines * lineHeight < truncateElement.clientHeight) {
console.log(truncateTextParts.length, lines * lineHeight, truncateElement.clientHeight);
truncateTextParts.pop();
truncateElement.innerHTML = truncateTextParts.join(' ') + '...';
}
});
CSS
#truncateme {
width: auto; This will be completely dynamic to the height of the element, its just restricted by how many lines you want it to clip to
}

Something like:
var line = "foo bar lol";
line.substring(0, 5) + '...' // gives "foo b..."

This will put the ellipsis in the center of the line:
function truncate( str, max, sep ) {
// Default to 10 characters
max = max || 10;
var len = str.length;
if(len > max){
// Default to elipsis
sep = sep || "...";
var seplen = sep.length;
// If seperator is larger than character limit,
// well then we don't want to just show the seperator,
// so just show right hand side of the string.
if(seplen > max) {
return str.substr(len - max);
}
// Half the difference between max and string length.
// Multiply negative because small minus big.
// Must account for length of separator too.
var n = -0.5 * (max - len - seplen);
// This gives us the centerline.
var center = len/2;
var front = str.substr(0, center - n);
var back = str.substr(len - center + n); // without second arg, will automatically go to end of line.
return front + sep + back;
}
return str;
}
console.log( truncate("123456789abcde") ); // 123...bcde (using built-in defaults)
console.log( truncate("123456789abcde", 8) ); // 12...cde (max of 8 characters)
console.log( truncate("123456789abcde", 12, "_") ); // 12345_9abcde (customize the separator)
For example:
1234567890 --> 1234...8910
And:
A really long string --> A real...string
Not perfect, but functional. Forgive the over-commenting... for the noobs.

For preventing the dots in the middle of a word or after a punctuation symbol.
let parseText = function(text, limit){
if (text.length > limit){
for (let i = limit; i > 0; i--){
if(text.charAt(i) === ' ' && (text.charAt(i-1) != ','||text.charAt(i-1) != '.'||text.charAt(i-1) != ';')) {
return text.substring(0, i) + '...';
}
}
return text.substring(0, limit) + '...';
}
else
return text;
};
console.log(parseText("1234567 890",5)) // >> 12345...
console.log(parseText("1234567 890",8)) // >> 1234567...
console.log(parseText("1234567 890",15)) // >> 1234567 890

Easiest and flexible way: JSnippet DEMO
Function style:
function truncString(str, max, add){
add = add || '...';
return (typeof str === 'string' && str.length > max ? str.substring(0,max)+add : str);
};
Prototype:
String.prototype.truncString = function(max, add){
add = add || '...';
return (this.length > max ? this.substring(0,max)+add : this);
};
Usage:
str = "testing with some string see console output";
//By prototype:
console.log( str.truncString(15,'...') );
//By function call:
console.log( truncString(str,15,'...') );

function truncate(string, length, delimiter) {
delimiter = delimiter || "…";
return string.length > length ? string.substr(0, length) + delimiter : string;
};
var long = "Very long text here and here",
short = "Short";
truncate(long, 10); // -> "Very long ..."
truncate(long, 10, ">>"); // -> "Very long >>"
truncate(short, 10); // -> "Short"

Try this
function shorten(text, maxLength, delimiter, overflow) {
delimiter = delimiter || "…";
overflow = overflow || false;
var ret = text;
if (ret.length > maxLength) {
var breakpoint = overflow ? maxLength + ret.substr(maxLength).indexOf(" ") : ret.substr(0, maxLength).lastIndexOf(" ");
ret = ret.substr(0, breakpoint) + delimiter;
}
return ret;
}
$(document).ready(function() {
var $editedText = $("#edited_text");
var text = $editedText.text();
$editedText.text(shorten(text, 33, "...", false));
});
Checkout a working sample on Codepen
http://codepen.io/Izaias/pen/QbBwwE

HTML with JavaScript:
<p id="myid">My long long looooong text cut cut cut cut cut</p>
<script type="text/javascript">
var myid=document.getElementById('myid');
myid.innerHTML=myid.innerHTML.substring(0,10)+'...';
</script>
The result will be:
My long lo...
Cheers
G.

If you want to cut a string for a specifited length and add dots use
// Length to cut
var lengthToCut = 20;
// Sample text
var text = "The quick brown fox jumps over the lazy dog";
// We are getting 50 letters (0-50) from sample text
var cutted = text.substr(0, lengthToCut );
document.write(cutted+"...");
Or if you want to cut not by length but with words count use:
// Number of words to cut
var wordsToCut = 3;
// Sample text
var text = "The quick brown fox jumps over the lazy dog";
// We are splitting sample text in array of words
var wordsArray = text.split(" ");
// This will keep our generated text
var cutted = "";
for(i = 0; i < wordsToCut; i++)
cutted += wordsArray[i] + " "; // Add to cutted word with space
document.write(cutted+"...");
Good luck...