Develop Reference

How to count the number of characters without "-" and "()"?

I have an input field for the phone numbers and field length counter. How can I ignore "-", spaces, and "()" in the field when I count its length?
I mean, if the input value looks like "(099) 99-99", its length when I call val().length should be 7, and not 11.
var phoneInput = getElementById("phone");
var counter = getElementById("lengthCounter");
counter.text(phoneInput.val().length);

By replacing all occurrences of that chars by empty string , then length of the output is what you are looking for.
const value = phoneInput.val();
value.replace(/[\-\(\)]/g, '').length // replace "-", "(", ")" by empty string
const phoneInput = document.querySelector('input');
const value = phoneInput.value;
console.log(
value.replace(/[\-\(\)]/g, '').length
)
<input value="(32)-(123)-(4444)" />

Try using regular expression.\D matches all the non-digit characters and the g is global modifier for regular expression.Replace all non-digits with empty string then count length of your string.
var string = "(099) 99-99";
console.log(string.replace(/\D/g,'').length);

This will replace anything that is NOT a number with an empty sting.
counter.text(phoneInput.val().replace(/[^\d]/g, '').length)

Replace none digit (\D) by "" and then count the length of new string.
var phoneNum = "(+84) 122 - 384 - 6471";
var count = phoneNum.replace(/\D/g, "").length;
alert(count);

Check this out! no need to write many lines of code.
function count() {
var x = document.getElementById("phonenumber");
var count = x.value.replace(/[^0-9]/g,"").length;
$("#displaycount").text("Number Count "+count);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter your Number: <input type="text" placeholder="example (99) 99-999" id="phonenumber" onkeyup="count()">
<br/><br/>
<div id="displaycount"></div>

Selecting all characters in string between nth number and nth number Regex

I am trying to use regex in a jQuery function to select and mask all characters in a string with an'x' except the first 4 and last 4 characters. The string can be any length. I can successfully mask the last 4 digits and first 4 digits separately but I don't really understand regex well enough to select the nth character in a string to the nth character and mask them. If anybody can help it would be very grateful - I have spent many hours trawling around forums and trying to write my own regex but to no avail.
Thanks
My current function looks like this:
<input type="text" class="read-only-mask" title="" value="1233434343434456789012" name="" id=""readonly />
<script>
$(document).ready(function() {
$('.read-only-mask').val(function(_,val) {
return val.replace(/.(?=.{4})/g, 'x');
});
});
</script>
This would show 1233434343434456789012 as xxxxxxxxxxxxxxxxxx9012
I need it to show as 1233xxxxxxxxxxxxxx9012 but the string could be any length so 123343434343 would need to show as 1233****4343 etc

you are far better off using a simpler approach. Save your self some time and headache and use the KISS method.
var maxMaskLength = 10;
var minMaskLength = 4;
$(document).ready(function() {
$('.read-only-mask').val(function(_, val) {
var valSplit = val.split("");
for (i = minMaskLength; i < maxMaskLength; i++)
valSplit[i] = 'x';
return valSplit.join("");
});
});

I would prefer to do it like this
var str = "1233434343434456789012",
res = Array.prototype.map.call(str, (e,i) => i > 4 && i < 9 ? "X" : e).join("");
console.log(res);
var str = "1233434343434456789012",
res = Array.prototype.map.call(str, (e,i,a) => i < a.length-4 ? "X" : e).join("");
console.log(res);
whichever best fits your application.

I would use this way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="read-only-mask" title="" value="1233434343434456789012" name="" id=""readonly />
<script>
$(document).ready(function() {
$('.read-only-mask').val(function(_, val) {
val = val.split("");
for (i = 4; i < val.length; i++)
val[i] = 'x';
return val.join("");
});
});
</script>
For the above input, it shows 1233xxxxxxxxxxxxxxxxxx. If that's what you need?

You really dont need regex for this, all you're doing is 3 substrings
string start to the mask start (1)
mask start to mask end (2)
mask end to string end. (3)
You then form the string back together by concatenating (1) above, the mask char to the length of (2) and finally (3).
var input = "1234567890";
var output = input.substring(0,4) + (Array(3).join('*')) + input.substring(6,10)
console.log(output)

You can use capturing parentheses:
"111122222333".replace( /(.{4})(.{5})(.*)/, '$1xxxxx$3');
1111 will be $1, replaced by itself.
22222 will be $2, replaced by xxxxx.
333 will be $3, replaced by itself.

get only number from value and calculate the length from text field

I HAVE A TEXT FIELD
<input id="prime-phone" class="number-format" name="prime-phone" placeholder="" type="tel">
and there if fix value and it would be "(432)432-2432".
I want to count the length of number only not the special character like "(" , "-"
I am trying in this way and i also know i am doing somthing wrong
sd = $(".number-format").val();
alert(sd);
sd = parseInt(sd)
alert(sd)
number format can be change like "(432)432-2432" , "(43)-(432)-2432"
Thanks
in advance for the help :)

var sd = $(".number-format").val();
//i want to count the length of number only not the special character like "(" , "-"
var len = sd.match(/\d/g).length;
try it

Use regex to match the digits and count:
sd.match(/\d/g).length

Remove non digit character using replace() and count
sd=$(".number-format").val();
alert(sd);
len=sd.replace(/\D/g,'').length;
// \D used to match all non-digit character
alert(len);
DEMO

A reusable solution.
once defined you could just call them to exclude the unwanted characters and get the length.i find this easier to maintain.
var tel = "(432)432-2432";
var getLength = function(tel){
var telStr = tel.split('');
var excpetionList = ['(',')','-']; //<-- here you can add the chars to remove
return telStr.filter(function(item,index,arr){
if(excpetionList.indexOf(item) < 0){
return item;
}
}).join('').length;
};
console.log(getLength(tel));
demo

mask output of the input field

is there any way to mask the output of the input field once passed to the next page
Enter Card : 123456789011
after the data has been passed onto the next page
when displayed it should look like this
Card info: ********9011
the first 8 digits was converted to asterisk and
the last 4 digits of the card is visible.

If you've already ensured that the card number is a valid length:
card = "123456789011";
output = "********" + card.substring(card.length-4);
is all you'll need. Output will now be as you wanted, and although Starx's answer is dynamic: it's also overkill.

Something like this
var card = "123456789011";
var str = "";
//Create the "*" for exactly 4 digits short
for(var i=1; i <= card.length-4; i++) {
str += "*";
}
//Join the asterisk and last 4 characters
ecard = str + card.substr(card.length-4);
console.log(ecard);
Demo

Parsing number from string

How do I split selected value, seperate the number from text in jQuery?
Example:
myselect contains c4
Just get only the number 4.
$('select#myselect').selectToUISlider({
sliderOptions: {
stop: function(e,ui) {
var currentValue = $('#myselect').val();
alert(currentValue);
var val = currentValue.split('--)
alert(val);
}
}
});

You can use regex to pull only the numbers.
var value = "c4";
alert ( value.match(/\d+/g) );
edit: changed regex to /\d+/g to match numbers greater than one digit (thanks #Joseph!)

1) if it's always : 1 letter that followed by numbers you can do simple substring:
'c4'.substring(1); // 4
'c45'.substring(1); // 45
2) you can also replace all non-numeric characters with regular expression:
'c45'.replace(/[^0-9]/g, ''); // 45
'abc123'.replace(/[^0-9]/g, ''); // 123

If you know that the prefix is always only one character long you could use this:
var val = currentValue.substr(1);