Formatting currency in a form field by adding prefix ($) and suffix ("k")

Hey Folks,

I have a form on my website, where people can submit jobs. There are multiple fields, two of them are for the salary (one field is for the minimum salary, the other for maximum).

At the moment, I use a JS script that converts the user’s input in real-time into a currency format. The fields are plain text, not number fields. Also, the corresponding fields in my CMS collection are plain text as well.

By typing in “85000”, the script converts it automatically and in real-time into this: “$85,000” in the field. It adds the $ and the commas.

My problem
I’m trying to find a script that converts, for example, 85000 into this: “$85k”. So, instead of adding commas, it should convert 1000s into “k”.

However - and this part is tricky - it should not convert numbers that are below 1000. For example, in my form, I take also hourly or daily rates. When the user types in a daily rate of 750, then ideally that would convert into “$750”, and not $0,750k or similar.

Has anyone dealt with something similar? Are there any JS libraries suitable for this?

That’s the code I use. I found it somewhere on this forum. Unfortunately, I cannot find the original author. But credits got o him/her.


 * format salary up to 999 millions USD
 * using regex search pattern

document.addEventListener("DOMContentLoaded", event => {
  let salaryMax= document.getElementById("pay-max");
  // 🍋 on input keyup, run the formatting function
  salaryMax.addEventListener("keyup", event => {
    // format salary's input field every half a second
    setTimeout(() => {
    }, 100);
  }); // end event listener

  // 🍓 salary function declaration
  function formatSalary() {
    let typedValue = salaryMax.value;
    // if there is a value
    if (typedValue) {
      // replace all non-digits with "nothing"
      // using regex /\D/ with a "g" modifier (global or select all match)
      let cleanedValue = typedValue.replace(/\D/g, "");
      // if the value is smaller or equal to 3 digits
      if (cleanedValue.length <= 3) {
        console.log("value is smaller or equal to 3 digits");
        salaryMax.value = `$${cleanedValue}`;
      } else if (cleanedValue.length > 3 && cleanedValue.length <= 6) {
        console.log("value is higher than 3 and smaller or equal to 6 digits");
        let splitedValue = cleanedValue.split("");
        // inject a comma after the 3rd item from the end of the array
        splitedValue.splice(-3, 0, ",");
        let finalValue = splitedValue.join("");
        salaryMax.value = `$${finalValue}`;
      } else if (cleanedValue.length > 6 && cleanedValue.length <= 9) {
        console.log("value is higher than 6 and smaller or equal to 9 digits");
        let splitedValue = cleanedValue.split("");
        splitedValue.splice(-3, 0, ",");
        splitedValue.splice(-7, 0, ",");
        let finalValue = splitedValue.join("");
        salaryMax.value = `$${finalValue}`;
      } else if (cleanedValue.length > 9) {
        console.log("value is higher than 9 digits");
        salaryMax.value = `ok ok, stop right there 🤑`;
      } // end else if value formating
    } // end if value exists
  } // end formatSalary()
}); // DOMContentLoaded()

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @PiotrDk easiest way is to use slice

EDIT: I have updated code for function that deal with numbers less than 1000