Issue with Converting Full-Width Japanese Numeric Characters and Dots in JavaScript

Question

I'm facing an issue with converting full-width Japanese numeric characters and dots to their half-width in a JavaScript input handling function. The goal is to allow users to input numeric values with half-width characters and dots, and convert any full-width numeric value or dots to their half-width equivalents. However, there seems to be a problem in the conversion process.

Here is the js which currently used for conversion :

function checkNumber(field, event) {
    const inputValue = $(field).val();
    // Check if the input is a numeric character (English or Japanese)
    const isFullWidthNumeric = /^[\d０-９.]*$/g.test(inputValue);
    const isHalfWidthNumeric = /^[0-9.]*$/g.test(inputValue);

    // Allow the backspace key (keyCode 8) and delete key (keyCode 46)
    if (event.which !== 8 && event.which !== 46 && !(isFullWidthNumeric || isHalfWidthNumeric)) {
        event.preventDefault();
    }
}

function convertToHalfWidth(input) {
    // Define a mapping of full-width to half-width numeric characters
      const fullWidth = '０１２３４５６７８９．'; 
        const halfWidth = '0123456789.';

    // Use the replace function to perform the conversion
    let result = input;
    for (let i = 0; i < fullWidth.length; i++) {
        const regex = new RegExp(fullWidth[i], 'g');
        result = result.replace(regex, halfWidth[i]);
    }

    return result;
}

// Call this function in the on input event of your input field
document.querySelector("input").addEventListener("input", handleInput);
function handleInput(event) {
    const inputValue = event.target.value;
    console.log("Input Value:", inputValue);
    // Remove non-numeric characters
    const numericValue = inputValue.replace(/[^0-9０-９.]/g, '');
    console.log("Value Value:", numericValue);
    // Convert to half-width
    const convertedValue = convertToHalfWidth(numericValue);
    console.log("convertedValue Value:", convertedValue);
    // Update the input field value only if it has changed
    if (event.target.value !== convertedValue) {
        event.target.value = convertedValue;
    }
}

<input>

Input examples: 123４５６．７８９ should be converted to 123456.789. if anyone have idea please help. Thanks in advance.

Answer 1

The problem would be in your regex /[^0-9０-９.]/g which doesn't handle the FULLWIDTH FULL STOP ． character.

But you are making things a lot more complicated than necessary. For a few years now, String has a normalize method which allows you get the Unicode Normalization Form of the passed characters.

// Call this function in the on input event of your input field
document.querySelector("input").addEventListener("input", handleInput);
function handleInput(event) {
    const inputValue = event.target.value;
    const normalizedValue = inputValue.normalize("NFKC")
    // Now we get only simple characters, the regex is much simpler
    const convertedValue = normalizedValue.replace(/[^0-9.]/g, "");
    console.log("convertedValue Value:", convertedValue);
    // Update the input field value only if it has changed
    if (event.target.value !== convertedValue) {
        event.target.value = convertedValue;
    }
}

<input>

Note that I removed the checkNumber function because it wasn't used.