Meta tags:
description=Erfahren Sie, wie Sie mit der JavaScript Selection und Range API Text im DOM auswählen, markieren, extrahieren und einfügen können.;

Headings (most frequently used words):

selection, range, beispiel, text, und, die, schnittstelle, nützliche, methoden, von, praktisches, javascript, api, verstehen, erkunden, erweiterte, textoperationen, zusammenfassung, übungen, eigenschaften, markieren, grenzen, setzen, extrahieren, einfügen,

Text of the page (most frequently used words):
und (84), range (50), die (44), sie (33), der (31), selection (28), ein (24), dom (24), text (23), api (22), das (21), den (19), #javascript (18), ist (17), lernen (16), des (16), einen (16), const (16), node (15), mit (15), the (15), document (14), dem (12), knoten (12), offset (11), methoden (11), von (11), auf (10), inhalt (10), zurück (10), eine (10), gibt (9), html (8), web (8), methode (8), dokument (8), div (8), innerhalb (8), span (8), über (7), entfernt (7), wenn (7), getselection (7), benutzer (7), markieren (7), getrangeat (7), tostring (7), fragment (7), oder (7), button (7), string (7), tools (6), was (6), deletecontents (6), aus (6), removeallranges (6), ausgewählten (6), eigenschaften (6), window (6), kopieren (6), script (6), sel (6), function (6), and (6), beispiel (6), browser (6), w3docs (5), alle (5), übungen (5), schnittstelle (5), this (5), ohne (5), ranges (5), extractcontents (5), lesen (5), selbst (5), textnode (5), ausgewählt (5), markiert (5), events (5), formatter (5), color (5), für (4), json (4), generator (4), editor (4), probier (4), css (4), page (4), event (4), aktuelle (4), ihn (4), setend (4), nur (4), objekt (4), schnittstellen (4), queryselector (4), einfügen (4), verschiebt (4), insertnode (4), addrange (4), zwei (4), dokuments (4), erstellen (4), selectnodecontents (4), createrange (4), dieses (4), einfügemarke (4), wie (4), dann (4), content (4), eines (4), einem (4), als (4), start (4), objekte (4), shadow (4), fetch (4), async (4), einführung (4), code (3), encoder (3), quizze (3), php (3), microtasks (3), nicht (3), sind (3), typ (3), tag (3), modifizieren (3), diese (3), extrahieren (3), heraus (3), clonecontents (3), bildschirm (3), neu (3), begrenzungspunkten (3), positionieren (3), selectnode (3), setstart (3), new (3), hello (3), world (3), rangecount (3), editable (3), getelementbyid (3), onclick (3), cursor (3), position (3), setzen (3), fügt (3), stelle (3), alles (3), sodass (3), sample (3), dies (3), können (3), nichts (3), grenzen (3), offsets (3), console (3), ende (3), hat (3), muster (3), verwenden (3), flag (3), data (3), promise (3), funktionen (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), zusammenfassung (2), erweiterte (2), textoperationen (2), erkunden (2), verstehen (2), loop (2), macrotasks (2), resizeobserver (2), previous (2), reduziert (2), erlaubt (2), kindknoten (2), vom (2), repräsentiert (2), welche (2), folgenden (2), aussagen (2), wahr (2), suchen (2), getelement (2), ermöglichen (2), rich (2), inhalte (2), kopiert (2), verwirft (2), fügen (2), wieder (2), surroundcontents (2), markierung (2), abkürzungen (2), select (2), return (2), editablediv (2), inserttext (2), set (2), style (2), contenteditable (2), genau (2), dieser (2), zuerst (2), neue (2), wird (2), durch (2), example (2), extrahierten (2), bevor (2), einer (2), aber (2), arbeiten (2), manipulatedtext (2), extractedtext (2), extracttext (2), some (2), liest (2), elements (2), praktisches (2), zum (2), fehler (2), element (2), anfang (2), kopie (2), inhalts (2), verändern (2), dessen (2), nützliche (2), umspannt (2), seine (2), müssen (2), first (2), log (2), character (2), textknotens (2), highlighttext (2), bestimmten (2), meisten (2), einzigen (2), halten (2), zur (2), index (2), user (2), selectedtext (2), greifen (2), ihnen (2), apis (2), auswählen (2), workers (2), file (2), suche (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), url (2), formulare (2), benutzerdefinierte (2), ereignisse (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), property (2), object (2), arrow (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, üben, kostenlose, tutorials, beispiele, seit, 2014, next, yes, helpful, prüfen, collapsetoend, startpunkt, zurückzugeben, zählen, elementknoten, textbereich, übung, weiter, zusammen, präzise, inhalten, grundlage, editoren, annotationswerkzeugen, umhüllt, benutzers, schreiben, besteht, beschreiben, clear, createtextnode, clears, any, selected, commonancestorcontainer, contains, check, within, insert, click, here, border, 1px, solid, ccc, padding, 10px, min, height, 50px, true, verwendet, klickt, schaltfläche, beachten, ausgewählte, textknoten, eingefügt, dahinter, landet, grundlegende, textmanipulation, hinaus, komplexere, operationen, direkte, obigen, ersetzt, skript, wort, alertbox, angezeigt, einfache, manipulation, zeigt, alert, manipulating, replace, extract, manipulate, for, extraction, transformiert, ursprünglichen, berühren, denken, unterschied, hüllt, praktisch, wirft, teilweise, kreuzt, objekts, seines, clonerange, beide, endgrenzen, knotens, umgebenden, tags, decken, häufigsten, fälle, keine, berechnen, characters, paragraph, end, before, 6th, inside, firstchild, leeren, zeigen, möchten, finden, zählt, vor, ersten, kind, elementknotens, zeichenindex, zwischen, zeichen, jeweils, definiert, werden, bedeutung, hängt, appendchild, yellow, backgroundcolor, createelement, false, highlight, press, wodurch, leer, kollabiert, bleibt, dort, wir, nehmen, ziehen, hüllen, gestaltetes, legen, war, gängiges, zurückzuschreiben, gefolgt, einzelnen, punkt, leere, collapse, praktischere, wahl, removerange, löscht, vollständig, hinzu, angegebenen, auswahl, anzahl, überprüfen, immer, aufrufen, whatever, highlighted, after, highlights, something, schnellste, weg, sehen, einfachen, zurückgibt, darauf, globalen, oft, einfach, intern, hält, null, mehr, praxis, gängige, baut, struktur, knotentypen, kommentieren, funktion, benutzerdefiniertes, ersetzen, bauen, programmgesteuert, gestaltet, kapitel, behandelt, ändern, benutzerauswahl, sowie, zusammenspiel, beider, konzepte, einzufügen, gerade, wesentlichen, hülle, mehrere, texteinfügemarke, verbunden, paar, beschreibt, teil, meinen, bis, hin, zeichenoffset, kann, rein, speicher, existieren, dass, davon, weiß, welchen, seite, zieht, verfolgt, wurde, stellt, informationen, verfügung, auswahlen, verwandte, erfahren, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, regexp, sticky, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, custom, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, references, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, attribute, knoteneigenschaften, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, try, catch, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, manipulieren, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, alte, var, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, iterables, array, strings, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
cript selection und range api w3docs w3docs bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen kurse quizze übungen snippets tools general tools html editor password generator html encoder code diff json beautifier alle 13 color tools color picker color converter color mixer color hex colors hsl alle 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder alle 19 code formatters javascript formatter css formatter html formatter json formatter php formatter w3docs durchsuchen k de english en deutsch de русский ru français fr español es português pt italiano it anmelden javascript lernen javascript basic einführung javascript verwenden js kommentare js mit dom js use strict js variablen js datentypen js typkonvertierungen js interaktive funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript selection und range api erfahren sie wie sie mit der javascript selection und range api text im dom auswählen markieren extrahieren und einfügen können wenn ein benutzer den cursor über text auf einer seite zieht verfolgt der browser was ausgewählt wurde javascript stellt diese informationen zur verfügung und erlaubt es ihnen auswahlen selbst zu erstellen über zwei verwandte dom schnittstellen ein range ist ein paar von begrenzungspunkten ein start und ein ende innerhalb des dokuments er beschreibt welchen teil des dokuments sie meinen bis hin zu einem bestimmten zeichenoffset innerhalb eines textknotens ein range kann rein im speicher existieren ohne dass der benutzer davon weiß eine selection ist das was der benutzer gerade markiert hat sie ist im wesentlichen eine hülle um einen oder mehrere ranges die mit der markierung auf dem bildschirm und dem cursor texteinfügemarke verbunden ist sie greifen auf diese apis zurück wenn sie einen rich text editor eine markieren und kommentieren funktion ein benutzerdefiniertes suchen und ersetzen oder alles bauen müssen das ausgewählten text programmgesteuert liest verschiebt oder gestaltet dieses kapitel behandelt das erstellen von ranges das lesen und ändern der benutzerauswahl sowie das zusammenspiel beider konzepte um inhalte zu markieren und einzufügen dies baut auf der struktur des dom auf wenn ihnen knotentypen und offsets neu sind lesen sie zuerst node eigenschaften typ tag und inhalt und das dokument modifizieren die selection schnittstelle verstehen die selection schnittstelle repräsentiert den text den der benutzer markiert hat oder die aktuelle position der einfügemarke wenn nichts markiert ist sie greifen darauf mit der globalen methode window getselection zu oft einfach getselection intern hält eine selection null oder mehr range objekte in der praxis halten die meisten browser nur einen einzigen range sodass getrangeat 0 die gängige methode zum lesen ist der schnellste weg zu sehen was ausgewählt ist ist tostring das den ausgewählten text als einfachen string zurückgibt after the user highlights something on the page const selectedtext window getselection tostring console log selectedtext whatever the user highlighted kopieren nützliche eigenschaften und methoden von selection rangecount die anzahl der ranges in der selection 0 wenn nichts ausgewählt ist überprüfen sie dies immer bevor sie getrangeat aufrufen tostring gibt den ausgewählten text als string zurück getrangeat index gibt den range am angegebenen index zurück verwenden sie 0 für die aktuelle auswahl addrange range fügt einen range zur selection hinzu und markiert ihn auf dem bildschirm removeallranges löscht die selection vollständig removerange range entfernt einen bestimmten range da die meisten browser nur einen einzigen range halten ist removeallranges die praktischere wahl collapse node offset reduziert die selection auf einen einzelnen punkt eine leere einfügemarke innerhalb von node ein gängiges muster ist die aktuelle selection zu lesen sie zu modifizieren und dann eine neue selection zurückzuschreiben removeallranges gefolgt von addrange praktisches beispiel text markieren um das zu markieren was der benutzer ausgewählt hat nehmen sie dessen range ziehen sie die ausgewählten knoten aus dem dokument heraus hüllen sie sie in ein gestaltetes span ein und legen sie dieses span wieder an die stelle an der der inhalt war extractcontents entfernt den ausgewählten inhalt aus dem dom und gibt ihn als document fragment zurück wodurch der range an dieser stelle leer kollabiert bleibt genau dort fügen wir dann das span ein div id text select some of this text and press the button div button onclick highlighttext highlight button script function highlighttext const selection window getselection if selection rangecount return false const range selection getrangeat 0 const span document createelement span span style backgroundcolor yellow const fragment range extractcontents span appendchild fragment range insertnode span script kopieren probier es selbst die range schnittstelle erkunden ein range markiert ein fragment des dokuments mit zwei begrenzungspunkten einem start und einem ende die jeweils durch einen knoten und einen offset definiert werden die bedeutung des offsets hängt vom knoten ab innerhalb eines textknotens ist der offset ein zeichenindex z b ist offset 5 zwischen dem 5 und 6 zeichen innerhalb eines elementknotens zählt der offset die kindknoten z b ist offset 0 vor dem ersten kind erstellen sie einen leeren range mit document createrange und positionieren sie dann seine grenzen sie können die knoten auf die sie zeigen möchten mit getelementbyid queryselector finden grenzen setzen const p document queryselector p const textnode p firstchild the text inside p const range document createrange range setstart textnode 0 start at the first character range setend textnode 5 end before the 6th character console log range tostring first 5 characters of the paragraph kopieren zwei abkürzungen decken die häufigsten fälle ab sodass sie keine offsets berechnen müssen selectnode node der range umspannt den knoten und seine umgebenden tags selectnodecontents node der range umspannt nur das was innerhalb des knotens ist nützliche methoden von range setstart node offset setend node offset positionieren sie die start und endgrenzen selectnode node selectnodecontents node setzen sie beide grenzen um einen knoten oder dessen inhalt tostring der text innerhalb des range clonecontents gibt eine kopie des inhalts des range als document fragment zurück ohne das dokument zu verändern extractcontents verschiebt den inhalt aus dem dokument in ein fragment und gibt es zurück deletecontents entfernt den inhalt des range und gibt nichts zurück clonerange gibt eine kopie des range objekts selbst zurück nicht seines inhalts insertnode node fügt einen knoten am anfang des range ein surroundcontents node hüllt den inhalt des range in node ein praktisch zum markieren wirft aber einen fehler wenn der range einen nicht text element teilweise kreuzt denken sie an den unterschied clonecontents kopiert extractcontents verschiebt heraus und gibt zurück deletecontents entfernt und verwirft praktisches beispiel text extrahieren dieses beispiel liest alles innerhalb eines elements mit einem range und transformiert den text ohne den ursprünglichen dom zu berühren div id content this is some sample text for extraction div button onclick extracttext extract and manipulate button script function extracttext const range document createrange const content document getelementbyid content range selectnodecontents content const extractedtext range tostring const manipulatedtext extractedtext replace sample example manipulating text alert manipulatedtext script kopieren probier es selbst im obigen beispiel ersetzt das skript das wort sample durch example im extrahierten text bevor es in einer alertbox angezeigt wird dies ist eine einfache manipulation zeigt aber wie sie mit dem extrahierten text arbeiten können erweiterte textoperationen über die grundlegende textmanipulation hinaus ermöglichen die selection und range schnittstellen komplexere operationen wie das direkte einfügen von knoten in das dokument beispiel text einfügen dieses beispiel verwendet ein contenteditable div der benutzer klickt um die einfügemarke zu setzen und die schaltfläche fügt hello world genau an dieser stelle ein beachten sie wie deletecontents zuerst alles ausgewählte entfernt dann der neue textknoten eingefügt und neu ausgewählt wird sodass die einfügemarke dahinter landet div id editable contenteditable true style border 1px solid ccc padding 10px min height 50px click here and set the cursor position div button onclick inserttext insert hello world button script function inserttext const editablediv document getelementbyid editable const sel window getselection check if the selection is within the editable div if sel rangecount editablediv contains sel getrangeat 0 commonancestorcontainer return const range sel getrangeat 0 range deletecontents clears any selected text const textnode document createtextnode hello world range insertnode textnode sel removeallranges clear the previous selection sel addrange range re select the new text node script kopieren probier es selbst zusammenfassung ein range besteht aus zwei begrenzungspunkten knoten offset die ein fragment des dokuments beschreiben erstellen sie einen mit document createrange und positionieren sie ihn mit setstart setend oder den abkürzungen selectnode selectnodecontents eine selection über window getselection umhüllt die markierung des benutzers auf dem bildschirm lesen sie sie mit tostring und getrangeat 0 schreiben sie sie mit removeallranges addrange neu für inhalte clonecontents kopiert extractcontents verschiebt heraus deletecontents verwirft und insertnode surroundcontents fügen knoten wieder ein zusammen ermöglichen diese methoden das präzise markieren extrahieren und einfügen von inhalten die grundlage von rich text editoren und annotationswerkzeugen weiter lernen das dokument modifizieren node eigenschaften typ tag und inhalt suchen getelement und queryselector übungen übung welche der folgenden aussagen über die javascript range und selection schnittstellen sind wahr welche der folgenden aussagen über die javascript range und selection schnittstellen sind wahr die methode getselection gibt ein selection objekt zurück das den vom benutzer ausgewählten textbereich repräsentiert die methode removeallranges entfernt alle ranges ...