Preact

/** @jsx h */
import { h, Fragment } from "preact";
import { useState } from "preact/hooks";

const arabicToEnglish = (string) => {
  // removing non numeric characters
  const number = string.replace(/[^0-9Ù -Ù©.,]+/g, "");
  // replacing arabic numbers with english numbers
  return number.replace(/[\u0660-\u0669]/g, (digit) =>
    "٠١٢٣٤٥٦٧٨٩".indexOf(digit)
  );
};

export default function MyComponent(props) {
  const [number, setNumber] = useState(() => "");

  return (
    <Fragment>
      <label>This input changes arabic numbers to english numbers! </label>

      <br />

      <input
        value={number}
        onInput={(event) => setNumber(arabicToEnglish(event.target.value))}
        inputMode={props.inputMode ?? "numeric"}
      />
    </Fragment>
  );
}