JavaScript에서 HTML 태그 제거 및 문자열 자르기

웹 애플리케이션을 개발할 때 사용자 생성 콘텐츠를 표시하는 경우가 많습니다. 일관된 표시를 위해 이러한 HTML 태그를 제거하고 콘텐츠의 길이를 특정 길이로 자를 필요가 있습니다.

 

함수 개요

truncateDescription2 함수는 문자열 입력 description과 선택적 매개변수 maxLength(기본값 140)를 받습니다. 이 함수는 두 가지 주요 작업을 수행합니다:

1. HTML 태그 제거: 정규식을 사용하여 HTML 태그를 제거합니다.

2. 문자열 자르기: 길이가 maxLength를 초과하지 않도록 문자열을 자릅니다.

구현 세부사항

다음은 truncateDescription2 함수의 전체 코드입니다.

 

export const truncateDescription2 = (
  description: string,
  maxLength: number = 140,
): string => {
  // HTML 태그 제거
  const strippedDescription = description.replace(/<[^>]*>?/gm, "");
  // 길이 제한
  if (strippedDescription.length > maxLength) {
    return strippedDescription.substring(0, maxLength) + "...";
  }
  return strippedDescription;
};

 

코드 분석

1. HTML 태그 제거:

   • 정규식 /\<[^>]*>?/gm을 사용하여 모든 HTML 태그를 찾아 제거합니다.

   • <[^>]*>?:

     • <는 HTML 태그의 여는 꺾쇠 괄호를 매치합니다.

     • [^>]*는 닫는 꺾쇠 괄호 >를 제외한 모든 문자를 0회 이상 매치합니다.

     • >?는 닫는 꺾쇠 괄호 >를 선택적으로 매치합니다.

   • g 플래그는 정규식을 전역으로 만들어 문자열의 모든 일치를 찾습니다.

   • m 플래그는 문자열을 여러 줄로 취급합니다. 이 예제에서는 꼭 필요하지는 않습니다.

2. 문자열 자르기:

   • HTML 태그를 제거한 후 결과 문자열의 길이를 확인합니다.

   • 길이가 maxLength를 초과하면 문자열을 maxLength까지 자르고 생략 부호(...)를 추가합니다.

   • 문자열 길이가 제한 내에 있으면 그대로 반환합니다.

 

사용 예시 (이미지 결과값)