JavaScript 공백 문자 처리 가이드

기본 공백 문자들:

' '     // 일반 스페이스 (U+0020)
'\t'    // 탭 문자 (U+0009)
'\n'    // 줄바꿈 (U+000A)
'\r'    // 캐리지 리턴 (U+000D)
'\f'    // 폼 피드 (U+000C)
'\v'    // 세로 탭 (U+000B)
'\u00A0' // 줄바꿈 방지 공백 (NBSP)
'\u3000' // 한자 공백 (전각 공백)

// 문자열이 공백인지 확인
function isWhitespace(str) {
  return /^\s*$/.test(str);
}

console.log(isWhitespace("   ")); // true
console.log(isWhitespace("\t\n")); // true
console.log(isWhitespace("a")); // false

// 공백 문자 개수 세기
function countSpaces(str) {
  return (str.match(/ /g) || []).length;
}

console.log(countSpaces("안녕 하세요 반갑습니다")); // 2

// 다양한 공백 문자 통계
function analyzeWhitespace(str) {
  return {
    spaces: (str.match(/ /g) || []).length,
    tabs: (str.match(/\t/g) || []).length,
    newlines: (str.match(/\n/g) || []).length,
    total: (str.match(/\s/g) || []).length
  };
}

const stats = analyzeWhitespace("안녕\t하세요\n반갑습니다 !");
console.log(stats); // {spaces: 1, tabs: 1, newlines: 1, total: 3}

// 종합적인 공백 정리 함수
function cleanWhitespace(str) {
  if (typeof str !== 'string') return '';
  
  return str
    .replace(/[\u00A0\u3000]/g, ' ')  // 특수 공백을 일반 공백으로
    .replace(/\s+/g, ' ')              // 연속 공백을 하나로
    .trim();                            // 양끝 공백 제거
}

// 사용 예시
const messy = "  안녕\u3000\u3000하세요   반갑습니다  ";
const clean = cleanWhitespace(messy);
console.log("'" + clean + "'"); // '안녕 하세요 반갑습니다'

// 배열의 모든 문자열 정리
function cleanStringArray(arr) {
  return arr
    .map(str => cleanWhitespace(str))
    .filter(str => str.length > 0);
}

const dirtyArray = ["  안녕  ", "", "\t하세요\n", "   "];
const cleanArray = cleanStringArray(dirtyArray);
console.log(cleanArray); // ['안녕', '하세요']

// 객체의 문자열 속성 정리
function cleanObjectStrings(obj) {
  const cleaned = {};
  for (const [key, value] of Object.entries(obj)) {
    if (typeof value === 'string') {
      cleaned[key] = cleanWhitespace(value);
    } else {
      cleaned[key] = value;
    }
  }
  return cleaned;
}

const dirtyObj = {
  name: "  홍길동  ",
  age: 25,
  address: "\t서울시\n  "
};
const cleanObj = cleanObjectStrings(dirtyObj);
console.log(cleanObj); // {name: '홍길동', age: 25, address: '서울시'}

// HTML 요소의 텍스트 내용 정리
function cleanElementText(element) {
  if (element && element.textContent) {
    element.textContent = cleanWhitespace(element.textContent);
  }
}

// 입력 필드 값 자동 정리
function setupAutoCleanInput(inputElement) {
  inputElement.addEventListener('blur', function() {
    this.value = cleanWhitespace(this.value);
  });
}

// 폼 데이터 제출 전 정리
function cleanFormData(formData) {
  const cleaned = new FormData();
  for (const [key, value] of formData.entries()) {
    if (typeof value === 'string') {
      cleaned.append(key, cleanWhitespace(value));
    } else {
      cleaned.append(key, value);
    }
  }
  return cleaned;
}

// 사용 예시
document.querySelectorAll('input[type="text"]').forEach(input => {
  setupAutoCleanInput(input);
});