How to insert hypen exactly after 3 & 2 places after respectively in a string?-CodePudding

I am creating like a template which accepts user input and hide it with *. I just need to insert hyphens in between like a SSN number. I am almost done just the places are not proper.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue</title>
  </head>
  <body>
    <div id="app">
      <input type="text" @input="onInput" v-model="someData" maxlength="11" />
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
    <script>
      Vue.filter("uppercase", function (value) {
        const ssnValue = value.substr(0,3)   '-'   value.substr(3, 6)   '-'   value.substr(6);
        console.log('fil',ssnValue)
        return ssnValue.replace(/\d/g, '*')
      });
      const app = new Vue({
        el: "#app",
        data() {
          return {
            someData: "",
            maskedData: "",
          };
        },
        computed: {
          getMaskedData() {
            return this.maskedData;
          },
        },
        methods: {
          onInput(e) {
            let originalString = e.data
            if(!!originalString)
            this.maskedData  = originalString;
            console.log('mask', this.getMaskedData)
            this.someData = this.$options.filters.uppercase(e.target.value);
          },
        },
      });
    </script>
  </body>
</html>

I referred Insert hyphens in javascript and put dash after every n character during input from keyboard but i am unclear how can i implement those in my case.

When user is entering 123456789, I want like ***-**-****. (Please don't recommend using input type password or changing font family)

CodePudding user response：

If I understand you correctly try following snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue</title>
  </head>
  <body>
    <div id="app">
      <input type="text" @input="onInput" v-model="someData" maxlength="11" />
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
    <script>
      Vue.filter("uppercase", function (value) {
        let ssnValue =value
        if(value.length === 3 || value.length === 6) {
          ssnValue = value   '-'
        }
        console.log('fil',ssnValue)
        return ssnValue.replace(/\d/g, '*')
      });
      const app = new Vue({
        el: "#app",
        data() {
          return {
            someData: "",
            maskedData: "",
          };
        },
        computed: {
          getMaskedData() {
            return this.maskedData;
          },
        },
        methods: {
          onInput(e) {
            let originalString = e.data
            if(!!originalString)
            this.maskedData  = originalString;
            console.log('mask', e.data)
            if(e.data) this.someData = this.$options.filters.uppercase(e.target.value);
          },
        },
      });
    </script>
  </body>
</html>

CodePudding user response：

I saw one of the links that you put in your question there is a format function which you can use:

function format(input, format, sep) {
  input = input.replaceAll("-", "");
  var output = "";
  var idx = 0;
  for (var i = 0; i < format.length && idx < input.length; i  ) {
    output  = input.substr(idx, format[i]);
    if (idx   format[i] < input.length) output  = sep;
    idx  = format[i];
  }
  output  = input.substr(idx);
  return output;
}

Vue.filter("uppercase", function (value) {
  let ssnValue = format(value, [3, 3, value.length - 6], "-");
  console.log("fil", ssnValue);
  return ssnValue.replace(/\d/g, "*");
});