Meta tags:
description=JavaScript URL API: URLs parsen, Query-Strings mit URLSearchParams bearbeiten, relative URLs auflösen und häufige Fehler vermeiden – mit ausführbaren…;

Headings (most frequently used words):

url, mit, javascript, urls, und, parsen, objekte, dem, arbeiten, api, einführung, in, erstellen, manipulieren, erweiterte, verwendung, von, objekten, praktische, beispiele, zur, manipulation, häufige, fallstricke, fazit, übungen, einfache, erstellung, komponenten, eine, vor, validieren, query, string, über, urlsearchparams, wiederholte, schlüssel, iteration, pfad, hash, ändern, relativen, umgehen, kodierung, kampagnen, verfolgen, integration, web, apis,

Text of the page (most frequently used words):
url (122), und (64), die (44), #javascript (36), der (35), w3docs (29), com (28), https (26), mit (25), api (24), das (23), console (21), wird (20), new (20), outputs (20), log (20), query (19), dom (19), searchparams (18), www (18), objekt (16), lernen (15), urls (15), eine (15), string (15), den (14), const (14), parameter (14), web (13), ist (13), the (12), hash (12), für (11), von (11), werden (11), urlsearchparams (11), key (11), fetch (10), methoden (10), run (10), editable (10), des (9), ein (9), oder (9), einen (9), href (9), search (9), value (9), tag (9), alle (8), html (8), objekte (8), parsen (8), set (8), json (7), pathname (7), dem (7), schlüssel (7), data (7), eigenschaft (7), path (7), initial (7), wie (7), tools (6), einführung (6), page (6), eigenschaften (6), komponenten (6), params (6), auf (6), apiurl (6), async (6), 123 (6), übungen (5), erstellen (5), objekts (5), verwendet (5), einer (5), können (5), wert (5), get (5), ändern (5), port (5), canparse (5), konstruktor (5), with (5), await (5), function (5), zeichenkette (5), änderungen (5), object (5), modified (5), methode (5), events (5), formatter (5), color (5), über (4), generator (4), css (4), häufige (4), manipulieren (4), protocol (4), verfolgen (4), arbeiten (4), verwenden (4), wenn (4), kann (4), zeichenketten (4), gibt (4), nur (4), hostname (4), wirft (4), about (4), basis (4), vollständige (4), bei (4), user (4), userid (4), response (4), direkt (4), stellt (4), campaignurl (4), aus (4), ausgegeben (4), zeigen (4), pfad (4), resource (4), erstellt (4), true (4), strings (4), property (4), 8080 (4), shadow (4), code (3), encoder (3), editor (3), quizze (3), php (3), beispiele (3), manipulation (3), objekten (3), this (3), anfragen (3), was (3), durch (3), als (3), apis (3), zeichen (3), nicht (3), automatisch (3), getall (3), zurück (3), origin (3), relative (3), protokoll (3), übergeben (3), kopieren (3), first (3), posts (3), email (3), dies (3), name (3), diese (3), nach (3), aktualisiert (3), section (3), enthält (3), let (3), output (3), suche (3), delete (3), teile (3), try (3), catch (3), ohne (3), einschließlich (3), host (3), flag (3), document (3), browser (3), event (3), and (3), promise (3), funktionen (3), operatoren (3), entwickler (2), 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), fazit (2), fallstricke (2), praktische (2), zur (2), erweiterte (2), verwendung (2), xmlhttprequest (2), ursprungsübergreifende (2), prüfen (2), welche (2), bestimmte (2), auch (2), beim (2), integration (2), lesen (2), abschließenden (2), hinzufügen (2), geparste (2), ersten (2), einzeln (2), korrekt (2), kein (2), absolute (2), example (2), ungültiger (2), eingabe (2), post (2), jsonplaceholder (2), typicode (2), then (2), lassen (2), sich (2), sicher (2), dass (2), kodiert (2), product (2), utm_source (2), newsletter (2), utm_medium (2), kampagnen (2), häufig (2), dateien (2), nützlich (2), download (2), complexurl (2), john (2), age (2), enthalten (2), kodierung (2), baseurl (2), relativeurl (2), auflösen (2), links (2), umgehen (2), auswirkungen (2), vor (2), scrollen (2), neuen (2), server (2), pfadname (2), fragment (2), initialisierung (2), erklärung (2), create (2), old (2), oldhash (2), original (2), modify (2), folgende (2), konsole (2), entfernt (2), angegebenen (2), parameters (2), bereits (2), has (2), for (2), iteration (2), praxis (2), man (2), bereit (2), bearbeiten (2), false (2), use (2), isvalidurl (2), str (2), return (2), statische (2), führenden (2), top (2), schnittstelle (2), parst (2), fehler (2), workers (2), file (2), muster (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), microtasks (2), formulare (2), benutzerdefinierte (2), ereignisse (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), arrow (2), syntax (2), variablen (2), functions (2), objects (2), 2026, rechte, vorbehalten, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, probier, üben, kostenlose, tutorials, seit, 2014, next, previous, yes, helpful, body, method, übung, robustes, werkzeug, aspekte, analyse, beherrschung, seiner, interaktion, ihrer, webanwendung, vereinfachen, sowohl, funktionalität, benutzererfahrung, verbessern, umgang, komplexen, strukturen, marketingkampagnen, bietet, zuverlässige, effiziente, möglichkeit, webadressen, kanonischer, stabiler, caching, signierung, benötigt, sort, reihenfolge, entspricht, einfügereihenfolge, schrägstrich, reservierte, prozent, kodieren, gleichheit, vergleichen, rohe, normalisierung, erfolgt, wiederholt, vorkommen, zugewiesen, stattdessen, schreibgeschützt, allein, löst, benötigen, schlägt, fehl, weil, angegeben, entweder, angeben, zweites, argument, absichern, fetchposts, moderne, alternative, specific, hervorragend, kombinieren, instanz, nachdem, anfrage, abgeschlossen, antwort, regel, verarbeitet, effektiv, verwalten, digitalen, marketing, eingesetzt, leistung, verschiedener, marketingmaßnahmen, verarbeitung, lokaler, blobs, erzeugt, temporäre, speicher, verweist, vorschau, bildern, direkten, heraus, createobjecturl, doe, 20doe, müssen, übernimmt, aufgabe, gültig, sind, gegen, besonders, webanwendungen, dynamischen, relativen, neue, zustand, demonstrieren, ursprüngliche, ausgangszustand, protokollieren, steht, lesezeichen, innerhalb, seite, einem, bestimmten, abschnitt, gesetzt, route, zunächst, darstellt, pfadnamen, codeausschnitt, zeigt, geändert, abschließend, geänderte, operationen, ausgabe, zeichenkettendarstellung, aktualisieren, dient, dazu, entfernen, ruft, dann, zum, hinzuzufügen, vorhanden, sein, andernfalls, paar, hinzugefügt, initialisiert, only, denselben, mehrfach, treffer, während, werte, liefert, außerdem, paare, durchlaufen, wiederholte, überspringt, zwischenobjekt, meistens, bearbeitet, verändert, assuming, start, that, existing, from, add, read, remove, update, tostring, jede, aktives, dessen, zurückgeschrieben, bevorzugte, weg, übernommen, beispiel, separates, einzelnen, zusammenhängen, not, older, environments, without, can, ftp, sollten, vertrauenswürdige, zuerst, validiert, boolean, werfen, validieren, lesbares, bearbeitbare, inhalte, lesbar, plus, standardport, gilt, domain, schema, doppelpunkts, gesamte, beschreibung, beispielwert, satz, protected, sobald, wurde, dedizierte, ausgelesen, adress, keine, gültige, typeerror, einfache, erstellung, nativ, browsern, node, verfügbar, sie, global, notwendig, dieser, leitfaden, erklärt, einzelne, liest, ändert, verwaltet, aufgaben, bewältigt, require, leistungsstarke, integrierte, anstatt, regulären, ausdrücken, manuellen, aufrufen, zerlegen, sonderfällen, ports, kodierten, fehlenden, versagt, adresse, strukturierte, adressierbare, split, vermeiden, ausführbaren, beispielen, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, element, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, sent, abbruch, fortschritt, formdata, network, requests, canvas, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, 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, dokument, verändern, attribute, knoteneigenschaften, typ, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, window, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, promisification, callbacks, mixins, checking, instanceof, eingebaute, private, geschützte, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, alte, var, scope, rest, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, iterables, array, math, zahlen, primitiven, types, optional, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, 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):
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 url api javascript url api urls parsen query strings mit urlsearchparams bearbeiten relative urls auflösen und häufige fehler vermeiden mit ausführbaren beispielen einführung in javascript url objekte javascript stellt eine leistungsstarke integrierte url schnittstelle bereit um urls zu erstellen zu parsen und zu manipulieren anstatt zeichenketten mit regulären ausdrücken oder manuellen split aufrufen zu zerlegen was bei sonderfällen wie ports kodierten zeichen und fehlenden komponenten versagt parst das url objekt eine adresse in strukturierte einzeln adressierbare teile die url schnittstelle ist nativ in browsern und in node js verfügbar sie ist global kein require notwendig dieser leitfaden erklärt wie man urls erstellt und parst einzelne komponenten liest und ändert query strings über urlsearchparams verwaltet und häufige aufgaben aus der praxis bewältigt wie das erstellen von api anfragen und das verfolgen von links urls mit javascript erstellen und parsen einfache url erstellung um eine url zu erstellen wird die adress zeichenkette an den url konstruktor übergeben wenn die zeichenkette keine gültige absolute url ist wirft der konstruktor einen typeerror const url new url https www w3docs com kopieren url komponenten parsen sobald ein url objekt erstellt wurde können alle teile über eine dedizierte eigenschaft ausgelesen werden javascript editable run const url new url https www w3docs com console log url protocol outputs https console log url hostname outputs www w3docs com console log url pathname outputs der vollständige satz an komponenten für eine url wie https user email protected 8080 path q 1 top ist eigenschaft beispielwert beschreibung href die gesamte url die vollständige url als zeichenkette protocol https das schema einschließlich des abschließenden doppelpunkts hostname www w3docs com die domain ohne port port 8080 der port oder wenn der standardport für das protokoll gilt host www w3docs com 8080 hostname plus port origin https www w3docs com 8080 protokoll host nur lesbar pathname path der pfad nach dem host search q 1 der query string einschließlich des führenden searchparams ein urlsearchparams objekt geparste query parameter nur lesbares object bearbeitbare inhalte hash top das fragment einschließlich des führenden eine url vor dem parsen validieren da der konstruktor bei ungültiger eingabe wirft sollten nicht vertrauenswürdige zeichenketten zuerst validiert werden die statische methode url canparse gibt einen boolean wert zurück ohne zu werfen javascript editable run console log url canparse https www w3docs com outputs true console log url canparse not a url outputs false older environments without canparse can use a try catch function isvalidurl str try new url str return true catch return false console log isvalidurl ftp example com outputs true url objekte manipulieren mit dem query string über urlsearchparams arbeiten jede url stellt eine searchparams eigenschaft bereit ein aktives urlsearchparams objekt dessen änderungen direkt in die url zurückgeschrieben werden dies ist der bevorzugte weg einen query string zu bearbeiten da die kodierung automatisch übernommen wird das folgende beispiel verwendet ein separates urlsearchparams objekt um zu zeigen wie die einzelnen teile zusammenhängen javascript editable run assuming we start with a url that has an existing query string let url new url https www w3docs com initial 123 create a urlsearchparams object from the url s search property let searchparams new urlsearchparams url search add a new parameter searchparams set key value read a parameter console log key searchparams get key outputs key value remove a parameter searchparams delete initial update the url s search property with the modified search parameters url search searchparams tostring output the modified url console log modified url url href outputs https www w3docs com key value in der praxis überspringt man das zwischenobjekt meistens und bearbeitet url searchparams direkt das verändert die url direkt javascript editable run const url new url https www w3docs com initial 123 url searchparams set key value url searchparams delete initial console log url href outputs https www w3docs com key value wiederholte schlüssel und iteration query strings können denselben schlüssel mehrfach enthalten z b tag js tag web get gibt nur den ersten treffer zurück während getall alle werte liefert mit for of können außerdem alle paare durchlaufen werden javascript editable run const url new url https www w3docs com search tag js tag web page 2 const params url searchparams console log params get tag outputs js first value only console log params getall tag outputs js web console log params has page outputs true for const key value of params console log key value outputs tag js tag web page 2 erklärung initialisierung das url objekt wird mit einer basis url erstellt die bereits einen query parameter enthält initial 123 urlsearchparams objekt urlsearchparams wird mit url search initialisiert das den query string der url enthält parameter hinzufügen die methode set wird verwendet um einen neuen parameter key value zum query string hinzuzufügen wenn der schlüssel bereits vorhanden ist wird sein wert aktualisiert andernfalls wird das schlüssel wert paar hinzugefügt parameter lesen die methode get ruft den wert des durch den schlüssel key angegebenen parameters ab der dann in der konsole ausgegeben wird parameter entfernen die methode delete entfernt den durch den schlüssel initial angegebenen parameter dies dient dazu zu zeigen wie ein parameter aus dem query string entfernt wird url suche aktualisieren nach dem ändern der parameter wird die search eigenschaft der url mit der zeichenkettendarstellung des urlsearchparams objekts aktualisiert ausgabe abschließend wird die geänderte url in der konsole ausgegeben um die auswirkungen der operationen zu zeigen pfad und hash ändern der folgende javascript codeausschnitt zeigt wie der pfadname und der hash einer url geändert werden javascript editable run create a url object with an initial url let url new url https www w3docs com old path query 123 oldhash output the original url console log original url url href outputs https www w3docs com old path query 123 oldhash modify the pathname url pathname path to resource modify the hash url hash section output the modified url console log modified url url href outputs https www w3docs com path to resource query 123 section erklärung initialisierung des url objekts das url objekt wird zunächst aus einer zeichenkette erstellt die eine vollständige url darstellt diese url enthält einen pfadnamen einen query string und ein hash fragment pfadname ändern die eigenschaft pathname des url objekts wird auf einen neuen pfad gesetzt path to resource diese eigenschaft gibt den pfad oder die route auf dem server an hash ändern die eigenschaft hash wird auf section aktualisiert in urls steht der hash für ein lesezeichen innerhalb der seite das häufig verwendet wird um zu einem bestimmten abschnitt zu scrollen änderungen protokollieren die ursprüngliche url wird vor den änderungen ausgegeben um den ausgangszustand zu zeigen nach den änderungen wird der neue zustand der url ausgegeben um die auswirkungen der änderungen an pathname und hash zu demonstrieren erweiterte verwendung von url objekten mit relativen urls umgehen das url objekt kann relative urls auch gegen eine basis url auflösen was besonders nützlich für webanwendungen ist die mit dynamischen links umgehen javascript editable run const baseurl new url https www w3docs com const relativeurl new url about baseurl console log relativeurl href outputs https www w3docs com about mit url kodierung arbeiten bei urls die zeichen enthalten die kodiert werden müssen übernimmt das url objekt diese aufgabe automatisch und stellt sicher dass die urls gültig sind javascript editable run const complexurl new url https w3docs com name john doe age 25 console log complexurl href outputs https w3docs com name john 20doe age 25 für die verarbeitung lokaler dateien oder blobs erzeugt url createobjecturl eine temporäre url zeichenkette die auf das objekt im speicher verweist dies ist nützlich für die vorschau von bildern oder den direkten download von dateien aus javascript heraus praktische beispiele zur url manipulation kampagnen urls verfolgen mit url objekten lassen sich kampagnen urls effektiv verwalten die im digitalen marketing häufig eingesetzt werden um die leistung verschiedener marketingmaßnahmen zu verfolgen javascript editable run const campaignurl new url https w3docs com product campaignurl searchparams set utm_source newsletter campaignurl searchparams set utm_medium email console log campaignurl href outputs https w3docs com product utm_source newsletter utm_medium email integration mit web apis url objekte lassen sich hervorragend mit der fetch api kombinieren eine url instanz kann direkt an fetch übergeben werden und searchparams stellt sicher dass der query string korrekt kodiert ist nachdem die anfrage abgeschlossen ist wird die antwort in der regel mit json methoden verarbeitet javascript editable run const apiurl new url https jsonplaceholder typicode com posts apiurl searchparams set userid 1 query parameter to fetch posts by a specific user fetch apiurl then response response json then data console log data 0 outputs the first post by user with userid 1 moderne alternative async await async function fetchposts const apiurl new url https jsonplaceholder typicode com posts apiurl searchparams set userid 1 const response await fetch apiurl const data await response json console log data 0 outputs...