ForHosting KIT · Websites auslesen & überwachen

Data-Attribute in camelCase umwandeln

Wechseln Sie zwischen einem HTML-data-Attribut und seinem dataset-Namen in JavaScript, in beide Richtungen: Aus data-user-profile-id wird userProfileId, und userProfileId wird wieder zu data-user-profile-id, nach denselben Regeln wie im Browser. Kostenlos in Ihrem Browser.

Kostenlos
Läuft in Ihrem Browser
Ohne Anmeldung
Ihre Daten bleiben auf Ihrem Gerät

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Rechenbeispiel

Wenn Sie eingeben

Text: data-user-profile-id
Richtung: Attribute to property

Erhalten Sie

Produktionsmenge: userProfileId
Eingabe: data-user-profile-id
Data-Attribut: data-user-profile-id
Dataset-Eigenschaft: userProfileId

Benutzerdefinierte HTML-Datenattribute heißen beispielsweise data-user-profile-id, während JavaScript denselben Wert über eine camelCase-Eigenschaft von dataset wie userProfileId bereitstellt. Dieser Konverter wendet die Browserregeln in beiden Richtungen an. So wechseln Sie zwischen Markup und DOM-Code, ohne die Bindestriche erraten zu müssen. Wählen Sie die Richtung, geben Sie einen Namen ein und erhalten Sie beide Formen. Bei der Vorwärtsumwandlung werden Namen ohne das vorgeschriebene Präfix data- ausdrücklich abgelehnt, sodass unvollständige Eingaben nicht unbemerkt in Ihre Anwendung gelangen.

Ein HTML-Datenattribut in eine dataset-Eigenschaft umwandeln

Wählen Sie Attribut zu Eigenschaft, wenn Ihr Ausgangspunkt Markup, eine Vorlage oder ein aus den Browserwerkzeugen kopiertes Attribut ist. Die Eingabe muss mit data- beginnen; data-user-profile-id wird beispielsweise zu userProfileId. Die Umwandlung folgt dem DOM-Algorithmus und keiner allgemeinen Groß-/Kleinschreibungsregel.

Zunächst werden ASCII-Großbuchstaben im Attribut kleingeschrieben. Nach dem Entfernen von data- wird jeder Bindestrich, auf den unmittelbar ein kleiner ASCII-Buchstabe folgt, entfernt und dieser Buchstabe großgeschrieben. Andere Zeichen wie Unterstriche, Punkte, zusätzliche Bindestriche, Ziffern und Nicht-ASCII-Zeichen bleiben bestehen.

Deshalb ergibt data-build-2-id den Wert build-2Id: Der Bindestrich vor 2 bleibt, derjenige vor i verschwindet. Fehlt das Präfix, erscheint eine Eingabefehlermeldung statt eines irreführenden Ergebnisses.

Eine dataset-Eigenschaft zurück in ein HTML-Attribut wandeln

Wählen Sie Eigenschaft zu Attribut, wenn Sie von JavaScript wie element.dataset.userProfileId ausgehen und den Namen für HTML, CSS-Selektoren, Tests oder serverseitige Vorlagen benötigen. Der Konverter setzt data- voran, fügt vor jedem ASCII-Großbuchstaben einen Bindestrich ein und schreibt den Buchstaben klein. Ziffern und Satzzeichen behalten ihre Position.

Der umgekehrte DOM-Algorithmus hat eine wichtige Vorbedingung: Der Eigenschaftsname darf keinen Bindestrich enthalten, dem ein kleiner ASCII-Buchstabe folgt. user-profile wäre mehrdeutig, weil die Vorwärtsumwandlung den Bindestrich entfernen und userProfile liefern würde. Das Werkzeug meldet dies als ungültige Eingabe, statt eine sichere Umkehrbarkeit vorzutäuschen. Ein Bindestrich vor einer Ziffer, einem Großbuchstaben oder Nicht-ASCII-Zeichen ist zulässig.

Das Ergebnis zeigt erneut beide Formen zum einfachen Prüfen und Kopieren.

Exakte DOM-Regeln statt allgemeiner Schreibweisenkonvertierung nutzen

Ein allgemeiner camelCase-Formatierer behandelt Leerzeichen, Unterstriche, wiederholte Satzzeichen und Bindestriche häufig als gleichwertige Worttrenner. Das JavaScript-dataset-Mapping tut dies nicht. Es ist eine genau festgelegte Zeichentransformation zwischen HTML-Attributen und DOMStringMap-Schlüsseln.

Die korrekte Regel verhindert unauffällige Abweichungen in Selektoren, Ereignisbehandlung, Analysen, Testdaten und Hydratisierungscode. data-release--channel wird etwa zu release-Channel: Der erste Bindestrich bleibt, weil ein weiterer folgt; der zweite verschwindet vor dem kleinen c. Sie eignet sich als interaktive Referenz sowie als Prüfschritt in Generatoren oder Build-Pipelines.

Anwendungsfälle

DOM-Zugriff aus Markup erstellen

Wandeln Sie ein kopiertes data-*-Attribut in den genauen JavaScript-Schlüssel hinter element.dataset um.

Serverseitige Attribute erzeugen

Überführen Sie dataset-Eigenschaften eines Anwendungsschemas in Attributnamen für HTML-Vorlagen.

Tests und Selektoren prüfen

Stimmen Sie HTML-Attribute, dataset-Prüfungen und CSS-Selektoren mit den Browserregeln ab.

Häufige Fragen

Ist dies ein allgemeiner Konverter von kebab-case zu camelCase?

Nein. Er befolgt die DOM-Zeichenregeln für dataset und bewahrt Zeichen, die allgemeine Konverter entfernen könnten.

Warum kann eine Eigenschaft mit Bindestrich rückwärts abgelehnt werden?

Ein Bindestrich vor einem kleinen ASCII-Buchstaben verletzt die DOM-Vorbedingung und verhindert die identische Rückwandlung.

Werden Ziffern und Unterstriche unterstützt?

Ja. Sie bleiben erhalten; nur ASCII-Großbuchstaben und passende Bindestrich-Kleinbuchstaben-Paare ändern sich.

Warum wird ein Name ohne data- am Anfang abgelehnt?

Weil nur Attribute, die mit data- beginnen, eine passende Eigenschaft in dataset haben. Die Ablehnung aller anderen fängt Klassennamen, gewöhnliche Attribute oder unvollständige Schnipsel ab, bevor sie in Ihren Code gelangen.

Was passiert mit zwei Bindestrichen hintereinander?

Entfernt wird nur der Bindestrich direkt vor einem Kleinbuchstaben. In data-release--channel bleibt der erste stehen, weil ein weiterer Bindestrich folgt, der zweite fällt vor dem c weg: Das Ergebnis ist release-Channel.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

POSThttps://api.kit.forhosting.com/web/data-attribute-camel-convert

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem Stack

curl -X POST https://api.kit.forhosting.com/web/data-attribute-camel-convert \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"text":"data-user-profile-id","direction":"attribute_to_property"}'

const res = await fetch("https://api.kit.forhosting.com/web/data-attribute-camel-convert", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "text": "data-user-profile-id",
    "direction": "attribute_to_property"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/data-attribute-camel-convert",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "text": "data-user-profile-id",
    "direction": "attribute_to_property"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/data-attribute-camel-convert", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"text":"data-user-profile-id","direction":"attribute_to_property"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"text":"data-user-profile-id","direction":"attribute_to_property"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/data-attribute-camel-convert", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "text": "data-user-profile-id",
  "direction": "attribute_to_property"
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.data_attribute_camel_convert",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

`timeout_sec`	30
`max_crawl_pages`	25

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Technische Hinweise

Ein HTML-Datenattribut in eine dataset-Eigenschaft umwandeln

Die Antwort enthält output sowie die eindeutig benannten Felder data_attribute und dataset_property, damit Menschen und Programme beide Darstellungen zuverlässig erkennen.

Eine dataset-Eigenschaft zurück in ein HTML-Attribut wandeln

So wird userProfileId zu data-user-profile-id und apiV2Endpoint zu data-api-v2-endpoint.

Exakte DOM-Regeln statt allgemeiner Schreibweisenkonvertierung nutzen

Diese Funktion arbeitet deterministisch, nutzt kein Netzwerk, speichert nichts und liefert im Browser und über die API dasselbe Ergebnis. Senden Sie zur Automatisierung text und direction. invalid_input weist auf ein falsches Präfix oder eine nicht umkehrbare Rückrichtung hin. Jede API-Anfrage kostet $0.002.

Technische Fragen

Was geschieht, wenn das Attribut nicht mit data- beginnt?

Die Vorwärtsumwandlung liefert invalid_input, da nur data-*-Attribute dataset-Eigenschaften zugeordnet werden.

Was kostet die API?

Jede Anfrage kostet $0.002. Einzelne Umwandlungen können Sie auch im Browser ausführen.

Vollständige KIT-Dokumentation lesen →

Data-Attribute in camelCase umwandeln

Im Browser ausführen – kostenlos

Rechenbeispiel

Ein HTML-Datenattribut in eine dataset-Eigenschaft umwandeln

Eine dataset-Eigenschaft zurück in ein HTML-Attribut wandeln

Exakte DOM-Regeln statt allgemeiner Schreibweisenkonvertierung nutzen

Anwendungsfälle

DOM-Zugriff aus Markup erstellen

Serverseitige Attribute erzeugen

Tests und Selektoren prüfen

Häufige Fragen

Verwandte Tools

Für Entwickler — API-Zugang

Endpunkt

Aufruf aus Ihrem Stack

Beispiel-Anfrage

Beispiel-Antwort

Preis

Limits

Fehler

Technische Hinweise

Ein HTML-Datenattribut in eine dataset-Eigenschaft umwandeln

Eine dataset-Eigenschaft zurück in ein HTML-Attribut wandeln

Exakte DOM-Regeln statt allgemeiner Schreibweisenkonvertierung nutzen

Technische Fragen

danke