Highlight.size — Eigenschaft · JavaScript-Referenz

Signatur

get Highlight.prototype.size

Beschreibung

Die schreibgeschützte Eigenschaft size liefert die Anzahl der Bereiche, die aktuell in einem Highlight-Objekt gespeichert sind. Highlight ist Teil der CSS Custom Highlight API und verhält sich wie ein Set: Jeder Bereich (Range oder StaticRange) kann nur einmal enthalten sein. size entspricht daher exakt Set.prototype.size.

Praktisch nützlich ist size etwa, um die Anzahl der Treffer einer Suchfunktion anzuzeigen („5 Treffer“), um zu prüfen, ob ein Highlight überhaupt noch Bereiche enthält, bevor man es in der HighlightRegistry (CSS.highlights) behält, oder zum Debuggen.

Der Wert ändert sich dynamisch durch add(), delete() und clear(). Da es sich um einen reinen Getter handelt, lässt sich size nicht direkt setzen; Zuweisungen werden im nicht-strikten Modus stillschweigend ignoriert.

Rückgabewert

Typ

number

Beschreibung

Ganzzahl ≥ 0 – die Anzahl der im Highlight enthaltenen AbstractRange-Objekte.

Beispiele

Highlight erzeugen und Größe abfragen

const p = document.querySelector('p');
const textNode = p.firstChild;

const range1 = new Range();
range1.setStart(textNode, 0);
range1.setEnd(textNode, 5);

const range2 = new Range();
range2.setStart(textNode, 10);
range2.setEnd(textNode, 15);

const highlight = new Highlight(range1, range2);
console.log(highlight.size);

// Derselbe Bereich wird nicht doppelt gezählt (Set-Semantik)
highlight.add(range1);
console.log(highlight.size);

2 2

Suchtreffer markieren und zählen

const markMatches = (root, term) => {
  const highlight = new Highlight();
  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
  const needle = term.toLowerCase();

  while (walker.nextNode()) {
    const node = walker.currentNode;
    const text = node.textContent.toLowerCase();
    let index = text.indexOf(needle);
    while (index !== -1) {
      const range = new Range();
      range.setStart(node, index);
      range.setEnd(node, index + needle.length);
      highlight.add(range);
      index = text.indexOf(needle, index + needle.length);
    }
  }

  CSS.highlights.set('search', highlight);
  return highlight.size;
};

const count = markMatches(document.body, 'javascript');
document.querySelector('#status').textContent = `${count} Treffer`;

/* CSS dazu:
::highlight(search) { background: yellow; }
*/

Leere Highlights aus der Registry entfernen

const highlight = CSS.highlights.get('search');

if (highlight) {
  highlight.clear();
  console.log(highlight.size);

  if (highlight.size === 0) {
    CSS.highlights.delete('search');
  }
}

// Wichtig · Fallstricke

Nur lesbar: size ist ein Getter. highlight.size = 0 leert das Highlight nicht (im Strict Mode wirft es einen TypeError). Zum Leeren clear() verwenden.
Set-Semantik: Gezählt werden Objekt-Referenzen, nicht Textbereiche. Zwei verschiedene Range-Objekte mit identischen Grenzen zählen doppelt; dasselbe Objekt zweimal hinzugefügt zählt nur einmal.
Kollabierte oder ungültige Bereiche (z. B. nach DOM-Änderungen bei StaticRange) bleiben mitgezählt, auch wenn sie nichts mehr sichtbar markieren.
Nicht verwechseln mit HighlightRegistry.size (CSS.highlights.size), das die Anzahl registrierter Highlights liefert, nicht die der Bereiche.
Kompatibilität: Die CSS Custom Highlight API ist in Chromium-Browsern seit Version 105 und in Safari seit 17.2 verfügbar, in Firefox erst seit neueren Versionen. Per if ('highlights' in CSS) auf Unterstützung prüfen.

Siehe auch

Highlight Highlight.add() Highlight.delete() Highlight.clear() Range