TypeScript

by Amy L

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

TypeScript

const SIN_MAX_DIGITS: number = 9;
function greeter(inputStr) {
  return applyPatternMask(inputStr, '111xxx111', 'x');
}

document.querySelector("#app").innerHTML = greeter('123456789');


function applyPatternMask(input: string, maskPattern: string, maskCharacter: string): string {
	console.log('>>>> START input:', input, 'maskPattern:', maskPattern, 'maskCharacter:', maskCharacter);
	const isNumberRegex: RegExp = /^\d+/;
	maskPattern = padToMaxDigits(maskPattern, maskCharacter);
	console.log('>>>> padded maskPattern:', maskPattern);
	let output: string = '';
	for (let i: number = 0; i < input.length; i++) {
  const maskPatternCheck: string = maskPattern[i];
  	const isNumber: boolean = isNumberRegex.test(maskPatternCheck);
    const inputChar: string = input[i];
		if (!isNumber) {
			output += maskCharacter;
		} else {
			output += inputChar;
		}
		console.log(isNumber, {maskPattern, inputChar, output});
	}
	console.log('>>>> OUTPUT:', output);
	return output;
}



function padToMaxDigits(input: string, maskCharacter: string): string {
	while (input.length < SIN_MAX_DIGITS) {
		input = maskCharacter + input;
	}
	return input;
}