Range.compareBoundaryPoints() — Methode · JavaScript-Referenz

Signatur

Range.prototype.compareBoundaryPoints(how, sourceRange)

Beschreibung

compareBoundaryPoints() stellt fest, wie zwei Bereiche im Dokument zueinander liegen. Sie vergleicht jeweils einen Grenzpunkt des aktuellen Bereichs mit einem Grenzpunkt von sourceRange. Welche Punkte verglichen werden, legt der Parameter how über eine der Konstanten Range.START_TO_START, Range.START_TO_END, Range.END_TO_END oder Range.END_TO_START fest.

Laut DOM-Spezifikation gilt die folgende Zuordnung (dieser Punkt wird mit dem anderen verglichen):

START_TO_START (0): Start dieses Bereichs mit dem Start von sourceRange
START_TO_END (1): Ende dieses Bereichs mit dem Start von sourceRange
END_TO_END (2): Ende dieses Bereichs mit dem Ende von sourceRange
END_TO_START (3): Start dieses Bereichs mit dem Ende von sourceRange

Typische Einsatzgebiete sind Rich-Text-Editoren, Hervorhebungen und Annotationen: Man prüft etwa, ob sich zwei Markierungen überschneiden, ob eine Auswahl vollständig in einem Container liegt, oder sortiert mehrere Bereiche nach ihrer Position im Dokument.

Parameter

Name	Typ	Default	Beschreibung
$how Pflicht	number		Vergleichsmodus: `Range.START_TO_START` (0), `Range.START_TO_END` (1), `Range.END_TO_END` (2) oder `Range.END_TO_START` (3). Andere Werte lösen einen `NotSupportedError` aus.
$sourceRange Pflicht	Range		Der Bereich, mit dem verglichen wird. Er muss im selben Dokument bzw. Knotenbaum liegen wie der aktuelle Bereich.

Beispiele

Grundlegender Vergleich zweier Textbereiche

const p = document.createElement('p');
p.textContent = 'Hallo schöne Welt';
document.body.append(p);
const text = p.firstChild;

// Bereich a: "Hallo" (0–5)
const a = document.createRange();
a.setStart(text, 0);
a.setEnd(text, 5);

// Bereich b: "schöne" (6–12)
const b = document.createRange();
b.setStart(text, 6);
b.setEnd(text, 12);

console.log(a.compareBoundaryPoints(Range.START_TO_START, b)); // Start a (0) vs. Start b (6)
console.log(a.compareBoundaryPoints(Range.END_TO_END, b));     // Ende a (5) vs. Ende b (12)
console.log(b.compareBoundaryPoints(Range.START_TO_START, a)); // Start b (6) vs. Start a (0)
console.log(a.compareBoundaryPoints(Range.START_TO_END, b));   // Ende a (5) vs. Start b (6)

-1 -1 1 -1

Überschneidung zweier Markierungen prüfen

// Zwei Bereiche überlappen, wenn a vor dem Ende von b beginnt
// und nach dem Start von b endet.
const rangesOverlap = (a, b) =>
  a.compareBoundaryPoints(Range.END_TO_START, b) < 0 && // Start a < Ende b
  a.compareBoundaryPoints(Range.START_TO_END, b) > 0;   // Ende a > Start b

const p = document.createElement('p');
p.textContent = 'Lorem ipsum dolor sit amet';
document.body.append(p);
const t = p.firstChild;

const makeRange = (start, end) => {
  const r = document.createRange();
  r.setStart(t, start);
  r.setEnd(t, end);
  return r;
};

console.log(rangesOverlap(makeRange(0, 11), makeRange(6, 17))); // "Lorem ipsum" / "ipsum dolor"
console.log(rangesOverlap(makeRange(0, 5), makeRange(6, 11)));  // "Lorem" / "ipsum"

true false

Prüfen, ob die Benutzerauswahl in einem Editor-Container liegt

const editor = document.querySelector('#editor');

const isSelectionInside = (container) => {
  const sel = window.getSelection();
  if (!sel || sel.rangeCount === 0) return false;

  const selection = sel.getRangeAt(0);
  const outer = document.createRange();
  outer.selectNodeContents(container);

  return (
    outer.compareBoundaryPoints(Range.START_TO_START, selection) <= 0 &&
    outer.compareBoundaryPoints(Range.END_TO_END, selection) >= 0
  );
};

document.addEventListener('selectionchange', () => {
  console.log('Auswahl im Editor:', isSelectionInside(editor));
});

Auswahl im Editor: true (bzw. false, je nach Auswahl)

Mehrere Bereiche nach Dokumentposition sortieren

const sortRanges = (ranges) =>
  [...ranges].sort((x, y) => x.compareBoundaryPoints(Range.START_TO_START, y));

const p = document.createElement('p');
p.textContent = 'eins zwei drei';
document.body.append(p);
const t = p.firstChild;

const r = (s, e) => { const x = document.createRange(); x.setStart(t, s); x.setEnd(t, e); return x; };
const sorted = sortRanges([r(10, 14), r(0, 4), r(5, 9)]);
console.log(sorted.map((x) => x.toString()));

["eins", "zwei", "drei"]

Siehe auch

Range.comparePoint() Range.compareNode() Range.surroundContents() Range.cloneContents() Range.deleteContents() new VRDisplayEvent() new XRLayerEvent()