JavaScript에서 동일한 클래스를 가진 여러 요소의 공백 제거하는 방법

개요

동일한 클래스를 가진 여러 요소에서 텍스트 사이의 공백을 제거하고 싶다면, jQuery의 점(.) 선택자 표기법과 each() 메서드를 함께 사용하면 됩니다. 각 요소를 순회하면서 split(" ").join("") 방식으로 문자열 내 모든 공백을 손쉽게 제거할 수 있습니다.

예제 코드

다음은 전체 예제 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
    <p class="demo">Javascript Tutorial</p>
    <p class="demo">MySQL Tutorial</p>
    <p class="demo">MongoDB Tutorial</p>
</body>
<script>
    $(".demo").each(function (i, element) {
        $(element).html($(element).html().split(" ").join(""));
    });
</script>
</html>

위 프로그램을 실행하려면 파일 이름을 anyName.html(또는 index.html)로 저장한 후 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 이후 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 결과를 확인할 수 있습니다.

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

JavaScript에서 동일한 클래스를 가진 여러 요소의 공백 제거하는 방법

코드 설명

$(".demo")는 demo라는 동일한 클래스를 가진 모든 <p> 요소를 선택합니다. 이어서 each() 메서드가 각 요소를 하나씩 순회하며 콜백 함수를 실행합니다.

콜백 함수 내부의 $(element).html().split(" ").join("") 구문이 핵심입니다. 먼저 요소의 HTML 내용을 가져온 뒤, 공백( )을 기준으로 문자열을 분리(split)하고, 분리된 조각들을 공백 없이 다시 연결(join)하여 원래 위치에 덮어씁니다. 그 결과 "Javascript Tutorial"은 "JavascriptTutorial"처럼 모든 공백이 제거된 텍스트로 바뀌며, demo 클래스를 가진 세 개의 문단 모두에 동일하게 적용됩니다.