Convertissez les attributs data en camelCase
Passez d'un attribut data HTML à son nom dans dataset en JavaScript, dans les deux sens : data-user-profile-id devient userProfileId, et userProfileId redevient data-user-profile-id, selon les règles mêmes du navigateur. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Texte
- data-user-profile-id
- Direction
- Attribute to property
- Production
- userProfileId
- Entrée
- data-user-profile-id
- Attribut data
- data-user-profile-id
- Propriété dataset
- userProfileId
Les attributs de données HTML emploient des noms comme data-user-profile-id, tandis que JavaScript expose la même valeur avec une propriété camelCase de dataset, telle que userProfileId. Ce convertisseur applique les règles du navigateur dans les deux sens : vous passez ainsi du balisage au code DOM sans deviner la place des tirets. Choisissez le sens, saisissez un nom et obtenez les deux formes. La conversion directe refuse explicitement tout nom dépourvu du préfixe data- obligatoire, ce qui permet de repérer une entrée incomplète avant son arrivée dans votre application.
Convertissez un attribut data HTML en propriété dataset
Choisissez attribut vers propriété si vous partez d’un balisage, d’un modèle ou d’un attribut copié depuis les outils du navigateur. La saisie doit commencer par data- : data-user-profile-id devient par exemple userProfileId. La conversion suit l’algorithme DOM, et non une simple règle de casse.
Les majuscules ASCII du nom sont d’abord normalisées en minuscules. Une fois le préfixe data- retiré, chaque tiret immédiatement suivi d’une minuscule ASCII disparaît et cette lettre passe en majuscule. Les autres caractères — traits de soulignement, points, tirets supplémentaires, chiffres et caractères non ASCII — restent inchangés.
Ainsi, data-build-2-id donne build-2Id : le tiret avant 2 demeure, contrairement à celui qui précède i. Sans le préfixe requis, un message d’erreur remplace tout résultat trompeur.
Reconvertissez une propriété dataset en attribut HTML
Choisissez propriété vers attribut si vous partez de JavaScript, par exemple element.dataset.userProfileId, et souhaitez produire le nom destiné au HTML, aux sélecteurs CSS, aux tests ou aux modèles serveur. Les chiffres et la ponctuation restent en place. L’algorithme inverse du DOM impose toutefois une condition : la propriété ne doit pas déjà comporter un tiret suivi d’une minuscule ASCII. user-profile serait ambigu, car le parcours direct supprimerait le tiret et restituerait userProfile.
L’outil signale cette situation comme une entrée non valide au lieu de prétendre garantir un aller-retour. Un tiret suivi d’un chiffre, d’une majuscule ou d’un caractère non ASCII reste accepté. Le résultat présente les deux formes pour faciliter la vérification et la copie.
Appliquez les règles DOM exactes plutôt qu’un changement de casse générique
Un formateur camelCase général traite souvent espaces, traits de soulignement, ponctuation répétée et tirets comme des séparateurs équivalents. Le mappage dataset de JavaScript est plus précis : cette transformation relie les attributs HTML aux clés DOMStringMap caractère par caractère. Respecter cette règle évite des écarts subtils dans les sélecteurs, gestionnaires d’événements, outils analytiques, tests et procédures d’hydratation.
Ainsi, data-release--channel devient release-Channel : le premier tiret subsiste, car un autre tiret le suit, tandis que le second disparaît devant la minuscule c. Vous pouvez l’utiliser comme référence interactive ou comme contrôle dans un générateur et une chaîne de compilation.
Cas d’usage
Écrire un accès DOM depuis le balisage
Transformez un attribut data-* copié en clé exacte à placer après element.dataset dans JavaScript.
Générer des attributs côté serveur
Convertissez les propriétés dataset d’un schéma applicatif en noms d’attributs pour vos modèles HTML.
Valider les tests et sélecteurs
Alignez attributs HTML, assertions dataset et sélecteurs CSS sur les règles du navigateur.
Questions fréquentes
Est-ce un simple convertisseur de kebab-case vers camelCase ?
Non. Il respecte les règles de caractères du dataset DOM et préserve les signes qu’un outil générique supprimerait.
Pourquoi une propriété avec tiret peut-elle être refusée au retour ?
Un tiret suivi d’une minuscule ASCII enfreint la condition DOM et empêche de retrouver exactement le même nom.
Les chiffres et traits de soulignement sont-ils acceptés ?
Oui. Ils sont conservés ; seules les majuscules ASCII et certaines paires tiret-minuscule changent.
Pourquoi un nom sans data- au début est-il refusé ?
Parce que seuls les attributs qui commencent par data- ont une propriété équivalente dans dataset. Refuser les autres repère à temps les noms de classe, les attributs ordinaires ou les extraits incomplets avant qu'ils n'atteignent votre code.
Que deviennent deux tirets à la suite ?
Seul le tiret placé juste avant une lettre minuscule disparaît. Dans data-release--channel, le premier tiret reste car il est suivi d'un autre tiret, et le second s'efface devant le c : on obtient release-Channel.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre 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)Exemple de requête
{
"text": "data-user-profile-id",
"direction": "attribute_to_property"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.data_attribute_camel_convert",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Convertissez un attribut data HTML en propriété dataset
La réponse fournit output ainsi que data_attribute et dataset_property, afin que les utilisateurs et les scripts identifient clairement chaque représentation.
Reconvertissez une propriété dataset en attribut HTML
L’outil ajoute data-, place un tiret devant chaque majuscule ASCII puis transforme cette lettre en minuscule. userProfileId devient donc data-user-profile-id, et apiV2Endpoint devient data-api-v2-endpoint.
Appliquez les règles DOM exactes plutôt qu’un changement de casse générique
Cette capacité déterministe ne sollicite aucun réseau, ne conserve rien et produit le même résultat dans le navigateur et via l’API. Pour automatiser, envoyez text et direction, puis interprétez invalid_input comme un préfixe incorrect ou une inversion non réversible. Chaque requête API coûte $0.002.
Questions techniques
Que se passe-t-il si l’attribut ne commence pas par data- ?
La conversion directe renvoie invalid_input, car seuls les attributs data-* correspondent aux propriétés dataset.
Quel est le prix de l’API ?
Chaque requête coûte $0.002. Vous pouvez aussi effectuer une conversion ponctuelle dans le navigateur.