Converta attributi data in camelCase
Passi da un attributo data HTML al suo nome in dataset di JavaScript, in entrambe le direzioni: data-user-profile-id diventa userProfileId e userProfileId torna data-user-profile-id, con le stesse regole del browser. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Testo
- data-user-profile-id
- Direzione
- Attribute to property
- Produzione
- userProfileId
- Input
- data-user-profile-id
- Attributo data
- data-user-profile-id
- Proprietà dataset
- userProfileId
Gli attributi dati personalizzati HTML usano nomi come data-user-profile-id, mentre JavaScript espone lo stesso valore mediante una proprietà camelCase di dataset, come userProfileId. Questo convertitore applica le regole del browser in entrambe le direzioni, così Lei può passare dal markup al codice DOM senza indovinare la posizione dei trattini. Scelga la direzione, inserisca un nome e ottenga entrambe le forme. La conversione diretta rifiuta esplicitamente i nomi privi del prefisso obbligatorio data- e consente di individuare input incompleti prima che raggiungano l’applicazione.
Converta un attributo data HTML in una proprietà dataset
Scelga da attributo a proprietà quando parte dal markup, da un template o da un attributo copiato dagli strumenti del browser. L’input deve iniziare con data-; per esempio, data-user-profile-id diventa userProfileId. La conversione segue l’algoritmo DOM e non una regola generica di cambio maiuscole.
Prima normalizza in minuscolo le lettere ASCII maiuscole presenti nell’attributo. Dopo aver rimosso il prefisso data-, elimina ogni trattino seguito immediatamente da una lettera ASCII minuscola e rende maiuscola tale lettera. Gli altri caratteri, inclusi underscore, punti, trattini aggiuntivi, cifre e caratteri non ASCII, restano invariati.
Pertanto data-build-2-id produce build-2Id: il trattino davanti a 2 rimane, mentre quello davanti a i viene eliminato. Se manca il prefisso, viene restituito un errore anziché un risultato plausibile ma errato.
Riconverta una proprietà dataset in un attributo HTML
Scelga da proprietà ad attributo quando parte da JavaScript, per esempio element.dataset.userProfileId, e Le serve il nome corrispondente per HTML, selettori CSS, test o template lato server. Cifre e punteggiatura restano al loro posto. L’algoritmo inverso del DOM impone una condizione importante: la proprietà non può contenere già un trattino seguito da una lettera ASCII minuscola. user-profile sarebbe ambiguo, perché la conversione diretta consumerebbe il trattino e produrrebbe userProfile.
Lo strumento segnala il caso come input non valido, invece di dichiarare sicura una conversione non reversibile. Un trattino seguito da cifra, maiuscola o carattere non ASCII è invece ammesso. Il risultato mantiene entrambe le forme per agevolare controllo e copia.
Usi le regole DOM esatte, non una conversione generica
Un normale formatter camelCase considera spesso spazi, underscore, punteggiatura ripetuta e trattini come separatori equivalenti. La mappatura dataset di JavaScript è diversa: è una trasformazione precisa dei caratteri che collega attributi HTML e chiavi DOMStringMap. Applicare la regola corretta evita discrepanze sottili in selettori, gestori di eventi, analisi, test e codice di idratazione.
Per esempio, data-release--channel diventa release-Channel: il primo trattino resta perché seguito da un altro trattino, mentre il secondo scompare davanti alla c minuscola. Lei può usarla come riferimento interattivo o come convalida in generatori e pipeline di build.
Casi d'uso
Scriva accessi DOM partendo dal markup
Trasformi un attributo data-* copiato nella chiave esatta da usare dopo element.dataset in JavaScript.
Convalidi test e selettori
Mantenga attributi HTML, asserzioni dataset e selettori CSS allineati alle regole del browser.
Domande frequenti
È uguale a un convertitore generico da kebab-case a camelCase?
No. Segue le regole dei caratteri dataset del DOM e conserva segni che un convertitore generico eliminerebbe.
Perché una proprietà con trattino può essere rifiutata al ritorno?
Un trattino seguito da una minuscola ASCII viola la condizione DOM e impedisce di ottenere nuovamente lo stesso nome.
Sono ammessi cifre e underscore?
Sì. Restano invariati; cambiano solo le maiuscole ASCII e le coppie qualificanti trattino-minuscola.
Perché un nome senza data- all'inizio viene rifiutato?
Perché solo gli attributi che iniziano con data- hanno una proprietà corrispondente in dataset. Rifiutare gli altri intercetta per tempo nomi di classe, attributi comuni o frammenti incompleti prima che arrivino al suo codice.
Cosa succede con due trattini di seguito?
Sparisce solo il trattino che precede subito una lettera minuscola. In data-release--channel il primo trattino resta perché è seguito da un altro trattino, mentre il secondo cade davanti alla c: il risultato è release-Channel.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo 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)Esempio di richiesta
{
"text": "data-user-profile-id",
"direction": "attribute_to_property"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.data_attribute_camel_convert",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
timeout_sec | 30 |
max_crawl_pages | 25 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Converta un attributo data HTML in una proprietà dataset
La risposta include output e i campi espliciti data_attribute e dataset_property, utili per riconoscere senza ambiguità le due rappresentazioni.
Riconverta una proprietà dataset in un attributo HTML
Il convertitore aggiunge data-, inserisce un trattino prima di ogni lettera ASCII maiuscola e trasforma quella lettera in minuscolo. userProfileId diventa quindi data-user-profile-id, mentre apiV2Endpoint diventa data-api-v2-endpoint.
Usi le regole DOM esatte, non una conversione generica
Questa capacità è deterministica, non usa la rete, non conserva dati e restituisce lo stesso risultato nel browser e tramite API. Per automatizzare invii text e direction, interpretando invalid_input come prefisso errato o inversione non reversibile. Ogni richiesta API costa $0.002.
Casi di integrazione
Generi attributi lato server
Converta proprietà dataset di uno schema applicativo in nomi di attributi per template HTML.
Domande tecniche
Che cosa accade se l’attributo non inizia con data-?
La conversione diretta restituisce invalid_input, poiché solo gli attributi data-* corrispondono a proprietà dataset.
Quanto costa l’API?
Ogni richiesta costa $0.002. Può anche eseguire conversioni singole nel browser.