jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

jQuery의 .text()는 선택한 모든 요소와 그 자손의 텍스트를 합쳐 문자열로 반환합니다. .text(value)는 선택한 각 요소의 내부를 해당 텍스트로 교체하며 HTML 태그로 해석하지 않습니다. 여러 요소의 글자를 따로 얻어야 한다면 전체 .text() 결과가 아니라 요소별로 읽어 배열로 모읍니다.

읽기 범위와 html·val 구분하기

.text() 공식 문서의 읽기 범위는 첫 요소만이 아니라 선택 집합 전체입니다. 태그 표기는 제외하지만 자손의 텍스트는 포함하며, 요소 사이에 구분 기호를 자동으로 추가하지 않습니다. 화면에서 보이는 모습만을 추출하는 기능으로 생각하지 않습니다.

.html()은 태그 구조를 다루며, .val()은 입력 컨트롤의 현재 값을 다룹니다. input의 현재 입력값을 .text()로 읽으려 하지 않습니다. .text()는 HTML 문서뿐 아니라 XML 문서의 텍스트에도 사용할 수 있습니다.

결합 결과와 요소별 결과를 비교하는 실습

전체 코드를 UTF-8의 text-demo.html로 저장하고 브라우저에서 엽니다. 공식 jQuery 파일 4.0.0을 CDN(Content Delivery Network, 콘텐츠 전송 네트워크)에서 읽을 인터넷 연결이 필요하며 별도 설치는 없습니다. 읽기·문자열 설정·함수형 접두어·비우기·초기화와 아래 콘솔 예제를 3.7.1과 4.0.0에서 실행했습니다.

첫 문단에는 Alpha와 hidden 속성으로 숨긴 Hidden이 있고, 두 번째 문단에는 Beta가 있습니다. 출력은 JSON.stringify()로 감싸 문자열의 경계와 빈 값을 분명히 보여 줍니다. perItem은 각 요소를 .map()으로 읽고 .get()으로 일반 배열로 바꾼 값입니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Read and replace text contents</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, input { font: inherit; margin: 4px; max-width: 100%; }
    .item { border: 2px solid teal; padding: 16px; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Plain text from multiple elements</h1>
  <label>Value <input id="value" value="&lt;em&gt;Hello&lt;/em&gt;"></label>
  <button type="button" id="set">Set text</button>
  <button type="button" id="prefix">Prefix each item</button>
  <button type="button" id="clear">Clear text</button>
  <button type="button" id="read">Read</button>
  <button type="button" id="reset">Reset</button>
  <div id="items"><p class="item"><strong>Alpha</strong><span hidden>Hidden</span></p><p class="item">Beta</p></div>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const $items = $("#items > .item");
      const initial = $items.get().map(node => node.innerHTML);
      function report() {
        const combined = $items.text();
        const perItem = $items.map(function () { return $(this).text(); }).get();
        $("#result").text(`combined=${JSON.stringify(combined)}\nper item=${JSON.stringify(perItem)}\nitems=${$items.length}`);
      }
      $("#set").on("click", function () { $items.text($("#value").val()); report(); });
      $("#prefix").on("click", function () {
        $items.text(function (index, oldText) { return (index + 1) + ". " + oldText; });
        report();
      });
      $("#clear").on("click", function () { $items.text(""); report(); });
      $("#read").on("click", report);
      $("#reset").on("click", function () {
        $items.html(function (index) { return initial[index]; });
        $("#value").val("<em>Hello</em>");
        report();
      });
      report();
    });
  </script>
</body>
</html>

초기 결과는 다음과 같습니다.

combined="AlphaHiddenBeta"
per item=["AlphaHidden","Beta"]
items=2

1. Read를 누르면 같은 결과가 나옵니다. Hidden이 화면에 보이지 않아도 combined와 첫 배열 항목에는 포함됩니다.
2. Prefix each item은 함수형 .text()에 전달된 index·oldText로 1. AlphaHidden, 2. Beta를 만듭니다. strong과 숨긴 span은 텍스트로 교체되어 더 이상 남지 않습니다.
3. Reset 후 Set text를 누르면 두 문단 모두 <em>Hello</em>를 문자 그대로 표시합니다. em 요소는 만들어지지 않습니다.
4. Value를 바꾸어 Set text를 다시 누릅니다. 입력은 .val()로 읽으며, 처음과 끝의 공백도 문자열에는 유지됩니다.
5. Clear text는 .text("")를 적용합니다. combined는 빈 문자열, per item은 빈 문자열 두 개이며 문단 개수는 2입니다.
6. Reset은 처음 저장한 HTML과 입력값을 복원합니다. Prefix each item을 반복하면 현재 텍스트에 접두어가 계속 추가되므로 같은 초기 조건의 비교에는 Reset을 먼저 사용합니다.

공백·숨긴 내용·서식이 사라지는 이유

Alpha와 Beta 사이에 공백이 자동 삽입되지 않으므로 combined가 AlphaHiddenBeta가 됩니다. 항목 경계가 필요하면 예제의 perItem 배열을 유지하거나, 그 배열을 원하는 구분자로 join합니다. 원래 DOM(Document Object Model, 문서 객체 모델)에 있던 공백·줄바꿈과 브라우저 파싱의 차이도 결과에 영향을 줄 수 있습니다.

네이티브 textContent도 화면 스타일과 독립적인 텍스트를 다루며 innerText와 구분됩니다. 숨긴 텍스트를 제외한 결과가 필요하다면 어떤 요소를 포함할지 먼저 정해야 합니다. 숨김 여부를 고려하지 않은 넓은 컨테이너 선택을 ‘사용자가 보는 글자’와 같은 것으로 취급하지 않습니다.

.text(value)는 기존 구조에 글자만 추가하는 메서드가 아닙니다. 대상 내부의 자식 태그를 텍스트로 교체하므로 아이콘·링크·버튼을 가진 부모 전체에 적용하면 그 자식도 없어집니다. 바꿀 라벨만 별도 span으로 지정하는 등 수정 범위를 좁힙니다.

0·false·빈 선택과 문자 그대로의 값

다음 완전한 부분 코드를 개발자 도구 Console에서 실행합니다. 임시 div를 문서에 넣지 않고 값을 바꾸며 끝에서 정리합니다. 숫자와 불리언은 텍스트로 변환되고, &는 HTML 엔티티로 해석되지 않은 원래 문자로 남습니다.

const $box = $("<div>A <span>B</span> C</div>");
console.log(`spaces=${JSON.stringify($box.text())}`);
$box.text(0);
console.log(`number=${JSON.stringify($box.text())}`);
$box.text(false);
console.log(`boolean=${JSON.stringify($box.text())}`);
$box.text("&amp;");
console.log(`entity characters=${JSON.stringify($box.text())}`);
console.log(`empty selection=${JSON.stringify($().text())}`);
$box.remove();

spaces="A B C"
number="0"
boolean="false"
entity characters="&"
empty selection=""

빈 선택의 .text()는 빈 문자열입니다. 이는 요소가 있는데 내용만 비어 있는 경우와 결과가 같을 수 있으므로, 대상 존재를 판별하려면 .length도 확인합니다. 숫자 0이나 false를 ‘값 없음’으로 잘못 처리하지 않도록 무조건적인 value || "" 같은 변환에도 주의합니다.

.text()에 전달한 일반 문자열은 이 텍스트 표시 경로에서 태그로 실행되지 않습니다. 그러나 그 결과를 나중에 다시 .html()로 넣으면 HTML로 해석하는 별도 동작입니다. .text()를 HTML 정화기로 간주하지 말고, 글자로 표시할 값은 끝까지 텍스트로 처리합니다. 값이 예상과 다르면 선택 범위·자손 포함 여부·구분자·폼 값의 .val() 사용과 Console 오류를 확인합니다.