I am using Angular JS and I am doing the validation for UK postal code. Issue is there is a specific requirement that there should be an space in the the UK postal code which can be identified only by counting character from last.As there should be a space before third last character It should look like:

A12 3AD
A123 3AD
A2 2AD

For doing that I have 2 major issues:

1. How to manipulate input value to induce space.

2. How to actually change the string to add space

I am new to javascript/angular can someone tell me how to do that?

PS: I am not using jQuery in project.

I am using Angular JS and I am doing the validation for UK postal code. Issue is there is a specific requirement that there should be an space in the the UK postal code which can be identified only by counting character from last.As there should be a space before third last character It should look like:

A12 3AD
A123 3AD
A2 2AD

For doing that I have 2 major issues:

1. How to manipulate input value to induce space.

2. How to actually change the string to add space

I am new to javascript/angular can someone tell me how to do that?

PS: I am not using jQuery in project.

• javascript
• angularjs

• 1 Can you please share your code? – Rajesh Commented Dec 19, 2016 at 5:28

5 Answers 5

Use String#replace method and replace last 3 characters with leading space or assert the position using positive look-ahead assertion and replace with a white space.

string = string.replace(/.{3}$/,' $&');
// or using positive look ahead assertion
string = string.replace(/(?=.{3}$)/,' ');

console.log(
  'A123A123'.replace(/.{3}$/, ' $&'), '\n',
  'A13A123'.replace(/.{3}$/, ' $&'), '\n',
  'A1A123'.replace(/.{3}$/, ' $&'), '\n',
  'AA123'.replace(/.{3}$/, ' $&'), '\n',
  'A123'.replace(/.{3}$/, ' $&'), '\n',
  'A123'.replace(/(?=.{3}$)/, ' ')
)

Or you can use String#split and Array#join method with positive look-ahead assertion regex.

string = string.split(/(?=.{3}$)/).join(' ');

console.log(
  'A123A123'.split(/(?=.{3}$)/).join(' ')
)

You can use regex function to perform your action.

string = string.replace(/.{3}$/,' $&');

it specifies that : from last, space will be given to before 3rd last value

Instead of changing text of input, without providing notice of what required input is; provide notice to user what the requirement is for the field using title, placeholder, required attributes and :invalid pseudo class at css, with pattern attribute set to RegExp ^[A-Za-z0-9]{2,4}\s[A-Za-z0-9]{3}$.

input[type="text"] {
  width: 200px;
}

input:invalid {
  color:red;
  font-weight: bold;
}

<input type="text" 
       title="Input three alphanumeric characters, a space, followed by three alphanumeric characters. All other input is invalid."
       placeholder="Input valid UK postal code."
       pattern="^[A-Za-z0-9]{2,4}\s[A-Za-z0-9]{3}$"
       required/>

Hope this will be useful

Use splice method to break the string in two pieces. string.length-3 will give the last three characters where as string.slice(0, string.length-3) will return the first n-3 characters starting from beginning of the string.Use array.join method to join the pieces

function insertSpace(string){
var output = [string.slice(0, string.length-3),' ', string.slice(string.length-3)].join('');
return output
}
console.log(insertSpace('A1233AD'))

DEMO

You can also use substring function:

str.substring(0, str.length - 3) + " " + str.substring(str.length, str.length - 3)