I want to create a checkout form which includes expiry date TextInput. It will look like a this (MM/YY). After adding first 2 digits it will automatically add / then the person can type last 2 digits for the year. I found this code on the other question. But it doesn't work. When you type inside the form nothing is typed. Here is the code. How can I make this code work as needed?
constructor() {
super()
this.state = {
isReady: false
}
}
componentDidMount() {
this.setState({
isReady: true
})
}
onChange(text) {
let newText = '';
let numbers = '0123456789';
for (var i = 0; i < text.length; i++) {
if ( numbers.indexOf(text[i]) > -1 ) {
newText = newText + text[i];
}
}
this.setState({myNumber: newText})
}
formatFunction(cardExpiry = ""){
//expiryDate will be in the format MMYY, so don't make it smart just format according to these requirements, if the input has less than 2 character return it otherwise append `/` character between 2nd and 3rd letter of the input.
if(cardExpiry.length < 2){
return cardExpiry;
}
else{
return cardExpiry.substr(0, 2) + "/" + (cardExpiry.substr(2) || "")
}
}
inputToValue(inputText){
//if the input has more than 5 characters don't set the state
if(inputText.length < 6){
const tokens = inputText.split("/");
// don't set the state if there is more than one "/" character in the given input
if(tokens.length < 3){
const month = Number(tokens[1]);
const year = Number(tokens[2]);
//don't set the state if the first two letter is not a valid month
if(month >= 1 && month <= 12){
let cardExpiry = month + "";
//I used lodash for padding the month and year with zero
if(month > 1 || tokens.length === 2){
// user entered 2 for the month so pad it automatically or entered "1/" convert it to 01 automatically
cardExpiry = _.padStart(month, 2, "0");
}
//disregard changes for invalid years
if(year > 1 && year <= 99){
cardExpiry += year;
}
this.setState({cardExpiry});
}
}
}
}
render (){
let {cardExpiry} = this.state;
return (
<Image style={styles.image} source={require('../img/cover.jpg')}
>
<Content style={styles.content}>
<Form>
<Item >
<Icon active name='card'/>
<Input keyboardType='numeric' maxLength={16} placeholder='Card Number'
onChangeText = {(text)=> this.onChange(text)}
value = {this.state.myNumber}/>
</Item>
<Grid>
<Row>
<Col>
<Item style={{ marginBottom:10}}>
<Icon active name='calendar' />
<Input keyboardType='numeric' placeholder='MM/YY'
value = {this.formatFunction(cardExpiry)}
onChangeText={this.inputToValue.bind(this)}/>
</Item>
</Col>
<Col>
<Item style={{ marginBottom:10}}>
<Icon active name='lock' />
<Input maxLength={3} secureTextEntry={true} placeholder='CVV'/>
</Item>
</Col>
</Row>
</Grid>
Use this code to handle your problem:
constructor(props) {
super(props);
this.state = { text: '' };
}
handleChange = (text) => {
let textTemp = text;
if (textTemp[0] !== '1' && textTemp[0] !== '0') {
textTemp = '';
}
if (textTemp.length === 2) {
if (parseInt(textTemp.substring(0, 2)) > 12 || parseInt(textTemp.substring(0, 2)) == 0) {
textTemp = textTemp[0];
} else if (this.state.text.length === 2) {
textTemp += '/';
} else {
textTemp = textTemp[0];
}
}
this.setState({text: textTemp})
}
render() {
return (
<TextInput
keyboardType={'numeric'}
onChangeText={this.handleChange}
value={this.state.text}
maxLength={5}
/>
);
}
After searching a lot for Picker with Month/Year, for the time being i have created a logic for the Expiry date.
Hope this will help somebody.
const onCardExpiryDateChange = (prevValue:string, currentValue: string) => {
if (currentValue?.includes(',') || currentValue?.includes('-') || currentValue?.includes('.')) {
return prevValue
} else {
let textTemp = currentValue
if (textTemp[0] !== '0' && textTemp[0] !== '1' && textTemp[0] !== '2' && textTemp[0] !== '3') {
textTemp = '';
} else if ((prevValue?.length === 5) && currentValue.length === prevValue.length-1) {
textTemp = textTemp?.slice(0, -3)
} else if (textTemp.length === 6 && (textTemp[5] == '0' || textTemp[5] == '1')){
textTemp = textTemp?.slice(0, -1)
}
else if (textTemp.length === 7 && textTemp[6] == '0') {
textTemp = textTemp?.slice(0, -1)
} else if (textTemp.length === 2) {
if (parseInt(textTemp?.substring(0, 2)) > 12 || parseInt(textTemp?.substring(0, 2)) == 0) {
textTemp = textTemp?.slice(0, -1)
} else if (textTemp?.length === 2) {
textTemp += ' / ';
} else {
textTemp = textTemp[0];
}
}
return textTemp
}
}
As #AndroConsis pointed out in #Vahid Boreiri's answer, the only problem with adding '/' after length 2 is when deleting the expiry date it keeps adding '/'. To fix this, one can add a conditional backspaceFlag.
const [backspaceFlag, setBackspaceFlag] = React.useState(false);
const [expiratoinDate, setExpirationDate] = React.useState('');
const handleExpirationDate = (text) => {
let textTemp = text;
if (textTemp[0] !== '1' && textTemp[0] !== '0') {
textTemp = '';
}
if (textTemp.length === 2) {
if (parseInt(textTemp.substring(0, 2)) > 12 || parseInt(textTemp.substring(0, 2)) == 0) {
textTemp = textTemp[0];
} else if (text.length === 2 && !backspaceFlag) {
textTemp += '/';
setBackspaceFlag(true);
} else if (text.length === 2 && backspaceFlag) {
textTemp = textTemp[0];
setBackspaceFlag(false);
} else {
textTemp = textTemp[0];
}
}
setExpirationDate(textTemp);
};
const [expiratoinDate, setExpirationDate] = useState(''); const [backspaceFlag, setBackspaceFlag] = useState(false);
const handleExpirationDate = (text) => {
if(backspaceFlag===false){
if(text.length==2){ setExpirationDate(text+"/"); setBackspaceFlag(true) }
`else{
setExpirationDate(text)
}`
}
else{
if(text.length==2){
let text2=expiratoinDate.slice(0,1)
`setExpirationDate(text2);`
`setBackspaceFlag(false)
}`
`else{
setExpirationDate(text)
}`
}
`};`
Adding an answer that resolves not being able to delete the '/' in above solution.
const setExpiry = (e) => {
const { name, value } = e.target;
var v = value;
if (v.includes('/') == false) {
if (v.length === 4) {
var a = v.substr(0, 2);
var ae = v.charAt(v.length - 2) + v.charAt(v.length - 1);
e.target.value = a + '/' + ae;
}
}
}
I have a text box and only want to accept numbers and a period "." when using VueJS. Can anyone help with code? I'm new to Vue.
You can write a Vue method and that method can be called on the keypress event. Check out this fiddle.
Update:
adding source code:
HTML
<div id="demo">
<input v-model="message" #keypress="isNumber($event)">
</div>
Vue.js
var data = {
message: 1234.34
}
var demo = new Vue({
el: '#demo',
data: data,
methods: {
isNumber: function(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();;
} else {
return true;
}
}
}
});
You should change your input to type="number" to more accurately reflect your behaviour. You can then use the built-in Vue.js directive v-model.number.
Usage:
<input type="number" v-model.number="data.myNumberData"/>
This was my solution. Most of the answers here have been deprecated. Additionally, input values always return a string, even if you key a number. So because of that, some of the solutions here did not work for me.
In my case I didn't want a decimal point, but I added that into the array for the purpose of this thread.
<b-form-input v-model.number="quantity" #keypress="isNumber($event)" type="number"></b-form-input>
isNumber (evt: KeyboardEvent): void {
const keysAllowed: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];
const keyPressed: string = evt.key;
if (!keysAllowed.includes(keyPressed)) {
evt.preventDefault()
}
}
Short and easy understand.
HTML
<input #keypress="onlyNumber" type="text">
VUE JS
onlyNumber ($event) {
//console.log($event.keyCode); //keyCodes value
let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) { // 46 is dot
$event.preventDefault();
}
}
A simple way to do this in one line:
IsNumber(event) {
if (!/\d/.test(event.key) && event.key !== '.') return event.preventDefault();
}
Here is a better way to handle the specific question asked (numbers and "dots" only) by setting v-restrict.number.decimal using the following directive. It also had some bonus code to support alpha only or alphanumeric. You could also only allow "dots" although I do not know why you would. It will not allow extra characters to "sneak through" if typing fast. It also supports copy/paste, delete, and some other keys users would expect to still work from an input:
Vue.directive('restrict', {
bind (el, binding) {
el.addEventListener('keydown', (e) => {
// delete, backpsace, tab, escape, enter,
let special = [46, 8, 9, 27, 13]
if (binding.modifiers['decimal']) {
// decimal(numpad), period
special.push(110, 190)
}
// special from above
if (special.indexOf(e.keyCode) !== -1 ||
// Ctrl+A
(e.keyCode === 65 && e.ctrlKey === true) ||
// Ctrl+C
(e.keyCode === 67 && e.ctrlKey === true) ||
// Ctrl+X
(e.keyCode === 88 && e.ctrlKey === true) ||
// home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
return // allow
}
if ((binding.modifiers['alpha']) &&
// a-z/A-Z
(e.keyCode >= 65 && e.keyCode <= 90)) {
return // allow
}
if ((binding.modifiers['number']) &&
// number keys without shift
((!e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) ||
// numpad number keys
(e.keyCode >= 96 && e.keyCode <= 105))) {
return // allow
}
// otherwise stop the keystroke
e.preventDefault() // prevent
}) // end addEventListener
} // end bind
}) // end directive
To use:
<!-- number and decimal -->
<input
v-model="test"
v-ep-restrict.number.decimal
...
/>
<!-- alphanumeric (no decimal) -->
<input
v-model="test2"
v-ep-restrict.alpha.number
...
/>
<!-- alpha only -->
<input
v-model="test3"
v-ep-restrict.alpha
...
/>
This can be modified to serve as a base for just about any scenario and a good list of key codes is here
I solved issue like yours via vue.js filters. First i created filter - let's say in filters.js file
export const JustDigits = () => {
Vue.directive('digitsonly', (el, binding) => {
if (/[\d\.]+/i.test(el.value)) {
console.log('ok');
} else {
let newValue = el.value.replace(/[a-zA-Z]+/ig, '');
el.value = newValue;
console.log('should fix', newValue);
binding.value = el.value;
}
});
};
Then in the component where this functionality is required i did:
import {
JustDigits
} from './filters';
JustDigits();
And then you are able to use this directive in template:
<input v-model="myModel"
v-digitsonly
type="text"
maxlength="4" class="form-control" id="myModel" name="my_model" />
Please note, that my regex may differ from what you need, feel free to modify it as well as this code line let newValue = el.value.replace(/[a-zA-Z]+/ig, ''); that removes characters from the string. I posted it just to show you one of the possible solutions vue.js provides to solve task like this.
Building on previous solutions, to prevent multiple decimal positions, also pass the v-model to the function:
<input v-model="message" v-on:keypress="isNumber($event, message)">
and modify the isNumber method as follows:
isNumber(event, message) {
if (!/\d/.test(event.key) &&
(event.key !== "." || /\./.test(message))
)
return event.preventDefault();
}
To limit the number of digits after the decimal add the following line into the isNumber method:
if (/\.\d{2}/.test(message)) return event.preventDefault();
The \d{2} limits the entry of two digits. Change this to \d{1} to limit to one.
As stated in other answers, this does not prevent the pasting of non-numeric data.
I needed my input to allow only digits, so no e symbol, plus, minus nor .. Vue seems funky and doesn't re-trigger #onkeypress for symbols like dot.
Here is my solution to this problem:
<input
onkeypress="return event.key === 'Enter'
|| (Number(event.key) >= 0
&& Number(event.key) <= 9"
type="number"
>
I am taking digits only, limiting from 0 to 9, but also I do want enable form submit on Enter, which would be excluded with the above approach - thus the enter.
You can handle this via simple html
<input type="number">
and in your app.css
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* this is for Firefox */
input[type=number] {
-moz-appearance: textfield;
}
Style code will remove ugly arrows from your number input field and yes it accepts dots
#Kalimah answer didn't work for me, but I liked the idea of using regex.
In my case I needed to filter out any non-digit character, including dots.
The below code worked for me, Vue 2.6.
<input type="text" v-model="variable" #input="cleanVariable" />
methods: {
cleanVariable(event) {
this.variable = event.target.value.replace(/[^0-9]/g, "");
}
<v-text-field class='reqField' label="NUMBER" #keypress="isNumber($event)"></v-text-field>
methods: {
isNumber: function(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57) && (charCode != 9)) {
evt.preventDefault();
} else {
return true;
}
`enter code here`
},
}
Why not using an external mask lib like vue-the-mask or cleave.js?
For example, with vue-the-mask you can easily use theirs directive like this:
<input type="text" name="some-name" id="some-id" v-model="some.value" v-mask="'##.##.##.##.###'">
You can use this library https://www.npmjs.com/package/vue-input-only-number
import onlyInt, { onlyFloat } from 'vue-input-only-number';
Vue.use(onlyInt);
Vue.use(onlyFloat);
<input type="text" v-int>
<input type="text" v-float>
Just evaluate if is nan and now you can prevent default
<input #keypress="isNumber">
isNumber (val) {
if (isNaN(Number(val.key))) {
return val.preventDefault();
}
}
I cannot the perfect solution as some work for input but not for copy&paste, some are the other way around. This solution works for me. It prevents negative numbers, typing "e", copy&paste "e" text.
I use mixin so I can be reused anywhere.
const numberOnlyMixin = {
directives: {
numericOnly: {
bind(el, binding, vnode) {
// console.log(el, binding);
// this two prevent from copy&paste non-number text, including "e".
// need to have both together to take effect.
el.type = 'number';
el.addEventListener('input', (e) => {
// console.log('input', e);
// console.log(el.validity);
return el.validity.valid || (el.value = '');
});
// this prevents from typing non-number text, including "e".
el.addEventListener('keypress', (e) => {
let charCode = (e.which) ? e.which : e.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
e.preventDefault();
} else {
return true;
}
});
}
}
},
};
export {numberOnlyMixin}
In your component, add to your input.
<input v-model="myData" v-numericOnly />
There is input event which is more powerful/flexible than keypress, keydown or change that reacts on any type of change: program or user type such as key presses or paste events.
// Initial input state
let prevValue = ''
let prevSelectionStart = 0
function allowNumbersOnly(event) {
const input = event.target
let value = event.target.value
// Check if value is number
let isValid = +value == +value
if (isValid) {
// preserve input state
prevValue = value
prevSelectionStart = input.selectionStart
} else {
// restore previous valid input state.
// we have to fire one more Input event in order to reset cursor position.
var resetEvent = new InputEvent('input')
input.value = prevValue
input.selectionStart = prevSelectionStart
input.selectionEnd = prevSelectionStart
input.dispatchEvent(resetEvent)
}
}
<input type="text" oninput="allowNumbersOnly(event)">
The problem with type="number" and min="1" is that it allows typing or pasting the - sign, the e sign and the + sign.
The problem with the Math.abs(value) is that it replaces the whole typed in number with 0, which we don't want and is very frustrating.
The e.keyCode is very unreadable and deprecated.
The pure HTML method doesn't work in this case, you have to use JavaScript.
Remove the type="number" and do this:
function inputNumberAbs() {
var input = document.getElementsByTagName("input")[0];
var val = input.value;
val = val.replace(/^0+|[^\d.]/g, '');
input.value = val;
}
<input oninput="inputNumberAbs()">
Regex explanation:
^0+ removes all 0s from beginning
| OR operator
[^\d]. remove everything that is ^(NOT) a \d(NUMBER) or a
.(PERIOD)
This prevents the user to type or paste any of the not defined characters, like e, -, +, and all other characters that are not numbers.
If you don't need decimal numbers just remove . from regex.
You can use the number type in it:
<input type="number" class="yourCssClass" placeholder="someText" id="someId" />
and then, add the CSS required to remove the up/down spinners:
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
Where could I find some JavaScript code to parse CSV data?
You can use the CSVToArray() function mentioned in this blog entry.
<script type="text/javascript">
// ref: http://stackoverflow.com/a/1293163/2343
// This will parse a delimited string into an array of
// arrays. The default delimiter is the comma, but this
// can be overriden in the second argument.
function CSVToArray( strData, strDelimiter ){
// Check to see if the delimiter is defined. If not,
// then default to comma.
strDelimiter = (strDelimiter || ",");
// Create a regular expression to parse the CSV values.
var objPattern = new RegExp(
(
// Delimiters.
"(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
// Quoted fields.
"(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
// Standard fields.
"([^\"\\" + strDelimiter + "\\r\\n]*))"
),
"gi"
);
// Create an array to hold our data. Give the array
// a default empty first row.
var arrData = [[]];
// Create an array to hold our individual pattern
// matching groups.
var arrMatches = null;
// Keep looping over the regular expression matches
// until we can no longer find a match.
while (arrMatches = objPattern.exec( strData )){
// Get the delimiter that was found.
var strMatchedDelimiter = arrMatches[ 1 ];
// Check to see if the given delimiter has a length
// (is not the start of string) and if it matches
// field delimiter. If id does not, then we know
// that this delimiter is a row delimiter.
if (
strMatchedDelimiter.length &&
strMatchedDelimiter !== strDelimiter
){
// Since we have reached a new row of data,
// add an empty row to our data array.
arrData.push( [] );
}
var strMatchedValue;
// Now that we have our delimiter out of the way,
// let's check to see which kind of value we
// captured (quoted or unquoted).
if (arrMatches[ 2 ]){
// We found a quoted value. When we capture
// this value, unescape any double quotes.
strMatchedValue = arrMatches[ 2 ].replace(
new RegExp( "\"\"", "g" ),
"\""
);
} else {
// We found a non-quoted value.
strMatchedValue = arrMatches[ 3 ];
}
// Now that we have our value string, let's add
// it to the data array.
arrData[ arrData.length - 1 ].push( strMatchedValue );
}
// Return the parsed data.
return( arrData );
}
</script>
jQuery-CSV
It's a jQuery plugin designed to work as an end-to-end solution for parsing CSV into JavaScript data. It handles every single edge case presented in RFC 4180, as well as some that pop up for Excel/Google spreadsheet exports (i.e., mostly involving null values) that the specification is missing.
Example:
track,artist,album,year
Dangerous,'Busta Rhymes','When Disaster Strikes',1997
// Calling this
music = $.csv.toArrays(csv)
// Outputs...
[
["track", "artist", "album", "year"],
["Dangerous", "Busta Rhymes", "When Disaster Strikes", "1997"]
]
console.log(music[1][2]) // Outputs: 'When Disaster Strikes'
Update:
Oh yeah, I should also probably mention that it's completely configurable.
music = $.csv.toArrays(csv, {
delimiter: "'", // Sets a custom value delimiter character
separator: ';', // Sets a custom field separator character
});
Update 2:
It now works with jQuery on Node.js too. So you have the option of doing either client-side or server-side parsing with the same library.
Update 3:
Since the Google Code shutdown, jquery-csv has been migrated to GitHub.
Disclaimer: I am also the author of jQuery-CSV.
Here's an extremely simple CSV parser that handles quoted fields with commas, new lines, and escaped double quotation marks. There's no splitting or regular expression. It scans the input string 1-2 characters at a time and builds an array.
Test it at http://jsfiddle.net/vHKYH/.
function parseCSV(str) {
var arr = [];
var quote = false; // 'true' means we're inside a quoted field
// Iterate over each character, keep track of current row and column (of the returned array)
for (var row = 0, col = 0, c = 0; c < str.length; c++) {
var cc = str[c], nc = str[c+1]; // Current character, next character
arr[row] = arr[row] || []; // Create a new row if necessary
arr[row][col] = arr[row][col] || ''; // Create a new column (start with empty string) if necessary
// If the current character is a quotation mark, and we're inside a
// quoted field, and the next character is also a quotation mark,
// add a quotation mark to the current column and skip the next character
if (cc == '"' && quote && nc == '"') { arr[row][col] += cc; ++c; continue; }
// If it's just one quotation mark, begin/end quoted field
if (cc == '"') { quote = !quote; continue; }
// If it's a comma and we're not in a quoted field, move on to the next column
if (cc == ',' && !quote) { ++col; continue; }
// If it's a newline (CRLF) and we're not in a quoted field, skip the next character
// and move on to the next row and move to column 0 of that new row
if (cc == '\r' && nc == '\n' && !quote) { ++row; col = 0; ++c; continue; }
// If it's a newline (LF or CR) and we're not in a quoted field,
// move on to the next row and move to column 0 of that new row
if (cc == '\n' && !quote) { ++row; col = 0; continue; }
if (cc == '\r' && !quote) { ++row; col = 0; continue; }
// Otherwise, append the current character to the current column
arr[row][col] += cc;
}
return arr;
}
I have an implementation as part of a spreadsheet project.
This code is not yet tested thoroughly, but anyone is welcome to use it.
As some of the answers noted though, your implementation can be much simpler if you actually have DSV or TSV file, as they disallow the use of the record and field separators in the values. CSV, on the other hand, can actually have commas and newlines inside a field, which breaks most regular expression and split-based approaches.
var CSV = {
parse: function(csv, reviver) {
reviver = reviver || function(r, c, v) { return v; };
var chars = csv.split(''), c = 0, cc = chars.length, start, end, table = [], row;
while (c < cc) {
table.push(row = []);
while (c < cc && '\r' !== chars[c] && '\n' !== chars[c]) {
start = end = c;
if ('"' === chars[c]){
start = end = ++c;
while (c < cc) {
if ('"' === chars[c]) {
if ('"' !== chars[c+1]) {
break;
}
else {
chars[++c] = ''; // unescape ""
}
}
end = ++c;
}
if ('"' === chars[c]) {
++c;
}
while (c < cc && '\r' !== chars[c] && '\n' !== chars[c] && ',' !== chars[c]) {
++c;
}
} else {
while (c < cc && '\r' !== chars[c] && '\n' !== chars[c] && ',' !== chars[c]) {
end = ++c;
}
}
row.push(reviver(table.length-1, row.length, chars.slice(start, end).join('')));
if (',' === chars[c]) {
++c;
}
}
if ('\r' === chars[c]) {
++c;
}
if ('\n' === chars[c]) {
++c;
}
}
return table;
},
stringify: function(table, replacer) {
replacer = replacer || function(r, c, v) { return v; };
var csv = '', c, cc, r, rr = table.length, cell;
for (r = 0; r < rr; ++r) {
if (r) {
csv += '\r\n';
}
for (c = 0, cc = table[r].length; c < cc; ++c) {
if (c) {
csv += ',';
}
cell = replacer(r, c, table[r][c]);
if (/[,\r\n"]/.test(cell)) {
cell = '"' + cell.replace(/"/g, '""') + '"';
}
csv += (cell || 0 === cell) ? cell : '';
}
}
return csv;
}
};
csvToArray v1.3
A compact (645 bytes), but compliant function to convert a CSV string into a 2D array, conforming to the RFC4180 standard.
https://code.google.com/archive/p/csv-to-array/downloads
Common Usage: jQuery
$.ajax({
url: "test.csv",
dataType: 'text',
cache: false
}).done(function(csvAsString){
csvAsArray=csvAsString.csvToArray();
});
Common usage: JavaScript
csvAsArray = csvAsString.csvToArray();
Override field separator
csvAsArray = csvAsString.csvToArray("|");
Override record separator
csvAsArray = csvAsString.csvToArray("", "#");
Override Skip Header
csvAsArray = csvAsString.csvToArray("", "", 1);
Override all
csvAsArray = csvAsString.csvToArray("|", "#", 1);
Here's my PEG(.js) grammar that seems to do ok at RFC 4180 (i.e. it handles the examples at http://en.wikipedia.org/wiki/Comma-separated_values):
start
= [\n\r]* first:line rest:([\n\r]+ data:line { return data; })* [\n\r]* { rest.unshift(first); return rest; }
line
= first:field rest:("," text:field { return text; })*
& { return !!first || rest.length; } // ignore blank lines
{ rest.unshift(first); return rest; }
field
= '"' text:char* '"' { return text.join(''); }
/ text:[^\n\r,]* { return text.join(''); }
char
= '"' '"' { return '"'; }
/ [^"]
Try it out at http://jsfiddle.net/knvzk/10 or http://pegjs.majda.cz/online. Download the generated parser at https://gist.github.com/3362830.
Here's another solution. This uses:
a coarse global regular expression for splitting the CSV string (which includes surrounding quotes and trailing commas)
fine-grained regular expression for cleaning up the surrounding quotes and trailing commas
also, has type correction differentiating strings, numbers, boolean values and null values
For the following input string:
"This is\, a value",Hello,4,-123,3.1415,'This is also\, possible',true,
The code outputs:
[
"This is, a value",
"Hello",
4,
-123,
3.1415,
"This is also, possible",
true,
null
]
Here's my implementation of parseCSVLine() in a runnable code snippet:
function parseCSVLine(text) {
return text.match( /\s*(\"[^"]*\"|'[^']*'|[^,]*)\s*(,|$)/g ).map( function (text) {
let m;
if (m = text.match(/^\s*,?$/)) return null; // null value
if (m = text.match(/^\s*\"([^"]*)\"\s*,?$/)) return m[1]; // Double Quoted Text
if (m = text.match(/^\s*'([^']*)'\s*,?$/)) return m[1]; // Single Quoted Text
if (m = text.match(/^\s*(true|false)\s*,?$/)) return m[1] === "true"; // Boolean
if (m = text.match(/^\s*((?:\+|\-)?\d+)\s*,?$/)) return parseInt(m[1]); // Integer Number
if (m = text.match(/^\s*((?:\+|\-)?\d*\.\d*)\s*,?$/)) return parseFloat(m[1]); // Floating Number
if (m = text.match(/^\s*(.*?)\s*,?$/)) return m[1]; // Unquoted Text
return text;
} );
}
let data = `"This is\, a value",Hello,4,-123,3.1415,'This is also\, possible',true,`;
let obj = parseCSVLine(data);
console.log( JSON.stringify( obj, undefined, 2 ) );
Here's my simple vanilla JavaScript code:
let a = 'one,two,"three, but with a comma",four,"five, with ""quotes"" in it.."'
console.log(splitQuotes(a))
function splitQuotes(line) {
if(line.indexOf('"') < 0)
return line.split(',')
let result = [], cell = '', quote = false;
for(let i = 0; i < line.length; i++) {
char = line[i]
if(char == '"' && line[i+1] == '"') {
cell += char
i++
} else if(char == '"') {
quote = !quote;
} else if(!quote && char == ',') {
result.push(cell)
cell = ''
} else {
cell += char
}
if ( i == line.length-1 && cell) {
result.push(cell)
}
}
return result
}
I'm not sure why I couldn't get Kirtan's example to work for me. It seemed to be failing on empty fields or maybe fields with trailing commas...
This one seems to handle both.
I did not write the parser code, just a wrapper around the parser function to make this work for a file. See attribution.
var Strings = {
/**
* Wrapped CSV line parser
* #param s String delimited CSV string
* #param sep Separator override
* #attribution: http://www.greywyvern.com/?post=258 (comments closed on blog :( )
*/
parseCSV : function(s,sep) {
// http://stackoverflow.com/questions/1155678/javascript-string-newline-character
var universalNewline = /\r\n|\r|\n/g;
var a = s.split(universalNewline);
for(var i in a){
for (var f = a[i].split(sep = sep || ","), x = f.length - 1, tl; x >= 0; x--) {
if (f[x].replace(/"\s+$/, '"').charAt(f[x].length - 1) == '"') {
if ((tl = f[x].replace(/^\s+"/, '"')).length > 1 && tl.charAt(0) == '"') {
f[x] = f[x].replace(/^\s*"|"\s*$/g, '').replace(/""/g, '"');
} else if (x) {
f.splice(x - 1, 2, [f[x - 1], f[x]].join(sep));
} else f = f.shift().split(sep).concat(f);
} else f[x].replace(/""/g, '"');
} a[i] = f;
}
return a;
}
}
Regular expressions to the rescue! These few lines of code handle properly quoted fields with embedded commas, quotes, and newlines based on the RFC 4180 standard.
function parseCsv(data, fieldSep, newLine) {
fieldSep = fieldSep || ',';
newLine = newLine || '\n';
var nSep = '\x1D';
var qSep = '\x1E';
var cSep = '\x1F';
var nSepRe = new RegExp(nSep, 'g');
var qSepRe = new RegExp(qSep, 'g');
var cSepRe = new RegExp(cSep, 'g');
var fieldRe = new RegExp('(?<=(^|[' + fieldSep + '\\n]))"(|[\\s\\S]+?(?<![^"]"))"(?=($|[' + fieldSep + '\\n]))', 'g');
var grid = [];
data.replace(/\r/g, '').replace(/\n+$/, '').replace(fieldRe, function(match, p1, p2) {
return p2.replace(/\n/g, nSep).replace(/""/g, qSep).replace(/,/g, cSep);
}).split(/\n/).forEach(function(line) {
var row = line.split(fieldSep).map(function(cell) {
return cell.replace(nSepRe, newLine).replace(qSepRe, '"').replace(cSepRe, ',');
});
grid.push(row);
});
return grid;
}
const csv = 'A1,B1,C1\n"A ""2""","B, 2","C\n2"';
const separator = ','; // field separator, default: ','
const newline = ' <br /> '; // newline representation in case a field contains newlines, default: '\n'
var grid = parseCsv(csv, separator, newline);
// expected: [ [ 'A1', 'B1', 'C1' ], [ 'A "2"', 'B, 2', 'C <br /> 2' ] ]
You don't need a parser-generator such as lex/yacc. The regular expression handles RFC 4180 properly thanks to positive lookbehind, negative lookbehind, and positive lookahead.
Clone/download code at https://github.com/peterthoeny/parse-csv-js
Just throwing this out there.. I recently ran into the need to parse CSV columns with Javascript, and I opted for my own simple solution. It works for my needs, and may help someone else.
const csvString = '"Some text, some text",,"",true,false,"more text","more,text, more, text ",true';
const parseCSV = text => {
const lines = text.split('\n');
const output = [];
lines.forEach(line => {
line = line.trim();
if (line.length === 0) return;
const skipIndexes = {};
const columns = line.split(',');
output.push(columns.reduce((result, item, index) => {
if (skipIndexes[index]) return result;
if (item.startsWith('"') && !item.endsWith('"')) {
while (!columns[index + 1].endsWith('"')) {
index++;
item += `,${columns[index]}`;
skipIndexes[index] = true;
}
index++;
skipIndexes[index] = true;
item += `,${columns[index]}`;
}
result.push(item);
return result;
}, []));
});
return output;
};
console.log(parseCSV(csvString));
Personally I like to use deno std library since most modules are officially compatible with the browser
The problem is that the std is in typescript but official solution might happen in the future https://github.com/denoland/deno_std/issues/641 https://github.com/denoland/dotland/issues/1728
For now there is an actively maintained on the fly transpiler https://bundle.deno.dev/
so you can use it simply like this
<script type="module">
import { parse } from "https://bundle.deno.dev/https://deno.land/std#0.126.0/encoding/csv.ts"
console.log(await parse("a,b,c\n1,2,3"))
</script>
I have constructed this JavaScript script to parse a CSV in string to array object. I find it better to break down the whole CSV into lines, fields and process them accordingly. I think that it will make it easy for you to change the code to suit your need.
//
//
// CSV to object
//
//
const new_line_char = '\n';
const field_separator_char = ',';
function parse_csv(csv_str) {
var result = [];
let line_end_index_moved = false;
let line_start_index = 0;
let line_end_index = 0;
let csr_index = 0;
let cursor_val = csv_str[csr_index];
let found_new_line_char = get_new_line_char(csv_str);
let in_quote = false;
// Handle \r\n
if (found_new_line_char == '\r\n') {
csv_str = csv_str.split(found_new_line_char).join(new_line_char);
}
// Handle the last character is not \n
if (csv_str[csv_str.length - 1] !== new_line_char) {
csv_str += new_line_char;
}
while (csr_index < csv_str.length) {
if (cursor_val === '"') {
in_quote = !in_quote;
} else if (cursor_val === new_line_char) {
if (in_quote === false) {
if (line_end_index_moved && (line_start_index <= line_end_index)) {
result.push(parse_csv_line(csv_str.substring(line_start_index, line_end_index)));
line_start_index = csr_index + 1;
} // Else: just ignore line_end_index has not moved or line has not been sliced for parsing the line
} // Else: just ignore because we are in a quote
}
csr_index++;
cursor_val = csv_str[csr_index];
line_end_index = csr_index;
line_end_index_moved = true;
}
// Handle \r\n
if (found_new_line_char == '\r\n') {
let new_result = [];
let curr_row;
for (var i = 0; i < result.length; i++) {
curr_row = [];
for (var j = 0; j < result[i].length; j++) {
curr_row.push(result[i][j].split(new_line_char).join('\r\n'));
}
new_result.push(curr_row);
}
result = new_result;
}
return result;
}
function parse_csv_line(csv_line_str) {
var result = [];
//let field_end_index_moved = false;
let field_start_index = 0;
let field_end_index = 0;
let csr_index = 0;
let cursor_val = csv_line_str[csr_index];
let in_quote = false;
// Pretend that the last char is the separator_char to complete the loop
csv_line_str += field_separator_char;
while (csr_index < csv_line_str.length) {
if (cursor_val === '"') {
in_quote = !in_quote;
} else if (cursor_val === field_separator_char) {
if (in_quote === false) {
if (field_start_index <= field_end_index) {
result.push(parse_csv_field(csv_line_str.substring(field_start_index, field_end_index)));
field_start_index = csr_index + 1;
} // Else: just ignore field_end_index has not moved or field has not been sliced for parsing the field
} // Else: just ignore because we are in quote
}
csr_index++;
cursor_val = csv_line_str[csr_index];
field_end_index = csr_index;
field_end_index_moved = true;
}
return result;
}
function parse_csv_field(csv_field_str) {
with_quote = (csv_field_str[0] === '"');
if (with_quote) {
csv_field_str = csv_field_str.substring(1, csv_field_str.length - 1); // remove the start and end quotes
csv_field_str = csv_field_str.split('""').join('"'); // handle double quotes
}
return csv_field_str;
}
// Initial method: check the first newline character only
function get_new_line_char(csv_str) {
if (csv_str.indexOf('\r\n') > -1) {
return '\r\n';
} else {
return '\n'
}
}
Just use .split(','):
var str = "How are you doing today?";
var n = str.split(" ");