jQuery / Método / .text() - Leer o reemplazar contenido de texto

En jQuery, .text() devuelve una cadena que combina el texto de todos los elementos seleccionados y sus descendientes. .text(value) reemplaza el contenido de cada elemento por texto sin interpretar etiquetas HTML. Para resultados separados, lee cada elemento en un array en lugar del getter combinado.

Ámbito de lectura, html y val

La API .text() lee toda la selección, no solo el primer elemento. Excluye el marcado, incluye texto descendiente y no añade separadores entre elementos. No extrae únicamente lo que aparece visible en pantalla.

.html() trata el marcado y .val() los valores actuales de entrada. No leas el valor actual de input mediante .text(). Este método funciona en documentos XML y HTML.

Comparar resultados combinados e individuales

Guarda todo el código en UTF-8 como text-demo.html y ábrelo en el navegador. Necesitas internet para cargar el archivo oficial de jQuery 4.0.0 desde su red de distribución de contenidos, CDN, sin instalar paquetes. Lectura, escritura, prefijos por función, vaciado, Reset y ejemplo Console se ejecutaron con 3.7.1 y 4.0.0.

El primer párrafo contiene Alpha y un span hidden con Hidden; el segundo contiene Beta. JSON.stringify() muestra límites de cadenas y valores vacíos. perItem lee cada elemento con .map() y .get() lo convierte en un array normal.

<!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>

Resultado inicial:

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

1. Read da el mismo resultado. Hidden no se ve, pero está en combined y en el primer elemento del array.
2. Prefix each item usa index y oldText para crear 1. AlphaHidden y 2. Beta. strong y el span oculto se reemplazan por texto.
3. Después de Reset, Set text muestra literalmente <em>Hello</em> en ambos párrafos, sin crear em.
4. Edita Value y repite. Se lee con .val() y se conservan espacios iniciales y finales en la cadena.
5. Clear text aplica .text(""). combined queda vacío, per item contiene dos cadenas vacías y permanecen dos párrafos.
6. Reset restaura HTML y entrada guardados. Repetir prefijos los añade al texto actual: reinicia antes de comparar condiciones iniciales iguales.

Espacios, contenido oculto y formato perdido

No se añade espacio entre Alpha y Beta, así que combined es AlphaHiddenBeta. Conserva perItem si importan los límites, o usa join con el separador necesario. Espacios y saltos del modelo de objetos del documento, DOM, y diferencias de análisis del navegador pueden afectar el resultado.

El textContent nativo también trata texto con independencia de los estilos y difiere de innerText. Para excluir contenido oculto, decide primero qué elementos incluir. Leer un contenedor amplio sin considerar visibilidad no equivale exactamente a lo que ve el lector.

.text(value) no se limita a añadir caracteres. Reemplaza las etiquetas hijas, por lo que aplicado al padre puede eliminar iconos, enlaces y botones. Limita la escritura al span de la etiqueta para conservar los demás hijos.

0, false, selecciones vacías y valores literales

Ejecuta este fragmento completo en Console. Cambia un div temporal sin insertarlo y lo limpia al final. Números y booleanos pasan a texto; & permanece como caracteres sin interpretarse como entidad 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() de una selección vacía es una cadena vacía. Un elemento existente sin contenido puede dar lo mismo: revisa .length para comprobar existencia. No conviertas automáticamente 0 o false en ausencia de datos mediante value || "".

Las cadenas enviadas a .text() no se ejecutan como etiquetas en esa ruta textual. Pasar luego el resultado a .html() es otra operación de interpretación HTML. .text() no es un sanitizador HTML; mantén como texto lo destinado a caracteres. Si el resultado falla, revisa ámbito, descendientes, separadores, .val() en formularios y errores Console.