Join Array items' strings which contain commas inside - javascript

Input Array:
["a,b,c", "foo,bar", "1,2,1", "a"] // should convert to → '"a,b,c","foo,bar","1,2,1","a"'
Now, using toString() or .join("") will produce the unwanted:
var arr = ["a,b,c", "foo,bar", "1,2,1", "a"];
console.log( arr.toString() )
console.log( arr.join(',') )
So, to bypass that, the first which comes to mind is JSON.stringify:
var arr = ["a,b,c", "foo,bar", "1,2,1", "a"];
var s = JSON.stringify(arr).slice(1,-1);
console.log( typeof s, ":" , s )
↑ The above is the wanted result, but i'm sure there's a cleaner way of doing it
Question:
Is this the only way to convert an Array which has string items containing commas to a String?


Here is another way to get the same result as with stringify (except when arr contains strings with embedded double-quotes):
arr.reduce((a, c, i) => a + (i > 0 ? ',"' : '"') + c + '"', '')


It depends on what "converting to string" means to you. An array is an ordered list of items numerically accessed. A string is a textual representation of that ordered list. If your question is "how to convert an array to a string while still being able to get the original array back," then the most performant answer would be JSON.stringify to convert the Array to a String, then JSON.parse to convert the string back into an array. However, JSON.stringify is only one of the many ways you could convert an array to a string.
A simple way to join all the strings in the array together is either by using Array.prototype.join.call or String.prototype.concat.apply
"use strict";
(function(){
var arr = ["a,b,c", "foo,bar", "1,2,1", "a"];
console.log( "Array.prototype.join: ", arr.join("") );
console.log( "String.prototype.concat: ", String.prototype.concat.apply("", arr) );
})();
Another way you could convert an array to a string is by going through each string in the array and concatenating them together.
"use strict";
(function(){
var arr = ["a,b,c", "foo,bar", "1,2,1", "a"];
var res = "";
var i = arr.length;
var curStr = "";
while (i--) {
curStr = arr[i];
// when the item on the left side is a string, the "+"
// operator acts as a concatination operator
res = res + curStr + ",";
// res += curStr + ","; // works just as well
// res += arr[i] + ","; // also works too
}
console.log( res );
})();
Using the fact that we can go through each item in the array, and look at each string individually, we can do something like converting each string to a base64 blob, then joining each string with a line break.
"use strict";
(function(window){
var btoa = window.btoa, atob = window.atob;
function encode(theArray){
var i = theArray.length, res = "";
while (i--) res += btoa(theArray[i]) + "\n";
return res.slice(0,-1);
}
function decode(theString){
var splitted = theString.split("\n");
var i = splitted.length, res = [];
while (i--) res.push( atob(splitted[i]) );
return res;
}
var arr = ["a,b,c", "foo,bar", "1,2,1", "a"];
var encoded_arr = encode(arr);
console.log("encoded_arr: ", JSON.stringify(encoded_arr, null, 1).replace(/\\n/g, "\n") );
var decoded_arr = decode(encoded_arr);
console.log( "decoded_arr", JSON.stringify(decoded_arr, null, 1).replace(/\\n/g, "\n") );
})(self);
There are countless more ways to join an array of strings together depending on your specific needs. Below are many such examples. Please emphasize that while all the following "work", none of them are as efficient as Array.prototype.join.
String.prototype.replace
function joinWithRegexp(str1, str2) {
return str1.replace(new RegExp("$"), str2);
}
console.log(joinWithRegexp("Foo", " bar"));
String.prototype.padStart
function joinWithPadStart(str1, str2) {
return str2.padStart(str1.length + str2.length, str1);
}
console.log(joinWithPadStart("Foo", " bar"));
String.prototype.padEnd
function joinWithPadEnd(str1, str2) {
return str1.padEnd(str1.length + str2.length, str2);
}
console.log(joinWithPadEnd("Foo", " bar"));
Template Literals
function joinWithTemplateLiteral(str1, str2) {
return `${str1}${str2}`;
}
console.log(joinWithTemplateLiteral("Foo", " bar"));
DOM
var tmpElement = document.createElement("div");
function joinWithDOM(str1, str2) {
tmpElement.appendChild(document.createTextNode(str1));
tmpElement.appendChild(document.createTextNode(str2));
return tmpElement.textContent;
}
console.log(joinWithDOM("Foo", " bar"));
Blob
var reader = new FileReader;
function joinWithBlob(str1, str2, thenFunc) {
reader.onload = function(){ thenFunc( reader.result ); };
reader.readAsText(new Blob([str1, str2]));
}
joinWithBlob("Foo", " bar", function(result){
console.log(result);
});

Related

Split multiple value in Array & create new array for split value in Java script

I want all index value that have data in array after ":" & split it to different Array at same index number. I am able to change data for one index value but its not changing for all value
var Array = ["Alice:", "John:654", "Bob:123"];
** After Split **
var Array = ["Alice:", "John:", "Bob:"];
var new array = ["", "654", "123"];
<script>
var array = ["Alice:", "John:654", "Bob:123"];
var el = array.find(a =>a.includes(":"));
let index = array.indexOf(el);
const newArray = el.split(':')[0] + ':';
var array2 = ["", "", ""];
array2[index] = newArray;
document.getElementById("demo").innerHTML = "The value of arry is: " + el;
document.getElementById("demo2").innerHTML = "The index of arry is: " + index;
document.getElementById("demo3").innerHTML = "split value: " + newArray;
document.getElementById("demo4").innerHTML = "new arr: " + array2;
</script>

If I understood your question correctly, this should be a solution:
const [oldOne, newOne] = array.reduce(
(acumm, current, index) => {
const [name, value] = current.split(':');
acumm[0].push(`${name}:`);
acumm[1].push(value ?? '');
return acumm;
},
[[], []]
);
Stackblitz Example
Info
// not mess up global vars, "Array" is a constructor
var Array = ["Alice:", "John:654", "Bob:123"];
** After Split **
var Array = ["Alice:", "John:", "Bob:"];
// not mess up with key words, "new" can only be called on
// constructors and array is as far i know not one
var new array = ["", "654", "123"];

Here's a solution using .map (so you don't need to keep track of the index)
var array = ["Alice:", "John:654", "Bob:123"];
var result = array.map(e => e.split(":")[1])
array = array.map(e => e.split(":")[0] + ":")
console.log(array, result)
Note that split(":")[1] will only give you the first entry if you have multiple ":" in the values, eg "John:654:999" - you can combine them with splice and join, eg:
parts.splice(1).join(":")
Here's the same solution, using a forEach if you prefer a single iteration over two:
var array = ["Alice:", "John:654:999", "Bob:123"];
var result = [];
var replacement = [];
array.forEach(e => {
var parts = e.split(":");
replacement.push(parts[0] + ":")
result.push(parts.splice(1).join(":"))
});
console.log(replacement, result)

how to convert json values in comma separated string using javascript

I have following JSON string :
{"name":"Marine Lines","location_id":3},{"name":"Ghatkopar","location_id":2}
I want location_id as
3,2

Simple:
var data = [{"name":"Marine Lines","location_id":3},{"name":"Ghatkopar","location_id":2}]
var result = data.map(function(val) {
return val.location_id;
}).join(',');
console.log(result)
I assume you wanted a string, hence the .join(','), if you want an array simply remove that part.

You could add brackets to the string, parse the string (JSON.parse) and map (Array#map) the property and the join (Array#join) the result.
var string = '{"name":"Marine Lines","location_id":3},{"name":"Ghatkopar","location_id":2}',
array = JSON.parse('[' + string + ']'),
result = array.map(function (a) { return a.location_id; }).join();
console.log(result);

obj=[{"name":"Marine Lines","location_id":3}, {"name":"Ghatkopar","location_id":2}]
var res = [];
for (var x in obj)
if (obj.hasOwnProperty(x))
res.push(obj[x].location_id);
console.log(res.join(","));

var json = [{"name":"Marine Lines","location_id":3},{"name":"Ghatkopar","location_id":2}];
var locationIds = [];
for(var object in json){
locationIds.push(json[object].location_id);
}
console.log(locationIds.join(","));

You can also look into .reduce and create a string manually
var d = [{"name":"Marine Lines","location_id":3},{"name":"Ghatkopar","location_id":2}]
var location_id_str = d.reduce(function(p, c) {
return p ? p + ',' + c.location_id : c.location_id
},'');
console.log(location_id_str)

try this
var obj = [{"name":"Marine Lines","location_id":3},{"name":"Ghatkopar","location_id":2}];
var output = obj.map( function(item){
return item.location_id;
});
console.log( output.join(",") )

var arr = [{"name":"Marine Lines","location_id":3},{"name":"Ghatkopar","location_id":2}];
var location_array = [];
for( var i = 0; i < arr.length; i++ )
{
location_array.push( arr[i].location_id );
}//for
var location_string = location_array.join(",");
console.log(location_string);
Note: You may need to use JSON.parse() if the arr is in string format initially.

You can use for..of loop
var arr = [{
"name": "Marine Lines",
"location_id": 3
}, {
"name": "Ghatkopar",
"location_id": 2
}];
var res = [];
for ({location_id} of arr) {res.push(location_id)};
console.log(res);

How to preserve quotes on values in array

I have to redo the functionality of JSON.stringify for a class and I am stuck...
If I am passed an array, I need to return the exact array as a string. However, when I return the array, it strips the quotations off of any values that are strings. For example:
var arr = [8, "hello"];
var addQuotes = function(arr){
return ('[' + arr + ']');
}
addQuotes(arr);
//"[8, hello]"
However, I need it to return:
"[8, "hello"]"
How do I preserve the quotation marks on array values?

I propose this code :
var arr = [8, "hello"];
var arrString = arr.map(x => typeof x === 'string' ? "\"" + x + "\"" : x);
result = "\"[" + arrString.join(", ") + "]\""
console.log(result); // ) "[8, "hello"]"

Simple Extending Native JS

Take a look at the code bellow, it's pretty self-explanatory. How do I modify the 'replaceAt' function to get the desired results?
String.prototype.replaceAt = function (at) {
return this.substring(0, at) + this.substring(at+1, this.length);
}
var str = "webmaster";
var x = str.replaceAt(2);
console.log(x); // should return "b"
console.log(str); // should return "wemaster"

You can't, strings are immutable.
One other approach would be to return an object or array containing the replaced character, and the new string. Then assign the values to the variables 'x' and 'str', respectively:
String.prototype.replaceAt = function (at) {
return {
x: this.substring(at+1, at),
str: this.substring(0, at) + this.substring(at+1, this.length)
}
};
var str = "webmaster";
var result = str.replaceAt(2);
var x = result.x;
str = result.str;
console.log(x);
console.log(str);
However, utilizing the ES6 feature 'destructuring', you can in fact bring it down to a oneliner:
String.prototype.replaceAt = function (at) {
return [
this.substring(at+1, at),
this.substring(0, at) + this.substring(at+1, this.length)
]
};
var str = "webmaster";
[x, str] = str.replaceAt(2);
console.log(x);
console.log(str);

Javascript How to split string by symbols count [duplicate]

As the title says, I've got a string and I want to split into segments of n characters.
For example:
var str = 'abcdefghijkl';
after some magic with n=3, it will become
var arr = ['abc','def','ghi','jkl'];
Is there a way to do this?

var str = 'abcdefghijkl';
console.log(str.match(/.{1,3}/g));
Note: Use {1,3} instead of just {3} to include the remainder for string lengths that aren't a multiple of 3, e.g:
console.log("abcd".match(/.{1,3}/g)); // ["abc", "d"]
A couple more subtleties:
If your string may contain newlines (which you want to count as a character rather than splitting the string), then the . won't capture those. Use /[\s\S]{1,3}/ instead. (Thanks #Mike).
If your string is empty, then match() will return null when you may be expecting an empty array. Protect against this by appending || [].
So you may end up with:
var str = 'abcdef \t\r\nghijkl';
var parts = str.match(/[\s\S]{1,3}/g) || [];
console.log(parts);
console.log(''.match(/[\s\S]{1,3}/g) || []);

If you didn't want to use a regular expression...
var chunks = [];
for (var i = 0, charsLength = str.length; i < charsLength; i += 3) {
chunks.push(str.substring(i, i + 3));
}
jsFiddle.
...otherwise the regex solution is pretty good :)

str.match(/.{3}/g); // => ['abc', 'def', 'ghi', 'jkl']

Building on the previous answers to this question; the following function will split a string (str) n-number (size) of characters.
function chunk(str, size) {
return str.match(new RegExp('.{1,' + size + '}', 'g'));
}
Demo
(function() {
function chunk(str, size) {
return str.match(new RegExp('.{1,' + size + '}', 'g'));
}
var str = 'HELLO WORLD';
println('Simple binary representation:');
println(chunk(textToBin(str), 8).join('\n'));
println('\nNow for something crazy:');
println(chunk(textToHex(str, 4), 8).map(function(h) { return '0x' + h }).join(' '));
// Utiliy functions, you can ignore these.
function textToBin(text) { return textToBase(text, 2, 8); }
function textToHex(t, w) { return pad(textToBase(t,16,2), roundUp(t.length, w)*2, '00'); }
function pad(val, len, chr) { return (repeat(chr, len) + val).slice(-len); }
function print(text) { document.getElementById('out').innerHTML += (text || ''); }
function println(text) { print((text || '') + '\n'); }
function repeat(chr, n) { return new Array(n + 1).join(chr); }
function textToBase(text, radix, n) {
return text.split('').reduce(function(result, chr) {
return result + pad(chr.charCodeAt(0).toString(radix), n, '0');
}, '');
}
function roundUp(numToRound, multiple) {
if (multiple === 0) return numToRound;
var remainder = numToRound % multiple;
return remainder === 0 ? numToRound : numToRound + multiple - remainder;
}
}());
#out {
white-space: pre;
font-size: 0.8em;
}
<div id="out"></div>

If you really need to stick to .split and/or .raplace, then use /(?<=^(?:.{3})+)(?!$)/g
For .split:
var arr = str.split( /(?<=^(?:.{3})+)(?!$)/ )
// [ 'abc', 'def', 'ghi', 'jkl' ]
For .replace:
var replaced = str.replace( /(?<=^(?:.{3})+)(?!$)/g, ' || ' )
// 'abc || def || ghi || jkl'
/(?!$)/ is to not stop at end of the string. Without it's:
var arr = str.split( /(?<=^(?:.{3})+)/ )
// [ 'abc', 'def', 'ghi', 'jkl' ] // is fine
var replaced = str.replace( /(?<=^(.{3})+)/g, ' || ')
// 'abc || def || ghi || jkl || ' // not fine
Ignoring group /(?:...)/ is to prevent duplicating entries in the array. Without it's:
var arr = str.split( /(?<=^(.{3})+)(?!$)/ )
// [ 'abc', 'abc', 'def', 'abc', 'ghi', 'abc', 'jkl' ] // not fine
var replaced = str.replace( /(?<=^(.{3})+)(?!$)/g, ' || ' )
// 'abc || def || ghi || jkl' // is fine

My solution (ES6 syntax):
const source = "8d7f66a9273fc766cd66d1d";
const target = [];
for (
const array = Array.from(source);
array.length;
target.push(array.splice(0,2).join(''), 2));
We could even create a function with this:
function splitStringBySegmentLength(source, segmentLength) {
if (!segmentLength || segmentLength < 1) throw Error('Segment length must be defined and greater than/equal to 1');
const target = [];
for (
const array = Array.from(source);
array.length;
target.push(array.splice(0,segmentLength).join('')));
return target;
}
Then you can call the function easily in a reusable manner:
const source = "8d7f66a9273fc766cd66d1d";
const target = splitStringBySegmentLength(source, 2);
Cheers

const chunkStr = (str, n, acc) => {
if (str.length === 0) {
return acc
} else {
acc.push(str.substring(0, n));
return chunkStr(str.substring(n), n, acc);
}
}
const str = 'abcdefghijkl';
const splittedString = chunkStr(str, 3, []);
Clean solution without REGEX

My favorite answer is gouder hicham's. But I revised it a little so that it makes more sense to me.
let myString = "Able was I ere I saw elba";
let splitString = [];
for (let i = 0; i < myString.length; i = i + 3) {
splitString.push(myString.slice(i, i + 3));
}
console.log(splitString);
Here is a functionalized version of the code.
function stringSplitter(myString, chunkSize) {
let splitString = [];
for (let i = 0; i < myString.length; i = i + chunkSize) {
splitString.push(myString.slice(i, i + chunkSize));
}
return splitString;
}
And the function's use:
let myString = "Able was I ere I saw elba";
let mySplitString = stringSplitter(myString, 3);
console.log(mySplitString);
And it's result:
>(9) ['Abl', 'e w', 'as ', 'I e', 're ', 'I s', 'aw ', 'elb', 'a']

try this simple code and it will work like magic !
let letters = "abcabcabcabcabc";
// we defined our variable or the name whatever
let a = -3;
let finalArray = [];
for (let i = 0; i <= letters.length; i += 3) {
finalArray.push(letters.slice(a, i));
a += 3;
}
// we did the shift method cause the first element in the array will be just a string "" so we removed it
finalArray.shift();
// here the final result
console.log(finalArray);

var str = 'abcdefghijkl';
var res = str.match(/.../g)
console.log(res)
here number of dots determines how many text you want in each word.

function chunk(er){
return er.match(/.{1,75}/g).join('\n');
}
Above function is what I use for Base64 chunking. It will create a line break ever 75 characters.

Here we intersperse a string with another string every n characters:
export const intersperseString = (n: number, intersperseWith: string, str: string): string => {
let ret = str.slice(0,n), remaining = str;
while (remaining) {
let v = remaining.slice(0, n);
remaining = remaining.slice(v.length);
ret += intersperseWith + v;
}
return ret;
};
if we use the above like so:
console.log(splitString(3,'|', 'aagaegeage'));
we get:
aag|aag|aeg|eag|e
and here we do the same, but push to an array:
export const sperseString = (n: number, str: string): Array<string> => {
let ret = [], remaining = str;
while (remaining) {
let v = remaining.slice(0, n);
remaining = remaining.slice(v.length);
ret.push(v);
}
return ret;
};
and then run it:
console.log(sperseString(5, 'foobarbaztruck'));
we get:
[ 'fooba', 'rbazt', 'ruck' ]
if someone knows of a way to simplify the above code, lmk, but it should work fine for strings.

Coming a little later to the discussion but here a variation that's a little faster than the substring + array push one.
// substring + array push + end precalc
var chunks = [];
for (var i = 0, e = 3, charsLength = str.length; i < charsLength; i += 3, e += 3) {
chunks.push(str.substring(i, e));
}
Pre-calculating the end value as part of the for loop is faster than doing the inline math inside substring. I've tested it in both Firefox and Chrome and they both show speedup.
You can try it here

Here's a way to do it without regular expressions or explicit loops, although it's stretching the definition of a one liner a bit:
const input = 'abcdefghijlkm';
// Change `3` to the desired split length.
const output = input.split('').reduce((s, c) => {
let l = s.length-1;
(s[l] && s[l].length < 3) ? s[l] += c : s.push(c);
return s;
}, []);
console.log(output); // output: [ 'abc', 'def', 'ghi', 'jlk', 'm' ]
It works by splitting the string into an array of individual characters, then using Array.reduce to iterate over each character. Normally reduce would return a single value, but in this case the single value happens to be an array, and as we pass over each character we append it to the last item in that array. Once the last item in the array reaches the target length, we append a new array item.

Some clean solution without using regular expressions:
/**
* Create array with maximum chunk length = maxPartSize
* It work safe also for shorter strings than part size
**/
function convertStringToArray(str, maxPartSize){
const chunkArr = [];
let leftStr = str;
do {
chunkArr.push(leftStr.substring(0, maxPartSize));
leftStr = leftStr.substring(maxPartSize, leftStr.length);
} while (leftStr.length > 0);
return chunkArr;
};
Usage example - https://jsfiddle.net/maciejsikora/b6xppj4q/.
I also tried to compare my solution to regexp one which was chosen as right answer. Some test can be found on jsfiddle - https://jsfiddle.net/maciejsikora/2envahrk/. Tests are showing that both methods have similar performance, maybe on first look regexp solution is little bit faster, but judge it Yourself.

var b1 = "";
function myFunction(n) {
if(str.length>=3){
var a = str.substring(0,n);
b1 += a+ "\n"
str = str.substring(n,str.length)
myFunction(n)
}
else{
if(str.length>0){
b1 += str
}
console.log(b1)
}
}
myFunction(4)

function str_split(string, length = 1) {
if (0 >= length)
length = 1;
if (length == 1)
return string.split('');
var string_size = string.length;
var result = [];
for (let i = 0; i < string_size / length; i++)
result[i] = string.substr(i * length, length);
return result;
}
str_split(str, 3)
Benchmark: http://jsben.ch/HkjlU (results differ per browser)
Results (Chrome 104)

Categories