I'm running the following code to set a limit on characters in a textarea:
(function($){
$.fn.extend({
limit: function(limit,element) {
var interval, f;
var self = $(this);
$(this).focus(function(){
interval = window.setInterval(substring,100);
});
$(this).blur(function(){
clearInterval(interval);
substring();
});
substringFunction = "function substring(){ var val = $(self).val();var length = val.length + carriages;if(length > limit){$(self).val($(self).val().substring(0,limit));}";
if(typeof element != 'undefined')
substringFunction += "if($(element).html() != limit-length){$(element).html((limit-length<=0)?'0':limit-length);}"
substringFunction += "}";
eval(substringFunction);
substring();
}
});
})(jQuery);
The area my users are entering text into can fit a maximum of 1500 characters. The problem is that it can only fit a maximum of 10 lines. If they enter 25 characters on one line before entering a carriage return, the characters total needs to be at 150, not 26.
How can I accomplish this?
var string = "foo\nbar\nbaz";
console.log(string);
// foo
// bar
// baz
var lines = string.split(/\n/).length;
Simply split the string by every new lines, and then see how many lines you have.
Another solution using regex that is always very efficient. Note that this solution counts retuen carriages, NOT lines
const string = "foo\nbar\nbaz";
const lines = (string.match(/\n/g) || []).length;
console.log(lines);
Related
I want to remove input data if it is not match with yyyy/mm/dd format ! I tried with following but only remove letter and special character ...
eg.
20144 -> must remove last 4
2014// -> must remove last /
2014/01/123 -> must remove last 3
$("input").on("keyup", function() {
console.log(this.value);
this.value = this.value.replace(/[^(\d{4})\/(\d{1,2})\/(\d{1,2})]/g, '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
The strategy is actually quite simple, once you actually break down the logic of what you want. So, you want to coerce user input into a YYYY/MM/DD format. We can do this in a step-by-step manner:
Split the input's value by the / character. You now get an array.
We keep the first three elements of the array, which should correspond to YYYY, MM, and DD respectively. We will ignore whatever fragments that come after, since they aren't part of the valid date. This can be done using .slice(0,3) on the array.
Parse each individual part of the array:
At index of 0, you have the year fragment. Use .substring(0,4) so that it is trimmed to 4 characters max
At index of 1 or 2, you have the month/day fragment respectively. Use .substring(0,2) so that it is trimmed to 2 characters max
Join the resulting array back using .join('/').
If the array contains empty elements, you will end up duplicated // in your string. Simply trim them away using regex, .replace(/\/(\/)+/, '/')
You will notice that in my logic I have not included padding numbers, e.g.
. converting days from 1 to 01. You cannot do this when the user is inputting, because you never know if the user intends to type one or two digits. If you want this, you will have to reparse the input onblur, because that is when you know the user is done with the input.
See proof-of-concept below:
$('input').on('keyup', function() {
var valueParts = this.value.split('/');
if (!valueParts.length) {
return;
}
// Only keep the first 3 elements of array
valueParts = valueParts.slice(0, 3);
// Substring array (keep first 4 characters for year, and first 2 characters for month/day)
var substringCounts = [4, 2, 2];
substringCounts.forEach(function(substringCount, index) {
// If index does not exist in array, skip it
if (!valueParts[index])
return;
valueParts[index] = valueParts[index].substring(0, substringCount);
});
// Join remaining elements
var parsedString = valueParts.join('/');
// Trim extraneous slashes
parsedString = parsedString.replace(/\/(\/)+/, '/');
this.value = parsedString;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
Note: if you want to pad the numbers, you will have to include the following logic, on top of what has been mentioned above:
// Pad numbers on blur
$('input').on('blur', function() {
var valueParts = this.value.split('/');
if (!valueParts.length) {
return;
}
// Only keep the first 3 elements of array
valueParts = valueParts.slice(0, 3);
// Pad lengths (year to 4 digits, month to 2 digits, day to 2 digits)
var padLengths = [4, 2, 2];
padLengths.forEach(function(padLength, index) {
// If index does not exist in array, skip it
if (!valueParts[index])
return;
valueParts[index] = valueParts[index].padStart(padLength, '0');
});
// Join remaining elements
var parsedString = valueParts.join('/');
// Trim extraneous slashes
parsedString = parsedString.replace(/\/(\/)+/, '/');
this.value = parsedString;
});
With that in mind, if you want to combine the above two logic together, you can abstract the part dealing with "joining remaining elements" and "trim extraneous slashes". I have hidden the code snippet below, since it's very verbose and mostly contains the same logic as mentioned above:
// Helper method: joins array using '/' and trims duplicated joining characters
function joinAndTrimSlashes(valueArray) {
// Join remaining elements
var parsedString = valueArray.join('/');
// Trim extraneous slashes
parsedString = parsedString.replace(/\/(\/)+/, '/');
return parsedString;
}
$('input').on('keyup', function() {
var valueParts = this.value.split('/');
if (!valueParts.length)
return;
// Only keep the first 3 elements of array
valueParts = valueParts.slice(0, 3);
// Substring array (keep first 4 characters for year, and first 2 characters for month/day)
var substringCounts = [4, 2, 2];
substringCounts.forEach(function(substringCount, index) {
// If index does not exist in array, skip it
if (!valueParts[index])
return;
valueParts[index] = valueParts[index].substring(0, substringCount);
});
this.value = joinAndTrimSlashes(valueParts);
});
// Pad numbers on blur
$('input').on('blur', function() {
var valueParts = this.value.split('/');
if (!valueParts.length)
return;
// Only keep the first 3 elements of array
valueParts = valueParts.slice(0, 3);
// Pad lengths (year to 4 digits, month to 2 digits, day to 2 digits)
var padLengths = [4, 2, 2];
padLengths.forEach(function(padLength, index) {
// If index does not exist in array, skip it
if (!valueParts[index])
return;
valueParts[index] = valueParts[index].padStart(padLength, '0');
});
this.value = joinAndTrimSlashes(valueParts);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
Since I do think that pure regex is going to be very bad at solving this you can just do a manual pass like e.g.
var good = '2013/01/01';
var bad1 = '20123/01/02';
var bad2 = '2011//01/03';
var bad3 = '2010/01/034';
var bad4 = '2009//01/045';
var bad5 = '20083//01/223';
var all = [ good, bad1, bad2, bad3, bad4, bad5 ];
function normalizeDate(dateString) {
var currentValue = dateString.replace(/\/{2,}/g,'/'); //remove repeated /
var parts = currentValue.split('/').map(function (value) {
return value.replace(/\D/g, '0');
});
var newParts = [
parts[0] ? parts[0].padEnd(4,'0').substring(0,4) : '2000' ,
parts[1] ? parts[1].padStart(2, '0').substring(0,2) : '01',
parts[2] ? parts[2].padStart(2, '0').substring(0,2) : '01'
];
return newParts.join('/');
}
for (var i = 0;i < all.length;i++) {
console.log(normalizeDate(all[i]));
}
$("input").on("keyup", function() {
var validationRegex = new RegExp(/([12]\d{3}\/(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01]))/);
if(!validationRegex.test(this.value)){
this.value = '';
}
});
This will match only the format YYYY/MM/DD.
Thank all for your answer! I reference your answers and I can figure out to solve my desire .
I believe there have much better solution so answer here if you guy have better one
var format = ["number","number","number","number","slash","number","number","slash","number","number"];
$("input").on("keyup", function() {
if(this.value.length > format.length) {
this.value = this.value.slice(0,format.length);
return;
}
for(var i in this.value) {
if(format[i] == "number") {
if(!this.value[i].match(/[0-9]/)) {
this.value = this.value.slice(0,i);
}
} else {
if(this.value[i] != "/") {
this.value = this.value.slice(0,i);
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
I'm trying to mask a portion of a string using JavaScript.
e.g. Mask second and third segment of credit-card number like this using regex:
4567 6365 7987 3783 → 4567 **** **** 3783
3457 732837 82372 → 3457 ****** 82372
I just want to keep the first 4 numbers and the last 5 characters.
This is my first attempt: /(?!^.*)[^a-zA-Z\s](?=.{5})/g
https://regex101.com/r/ZBi54c/2
You can try this:
var cardnumber = '4567 6365 7987 3783';
var first4 = cardnumber.substring(0, 4);
var last5 = cardnumber.substring(cardnumber.length - 5);
mask = cardnumber.substring(4, cardnumber.length - 5).replace(/\d/g,"*");
console.log(first4 + mask + last5);
You could slice the first four digits and apply a replacement for the rest.
console.log(
['4567 6365 7987 3783', '3457 732837 82372'].map(
s => s.slice(0, 4) + s.slice(4).replace(/\d(?=.* )/g, '*')
)
);
The answer apparently satisfies the OP. Here is another solution using only Regexes:
function starry(match, gr1, gr2, gr3) {
var stars = gr2.replace(/\d/g, '*');
return gr1 + " " + stars + " " + gr3;
}
function ccStarry(str) {
var rex = /(\d{4})\s(\d{4}\s\d{4}|\d{6})\s(\d{4}|\d{5})/;
if (rex.test(str))
return str.replace(rex, starry);
else return "";
}
var s1 = "4567 6365 7987 3783";
var s2 = "3457 732837 82372";
var s3 = "dfdfdf";
console.log(ccStarry(s1));
console.log(ccStarry(s2));
console.log(ccStarry(s3));
This ensures that the pattern matches before trying any replacements. For example, in the third test case, it returns an empty string. The pattern can be updated to match other credit card patterns besides the ones given in the question.
I would like to elaborate more on the answer from #Nina Scholz, I use .slice() in the following sample code for masking the variable in 2 condition.
Just a simple variable var n = '12345567890'
Array object
// Single number
var n = '601115558888';
var singleNumber = n.slice(0, 4) + n.slice(4, n.length -4).replace(/\d/g,'*') + n.slice(n.length -4);
console.log(singleNumber);
// array of object
var obj = [{
contacts_name: 'Jason',
contacts_num : '651231239991'
},
{
contacts_name: 'King',
contacts_num : '60101233321'
}];
// Mask for the middle number, showing the first4 number and last4 number
// and replace the rest number with *
var num = obj.map((element, index) =>
element.contacts_num.slice(0,4)
+ element.contacts_num.slice(4, element.contacts_num.length-4).replace(/\d/g, '*')
+ element.contacts_num.slice(element.contacts_num.length -4)
);
console.log(num);
If it's JavaScript doing the regex masking, you've already failed because JS should never need to know the original card number, except when you've just received it from the user and are sending it to the server for the first time, in which case you shouldn't be masking it anyway so the user can check for typos.
I can't really help you there, you've already failed in the worst way.
Server-side, if the number is already broken into spaces*, then one option is: (in PHP but the same idea applies to all)
$parts = explode(" ",$fullnumber);
$first = array_shift($parts);
$last = array_pop($parts);
$middle = implode(" ",$parts);
$mask = preg_replace("/\d/","*",$middle);
$result = "$first $mask $last";
* it shouldn't be
I have a text area that can take 10000 characters. i want to put the line breaker on each line of the text area value after 10 character
something like this i want to achive
11111111 1
111 111 11
11 11 11 1
all above line has 10 characters each.
var start = 3
var times = 1;
$('.mydesc').keyup(function () {
var len = $(this).val().length;
if (len == start) {
this.value += '\n';
times = ++times;
start= ((start * 2) + start);
}
});
but doesn't work ..
Simplest solution is to always re-add all of the new-lines:
$('.mydesc').keyup(function () {
this.value = this.value
.replace(/[\n\r]+/g, "")
.replace(/(.{10})/g, "$1\n");
});
http://jsfiddle.net/s4cUz/
Something like this would do it:
http://jsfiddle.net/Zxuj7/
$('#test_textarea').keyup(function () {
var new_stuff = $(this).val();
new_stuff = new_stuff.replace(/[\n\r]+/g,""); // clean out newlines, so we dont get dups!
var test = new_stuff.replace(/(.{10})/g,"$1\n");
$(this).val(test);
});
However, be aware that it doesn't work that well with the "deleting" of characters. If you give it a go, you will notice that when you actually delete a character and the code runs, it will put you at the end of the textarea again (because its "overwriting" the value)
UPDATE:
You may actually be better formatting AFTER they have finished editing the textarea - i.e using blur();
$('#test_textarea').blur(function () {
// leaving the field... so lets try and format nicely now
var new_stuff = $(this).val();
new_stuff = new_stuff.replace(/[\n\r]+/g,""); // clean out newlines, so we dont get dups!
new_stuff = new_stuff.replace(/(.{10})/g,"$1\n");
$(this).val(new_stuff);
});
Although that doesn't do it in real time - it does work better when deleting/editing the contents
Enhanced version of Andrew Newby's script:
$('#test_textarea').keyup(function (e) {
if (e.keyCode === 8) return; // Backspace
var new_stuff = $(this).val();
new_stuff = new_stuff.replace(/[\n\r]+/g,""); // clean out newlines, so we dont get dups!
new_stuff = new_stuff.replace(/(.{10})/g,"$1\n");
$(this).val(new_stuff);
});
This actually ignores backspace key, so at least that interaction is preserved.
I have a string which is a car number plate. But for display purposes I what to add a space after the fourth char in this string. The data comes from a data service so I have to do this on the front-end
eg. AF13BXP to this AF13 BXP
The code below doesn't seem to work:
var $regtext = $('#regNumber');
if ($regtext.length > 0)
{
var regtext = $regtext.text(),
newRegtext = regtext.replace(/[\n\s]/g, '');
console.log(newRegtext);
}
Simple and clear way to do this, without regex:
var $regtext = $('#regNumber');
if ($regtext.length > 0)
{
var regtext = $regtext.text(),
newRegtext = regtext.substr(0, 4) + " " + regtext.substr(4);
console.log(newRegtext);
}
It's also pretty fast too: runs 10,000 times in 351ms, faster than splitting and joining etc. Good if you'll be processing loads of data from the webservice.
You can use following jquery : Demo
$('.test').keyup(function() {
var foo = $(this).val().split(" ").join("");
if (foo.length > 0) {
foo = foo.match(new RegExp('.{1,4}', 'g')).join(" ");
}
$(this).val(foo);
});
If you want to use regex the following should do it.
newRegtext = regtext.replace(/^(.{4})/,'$1 ')
Try this code
$(document).ready(function(e) {
var $regtext = $('#regNumber');
var $regtext = $regtext.text();
if ($regtext.length > 0)
{
regCheck = /^([A-Z1-9a-z]{1,4})([A-Z1-9a-z]*)$/;
regtext = regCheck.test($regtext);
newRegtext = $regtext.replace(regCheck,"$1 $2");
alert(newRegtext);
}
});
I'm working on a form and I'd like to mask the input of the phone numbers. The plugins what I found aren't okay for me since the area code could be 1 or 2 character long.
What I'd like to do is the following:
when the user types his number after the first two character the script inserts a space on keyup, then after the next three and later after every fourth character.
So when someone types 44444444444 then in the textbox appears 44 44 444 4444.
I must check the second group as well, and when someone types there for example 1, the the number must look like: 44 1 444 4444
Is any solution to do that?
You could do something like this:
http://jsfiddle.net/ffwAA/4/
Which applies this function to the string to get the desired formatting:
function formatCode(str){
var result = str;
str = str.replace(/\D+/g, "");
var m = str.match(/^(\d\d)(?:([2-90]\d|1)(?:(\d\d\d)(\d+)?)?)?$/);
if(m){
result = m[1] + " ";
if(m[2]) result += m[2] + " ";
if(m[3]) result += m[3] + " ";
if(m[4]){
result += m[4].split(/(\d{4})/).join(" ");
result = result.replace(/\s+/g, " ");
}
}
return result;
}
And using this jQuery to set it up:
function update(obj){
var val = obj.value;
var got = formatCode(val);
if(got != val)
obj.value = got;
}
var timer;
var prev_val = "";
$('#code').keyup(function(){
clearTimeout(timer);
// when adding numbers at the end of input, update at once
// don't want to update when editing in the middle of the string or removing parts of it
// because it would move the carret location to the end of input, and make it unusable
if(this.value.indexOf(prev_val) == 0){
update(this);
prev_val = this.value;
return;
}
prev_val = this.value;
// in other cases update 1 second after the changes are done
timer = setTimeout(update, 1000, this);
});
Have you tried the maskedInput plugin?
http://digitalbush.com/projects/masked-input-plugin/
I think it can solve your problem.
Hope this helps. Cheers