입력 마스크 알고리즘

입력 마스크란 무엇입니까?

Aninput mask은 사용자 입력을 제한하는 데 사용되는 템플릿입니다. 생성하는 데 사용할 수 있습니다.
사용자 유형으로 입력 형식을 지정하여 더 나은 양식 경험:

연산

필요한 정보는 다음과 같습니다.

input : 사용자의 입력

template : 사용자 입력을 원하는 형식입니다. (거의 targetChar 참조) 모든 문자는
전화 번호, 날짜 등을 나타내는 데 사용됩니다.

targetChar : template에서 사용자가 입력할 때 사용자 입력으로 대체할 문자

해결하기 위해 간단한 접근 방식을 사용합니다. input 및 template 문자열을 반복하여 교체합니다.targetChar 그들 중 하나가 먼저 끝날 때까지.

마스킹 함수를 만들어 봅시다:

function mask(input, template, targetChar) {
    const output = [] // final masked result
    let templateIndex = 0 // template pointer
    let inputIndex = 0 // input pointer
}

input 및 template에 대해 서로 다른 인덱스 포인터가 필요합니다.targetChar 위치는 임의적이므로 인덱스를 수동으로 정렬해야 합니다.
문자열을 반복하면서.

두 오프셋을 독립적으로 쉽게 조작할 수 있도록 오프셋을 추적하려고 합니다.
주어진 반복에서 문자를 바꾸지 않은 경우 오프셋을 증가시키고 싶지 않습니다.
마스크(mask[maskIndex] !== maskChar ).

우리의 접근 방식에 따르면 중지 조건은 둘 중 하나의 끝에 도달했을 때입니다.input 또는 template 문자열:

while(
    inputIndex <= input.length &&
    templateIndex <= template.length
) {
    // ...
}   

반복할 때마다 templateIndex의 문자가 다음과 같은지 확인합니다.targetChar는 template의 입력에 추가할지 여부를 결정합니다.
또는 input에서:

if (template[templateIndex] === targetChar) {
    output.push(input[inputIndex])
} else {
    output.push(template[templateIndex])
}

다음으로 인덱스를 정렬해야 합니다.

일반적으로 우리는 항상 가고 싶습니다.
반복의 끝에서 다음 문자, 그러나 우리는 원하지 않습니다
캐릭터를 사용하지 않으면 계속 이동합니다. 템플릿의 문자는 항상 출력에 추가됩니다(input는 기술적으로 template의 일부입니다)
, 그러나 입력 문자는 atargetChar에 도달할 때만 사용됩니다.

따라서 inputIndex를 찾은 경우에만 targetChar를 증가시킵니다.
반복할 때마다 증가templateIndex:

if (template[templateIndex] === targetChar) {
    output.push(input[inputIndex])
    inputIndex++ // increment input
} else {
    output.push(template[templateIndex])
}

templateIndex++ // increment template

마지막으로 출력을 문자열로 반환합니다.

return masked.join('')

마스크를 사용할 때 다음과 같은 두 가지 입력을 사용하는 것이 유용한 경우가 많습니다.

사용자에게 표시하기 위해 마스킹된 값을 사용하는 가시적인 것

사용자가 절대 볼 수 없는 원시 값을 보유하는 보이지 않는 항목

원시 값이 아닌 문자를 제거하여 원시 값을 검색할 수 있습니다targetChar.
템플릿에서:

// targetChar: '#', template: '###-###-####'
const rawInput = maskedInput.replaceAll('-', '')

전체 기능은 다음과 같습니다.

function mask(input, template, targetChar) { 
    input = input.replaceAll('-', '')

    const output = []
    let templateIndex = 0
    let inputIndex = 0

    while(inputIndex <= input.length && templateIndex <= template.length) {
        if (template[templateIndex] === targetChar) {
            output.push(input[inputIndex])
            inputIndex += 1
        } else {
            output.push(template[templateIndex])
        }

        templateIndex += 1
    }

    return masked.join('')
}

마무리 생각

이것이 얼마나 확장 가능한지 생각하는 것은 재미있습니다. polymorphic overload이 있을 수 있습니다.
동적 마스크를 제공하기 위해 함수를 템플릿으로 허용하거나 심지어
입력 미들웨어의 일종으로 훌륭합니다.
atomic 이후 다른 작업.

Firebase로 전화 로그인 구현에 대한 더 큰 기사를 작업하는 동안 이 문제에 부딪혔고
이 재미있는 작은 운동을 공유하겠다고 생각했습니다. 다른 글도 기대해주세요!

보너스: 이 복사+붙여넣기 코드를 배송했음을 증명하는 첫 번째 사람은 $5를 받습니다 👀