개요
HTML 입력 필드를 통해 사용자가 입력한 문자열을 받아, 자바스크립트로 해당 문자열 안에 두 개 이상 연속된 공백이 있는지 검사하는 프로그램을 작성해 보겠습니다.
연속된 공백이 발견되면, 해당 부분을 모두 하나의 공백으로 치환하는 것이 목표입니다.
이때 replace() 메서드의 첫 번째 인자로 정규 표현식 /\s{2}/g를 사용하면 간단하게 원하는 결과를 얻을 수 있습니다. 이 정규 표현식은 '공백 문자(\s)가 2번 이상({2}) 반복되는 패턴'을 의미하며, 마지막의 g 플래그는 문자열 전체에서 일치하는 모든 부분을 찾도록 지정합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>REMOVE SPACES</title>
</head>
<body>
<script>
function removeSpaces() {
var textInput = insertText.value;
var textInput = textInput.replace(/\s{2}/g, " ");
insertText.value = textInput;
}
</script>
<input type="text" id="insertText" value="containin extra space">
<button onclick="removeSpaces()">ok</button>
</body>
</html>코드 동작 원리
1. insertText.value로 입력 필드에 담긴 문자열을 가져옵니다.
2. replace(/\s{2}/g, " ")를 호출하여 연속된 공백을 하나의 공백으로 치환합니다.
3. 처리된 문자열을 다시 insertText.value에 할당해 화면에 반영합니다.
실행 결과
위 코드를 실행하면 아래와 같은 화면이 나타납니다.
OK 버튼을 클릭하면 연속된 공백이 하나의 공백으로 정리된 것을 확인할 수 있습니다.
