Add a space every 4 characters in input with a Pipe

Question

I have an input where a user needs to insert 24 characters. I tried to make a pipe with regExp to do this but no spaces are added.

Ive seen functions that could do this but I wanted to keep it simple with regExp.

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: 'formatBankAcc'
})

export class FormatBankAccPipe implements PipeTransform {
  transform(value: string) {
    if(value != null){
      value.replace(/[^\dA-Z]/g, '')
      .replace(/(.{4})/g, value)
      .trim();
      console.log(value);
    }
    return value;
  }
}

*"it's not working"* isn't a very helpful problem statement. What does it do instead? What investigation have you done? What debugging? — T.J. Crowder, May 08 '20 at 11:01
Beware that modifying an input when the user is typing in that input is **incredibly** difficult to do without frustrating the user and getting in their way. Rather than rolling your own, you might look for some kind of "masked input" solution that's already been developed and debugged (or just let the user type without modifying what they're typing, perhaps allowing spaces without requiring them). — T.J. Crowder, May 08 '20 at 11:02

score 0 · Accepted Answer · answered May 08 '20 at 11:12

0

The issue here is you are actually no adding any space in your regex. Instead, you are replacing the text again with same value. Also, you are not updating the value with replaced value. You are just returning the current value only like:

function transform(value) {
  if (value != null) {
    value.replace(/[^\dA-Z]/g, '')
      .replace(/(.{4})/g, value)
      .trim();
    console.log(value);
  }
  return value;
}

transform('123456789') //=> 123456789 ... returns same value

To fix this you need to:

Add a space after each matching group like:
```
.replace(/(.{4})/g, '$1 ')
```
$1 here represents the 1st capture group of the regular expression.

Then update the value with new replaced value like:

value = value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();

function transform(value) {
  if (value != null) {
    value = value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
    console.log(value);
  }
  return value;
}

transform('123456789')  
//=> 1234 5678 9 ... returns value w/ a space every 4 character

answered May 08 '20 at 11:12

palaѕн

72,112
17
116
136

Ive seen something similar to this. What is $1 ? The replace value? Like it save in that variable 4 char to add a space after? – Victor York May 08 '20 at 11:18
Yes, $1 here represents the 1st capture group of the regular expression. so, if we have value like '123456789', then $1 will mean "1234", "5678".. so we want to just add space after each of these groups. – palaѕн May 08 '20 at 11:22
Hi I jsut saw a problem with this. When I write inside the input for exaple 1234 5678 and I go and delete number 6, the focus goes back to the end instead of staying where the character which I deleted. Why is this? – Victor York May 14 '20 at 07:50
Please create a separate question for this so that there is a separation of concern and future users can get specific answers for a specific issue at a time while searching SO. I hope that makes sense. – palaѕн May 14 '20 at 08:19
Sure thing: https://stackoverflow.com/questions/61792503/angular-5-custom-input-pipe-loses-focus-when-deleting-charcter – Victor York May 14 '20 at 08:24

Add a space every 4 characters in input with a Pipe

1 Answers1