We Keep Coding

Phone number input mask in JS

I'm trying to figure out where the number 1 comes from (in the example below you write any phone number and press Backspace many times). Can you please tell me what is wrong in this code?
const input = document.querySelector('input[name="phone"]');
input.addEventListener('input', function () {
let x = input.value;
x = x.replace(/^\+1 /, '');
x = x.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
x = !x[2] ? x[1] : x[1] + ' ' + x[2] + (x[3] ? `-${x[3]}` : '') + (x[4] ? `-${x[4]}` : '');
x = x.startsWith('+1 ') ? x : '+1 ' + x;
input.value = x;
});
<input name="phone" placeholder="Phone number">

You need remove it on your code.
phone = phone.replace(/^\+1 /, '')
Also:
phone = phone.startsWith('+1 ') ? phone : '+1 ' + phone;

You had to replace the line:
x = x.replace(/^\+1 /, '');
to:
x = x.replace(/^\+1/, '');
(remove the space)

Autoformat input field

I have a javascript, which I supposed to format phone number to +1 (222) 555 22-22, but for some reason it stops to work just on first number.. Can you elaborate what's I'm doing wrong?
document.getElementById('phone').addEventListener('input', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = !x[3] ? x[1] : '+' + x[1] + '(' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '');
});
<input type="text" id="phone" placeholder="+1 (222) 444-5555"/>

Regex phone masking

I'm trying to write phone input masking function. Here it is:
let input = document.querySelector('input');
input.addEventListener('input', ()=>{
let x = event.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
event.target.value = !x[2] ? x[1] : '+' + x[1] + ' (' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '');
})
<input />
It works, but with one problem. When I press the backspace key, I erase the phone number to something like +1 (111). Such an entry is valid for the regular expression, and the string is replaced by itself

Per #ggorlen's suggestion in the comments, here is one way to do this:
let input = document.querySelector('input');
input.addEventListener('keydown', (event)=>{
if (event.key === "Backspace" || event.key === "Delete") return;
let x = event.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
event.target.value = !x[2] ? x[1] : '+' + x[1] + ' (' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '');
})
<input maxlength=18 />

Sort based on string "weight"

I searched on the internet for a sort algorithm which sorts the entries of a table in a "natural" way so 10 is after 1 and so on but I found not one solution which is "the perfect fit".
Now I am working on my own solution to do a sort algorithm. My question is now if it is efficient and applicable to create a number for each string in a table row based on the position of their letters in the abc and the position of this letter in the specific string and then sort by this created number?
Example:
abc would be a = 1; b = 2; c= 3 and then the "weight" for each letter should be higher with the string length:
a = 1 * 1(pos in str); b = 2 * 2; c = 3 * 3
so abc would be 14 as a number.
I don't want this to be a real natural sort.
I have used libraries and the built in Javascript function ".sort()" but they are not working for strings like 92593c17-5183-4db1-b4bd-d538abb4124bor ed06d686-8a04-4ae1-9500-975fb85a49d9 so it is not the right thing for me.
So is it a good way to sort strings by their letter-"weight"?

Have a look at this little example with localeCompate():
var s1 = '92593c17-5183-4db1-b4bd-d538abb4124';
var s2 = 'ed06d686-8a04-4ae1-9500-975fb85a49d9';
var s3 = '10';
var s4 = '1';
var s5 = 'a';
var s6 = 4;
$('#1').text(s1 + ' before ' + s2 + ': ' + (s1.toString().localeCompare(s2.toString()) == -1 ? 'yes' : 'no'));
$('#2').text(s2 + ' before ' + s3 + ': ' + (s2.toString().localeCompare(s3.toString()) == -1 ? 'yes' : 'no'));
$('#3').text(s3 + ' before ' + s4 + ': ' + (s3.toString().localeCompare(s4.toString()) == -1 ? 'yes' : 'no'));
$('#4').text(s4 + ' before ' + s5 + ': ' + (s4.toString().localeCompare(s5.toString()) == -1 ? 'yes' : 'no'));
$('#5').text(s5 + ' before ' + s6 + ': ' + (s5.toString().localeCompare(s6.toString()) == -1 ? 'yes' : 'no'));
$('#6').text(s6 + ' before ' + s1 + ': ' + (s6.toString().localeCompare(s1.toString()) == -1 ? 'yes' : 'no'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='1'></p>
<p id='2'></p>
<p id='3'></p>
<p id='4'></p>
<p id='5'></p>
<p id='6'></p>

How do i stop a button from time counter?

I have a button when clicked its starts the count right so now i want it to stop the count when clicked again. so i that ican be able to click any other button and that button must do exactly as the first one
any will be much appreciated.
This is how the button created
function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
return '\n<input '
+ (tbID ? ' id=\'' + tbID + '\'' : '')
+ (tbClass ? ' class=\'' + tbClass + '\'' : '')
+ (tbType ? ' type=\'' + tbType + '\'' : '')
+ (tbValue ? ' value=\'' + tbValue + '\'' : '')
+ (onClick ? ' onclick=\'toggle(this);' + onClick + '\'' : '')
+ '>';
}
function (i, item) {
newContent += createButtons("tb" + item.CommonCable, null, "submit", item.CommonCable, toggle);
});
The following code is counting the time when button clicked. and display it in an HTML page.
function toggle(ths) {
$(ths).toggleClass("btnColor");
$("#tb").toggleClass("btnColorR");
var clicked = $(ths).val();
$("#setCount").html(" DOWNTIME TYPE : " + clicked + " MINUTES : " + minutes + " SECONDS : " + count );
count = count + 1;
if (count % 60 == 0) {
minutes += 1;
count = 0;
}
timer = setTimeout("toggle()", 1000);
}

All you need to do is add an onClick handler to the stop button, with the following line inside:
timer = null;