jQuery / Methode / .text() - Textinhalte lesen oder ersetzen

jQuerys .text() liefert eine Zeichenkette mit dem kombinierten Text aller ausgewählten Elemente und ihrer Nachfahren. .text(value) ersetzt den Inhalt jedes Elements durch Text, ohne HTML-Tags zu interpretieren. Für getrennte Ergebnisse lesen Sie jedes Element in ein Array statt mit dem kombinierten Getter.

Lesebereich, html und val unterscheiden

Die .text()-API liest die gesamte Auswahl, nicht nur ihr erstes Element. Sie entfernt Markup aus dem Ergebnis, berücksichtigt Nachfahrentext und fügt keine Trennzeichen zwischen Elementen hinzu. Sie extrahiert nicht ausschließlich sichtbar dargestellten Text.

.html() verarbeitet Markup, .val() aktuelle Eingabewerte. Lesen Sie den aktuellen input-Wert nicht mit .text(). Die Textmethode funktioniert sowohl in HTML- als auch XML-Dokumenten.

Kombinierte und einzelne Ergebnisse vergleichen

Speichern Sie alles in UTF-8 als text-demo.html und öffnen Sie es im Browser. Für die offizielle jQuery-Datei 4.0.0 vom Content Delivery Network (CDN) brauchen Sie Internet, aber keine Paketinstallation. Lesen, Setzen, Präfixfunktion, Leeren, Reset und das Konsolenbeispiel wurden mit 3.7.1 und 4.0.0 ausgeführt.

Der erste Absatz enthält Alpha und ein verborgenes span mit Hidden, der zweite Beta. JSON.stringify() zeigt Zeichenkettengrenzen und leere Werte ausdrücklich. perItem liest mit .map() jedes Element und wandelt das Ergebnis mit .get() in ein normales Array um.

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

Anfangsausgabe:

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

1. Read erzeugt dasselbe Ergebnis. Hidden ist unsichtbar, steht aber in combined und im ersten Arrayeintrag.
2. Prefix each item nutzt index und oldText für 1. AlphaHidden und 2. Beta. strong und das versteckte span werden durch Text ersetzt.
3. Drücken Sie nach Reset auf Set text. Beide Absätze zeigen <em>Hello</em> wörtlich ohne em-Element.
4. Ändern Sie Value und wiederholen Sie. .val() liest die Eingabe; führende und abschließende Leerzeichen bleiben in der Zeichenkette.
5. Clear text verwendet .text(""). combined ist leer, per item enthält zwei leere Zeichenketten, zwei Absätze bleiben.
6. Reset stellt gespeichertes HTML und Eingabe wieder her. Wiederholte Präfixaktionen ergänzen den aktuellen Text erneut; setzen Sie für gleiche Vergleichsbedingungen zuerst zurück.

Leerzeichen, versteckte Inhalte und verlorene Formatierung

Zwischen Alpha und Beta entsteht kein zusätzliches Leerzeichen: combined lautet AlphaHiddenBeta. Behalten Sie bei wichtigen Grenzen perItem oder verbinden Sie das Array mit einem eigenen Trennzeichen. Vorhandene Leerzeichen/Zeilenumbrüche im Document Object Model (DOM) und Unterschiede der Browseranalyse können das Ergebnis beeinflussen.

Natives textContent behandelt Text ebenfalls unabhängig von der Darstellung und unterscheidet sich von innerText. Legen Sie zuerst fest, welche Elemente enthalten sein sollen, wenn versteckter Text ausgeschlossen werden muss. Eine breite Containersuche ohne Sichtbarkeitsregeln entspricht nicht exakt dem sichtbaren Lesertext.

.text(value) hängt nicht lediglich Zeichen an vorhandene Struktur an. Es ersetzt Kindmarkup; am ganzen Elternteil können dadurch Symbole, Links oder Buttons verschwinden. Beschränken Sie Änderungen etwa auf den eigenen Label-span, wenn andere Kinder bleiben sollen.

0, false, leere Auswahlen und wörtliche Werte

Führen Sie diesen vollständigen Teilcode in der Entwicklerkonsole aus. Er ändert ein nicht eingefügtes temporäres div und bereinigt es am Ende. Zahlen und boolesche Werte werden Text; & bleibt die wörtliche Zeichenfolge und wird nicht als HTML-Entität interpretiert.

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() einer leeren Auswahl ist eine leere Zeichenkette. Ein bestehendes leeres Element kann dasselbe liefern; prüfen Sie die Existenz mit .length. Behandeln Sie die Zahl 0 oder false nicht unbedacht durch value || "" als fehlende Daten.

Normale Zeichenketten an .text() werden in diesem Textpfad nicht als Tags ausgeführt. Die spätere Übergabe an .html() ist dagegen eine neue HTML-Interpretation. Nutzen Sie .text() nicht als HTML-Bereinigung, sondern behalten Sie Zeichenwerte im Textpfad. Prüfen Sie bei Abweichungen Bereich, Nachfahren, Trennzeichen, .val() für Formulare und Console-Fehler.