put dash after every n character during input from keyboard

后端 未结 3 1214
一个人的身影
一个人的身影 2021-01-28 02:33
$(\'.creditCardText\').keyup(function() {
  var foo = $(this).val().split(\"-\").join(\"\"); // remove hyphens
  if (foo.length > 0) {
    foo = foo.match(new RegExp(         


        
相关标签:
3条回答
  • 2021-01-28 03:18

    In this case, it is more convenient to just write normal code to solve the problem:

    function format(input, format, sep) {
        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;
    }
    

    Sample usage:

    function format(input, format, sep) {
        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;
    }
    
    $('.creditCardText').keyup(function() {
        var foo = $(this).val().replace(/-/g, ""); // remove hyphens
        // You may want to remove all non-digits here
        // var foo = $(this).val().replace(/\D/g, "");
    
        if (foo.length > 0) {
            foo = format(foo, [3, 2, 4, 3, 3], "-");
        }
      
        
        $(this).val(foo);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <input class="creditCardText" />

    While it is possible to do partial matching and capturing with regex, the replacement has to be done with a replacement function. In the replacment function, we need to determine how many capturing group actually captures some text. Since there is no clean solution with regex, I write a more general function as shown above.

    0 讨论(0)
  • 2021-01-28 03:18

    Per further comments, the op clarified they need a fixed interval for when to insert dashes. In that case, there are several ways to implement it; I think regular expression would probably be the worst, in other words, overkill and overly complication solution.

    Some simpler options would be to create a new character array, and in a loop append character by character, adding a dash too every time you get to the index you want. This would probably be the easiest to write and grok after the fact, but a little more verbose.

    Or you could convert to a character array and use an 'insert into array at index'-type function like splice() (see Insert Item into Array at a Specific Index or Inserting string at position x of another string for some examples).

    0 讨论(0)
  • 2021-01-28 03:21

    You can split it using a regular expression. In this case, I'm using a expression to check for non-spaces with interval 3-2-4-3.

    The RegExp.exec will return with a "match" array, with the first element containing the actual string. After removing the first element of the match, you can then join them up with dashes.

    var mystring = "123121234123"
    var myRegexp = /^([^\s]{3})([^\s]{2})([^\s]{4})([^\s]{3})$/g
    var match = myRegexp.exec(mystring);
    if (match)
    {
        match.shift();
        mystring = match.join("-")
        console.log(mystring)
    }
    
    0 讨论(0)
提交回复
热议问题