I am trying to format a number upon input, where you can only insert valid numbers. I have everything working except for the decimal. The input box allows me it insert as many decimals as I would like, but I would only like to allow for one (see the last replace()).

element.oninput = e => {
    let value = e.currentTarget.value;
    let result = value
        // Remove anything that isn't valid in a number
        .replace(/[^0-9-.]/g, '')
        // Remove all dashes unless it is the first character
        .replace(/(?!^)-/g, '')
        // Remove all periods unless it is the last one
        .replace(/(?!)\./g, '');
    element.value = result;
}

/

Here are some valid inputs:

123.123
-123.12
123
-123
.123
-.123

Here are some invalid inputs:

123-123
1-2-3
123.123.123
123-123..12

I am trying to format a number upon input, where you can only insert valid numbers. I have everything working except for the decimal. The input box allows me it insert as many decimals as I would like, but I would only like to allow for one (see the last replace()).

element.oninput = e => {
    let value = e.currentTarget.value;
    let result = value
        // Remove anything that isn't valid in a number
        .replace(/[^0-9-.]/g, '')
        // Remove all dashes unless it is the first character
        .replace(/(?!^)-/g, '')
        // Remove all periods unless it is the last one
        .replace(/(?!)\./g, '');
    element.value = result;
}

https://jsfiddle/c4f1L3kv/1/

Here are some valid inputs:

123.123
-123.12
123
-123
.123
-.123

Here are some invalid inputs:

123-123
1-2-3
123.123.123
123-123..12

• javascript
• regex

2 Answers 2

If you only want to match a period character if it is followed by another period character, then you can use a positive lookahead like in the expression below:

/\.(?=.*\.)/g

Explanation:

• \. - Match a literal . character
• (?= - Start of a positive lookahead
  • .*\. - Match zero or more characters until a literal . character.
• ) - Close of the positive lookahead

var element = document.querySelector('input');
element.addEventListener('input', (event) => {
  event.target.value = event.target.value
    // Remove anything that isn't valid in a number
    .replace(/[^\d-.]/g, '')
    // Remove all dashes unless it is the first character
    .replace(/(?!^)-/g, '')
    // Remove all periods unless it is the last one
    .replace(/\.(?=.*\.)/g, '');
});

<input type="text" />

Based on your ment below:

If you would like to prevent the user from adding a period character at the end of the string if a period character is already present, then you could use the expression /(\..*)\.$/ and replace the first capturing group with itself, which will effectively remove whatever wasn't in the capturing group (i.e., the last period character).

var element = document.querySelector('input');
element.addEventListener('input', (event) => {
  event.target.value = event.target.value
    // Remove anything that isn't valid in a number
    .replace(/[^\d-.]/g, '')
    // Remove all dashes unless it is the first character
    .replace(/(?!^)-/g, '')
    // Remove the last period if there is already one
    .replace(/(\..*)\.$/, '$1')
    // Remove all periods unless it is the last one
    .replace(/\.(?=.*\.)/g, '');
});

<input type="text" />

var element = document.querySelector('input');


element.oninput = e => {
    let value = e.currentTarget.value;
    let result = value
        .replace(/[^0-9-.]/g, '')
        .replace(/(?!^)-/g, '')
        // prevent inserting dots after the first one
        .replace(/([^.]*\.[^.]*)\./g, '$1');
    element.value = result;
}

<input/>