ForHosting KIT · قراءة المواقع ومراقبتها

تحويل سمات data إلى camelCase

انتقل بين سمة data في HTML واسمها في dataset بلغة JavaScript في الاتجاهين: يصبح data-user-profile-id بصيغة userProfileId، ويمكن عكس التحويل للعودة إلى الاسم الأصلي، وفق القواعد نفسها التي يطبقها المتصفح. مجاني في متصفحك.

مجاني
يعمل في متصفحك
دون تسجيل
بياناتك لا تغادر جهازك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

مثال محلول

إذا أدخلت

النص: data-user-profile-id
الاتجاه: Attribute to property

تحصل على

الإنتاج: userProfileId
المُدخَل: data-user-profile-id
سمة data: data-user-profile-id
خاصية dataset: userProfileId

تستخدم سمات البيانات المخصصة في HTML أسماء مثل data-user-profile-id، بينما تعرض JavaScript القيمة نفسها عبر خاصية camelCase في dataset مثل userProfileId. يطبق هذا المحول قواعد المتصفح في الاتجاهين، لكي تنتقلوا بين الشيفرة الترميزية وشيفرة DOM من دون تخمين مواضع الشرطات. اختاروا الاتجاه وأدخلوا الاسم لتحصلوا على الصيغتين. يرفض التحويل الأمامي صراحة أي اسم لا يبدأ بالبادئة الإلزامية data-، مما يساعدكم على اكتشاف السمات العادية أو المدخلات الناقصة قبل وصولها إلى التطبيق.

حوّلوا سمة data في HTML إلى خاصية dataset

اختاروا اتجاه السمة إلى الخاصية عندما تكون نقطة البداية شيفرة HTML أو قالباً أو سمة منسوخة من أدوات المطور في المتصفح. يجب أن يبدأ الإدخال بالبادئة data-؛ فمثلاً تتحول data-user-profile-id إلى userProfileId. يتبع التحويل خوارزمية DOM ولا يستخدم قاعدة عامة لتغيير حالة الأحرف.

أولاً يحول أحرف ASCII الكبيرة في اسم السمة إلى صغيرة. وبعد حذف البادئة data-، يحذف كل شرطة تليها مباشرةً قيمة ASCII صغيرة ويحول ذلك الحرف إلى كبير. تبقى الرموز الأخرى كما هي، ومنها الشرطة السفلية والنقطة والشرطات الإضافية والأرقام والأحرف غير ASCII.

لذلك تصبح data-build-2-id بالشكل build-2Id: تبقى الشرطة قبل 2، بينما تحذف الشرطة قبل i. إذا غابت البادئة، تظهر رسالة إدخال غير صالح بدلاً من نتيجة تبدو صحيحة وهي خاطئة.

أعيدوا خاصية dataset إلى سمة HTML

اختاروا اتجاه الخاصية إلى السمة عندما تبدأون من JavaScript مثل element.dataset.userProfileId وتحتاجون إلى الاسم المقابل في HTML أو محددات CSS أو الاختبارات أو قوالب الخادم. يضيف المحول data-، ثم يضع شرطة قبل كل حرف ASCII كبير ويحوله إلى حرف صغير. تبقى الأرقام وعلامات الترقيم في مواضعها.

لخوارزمية DOM العكسية شرط مهم: يجب ألا يحتوي اسم الخاصية مسبقاً على شرطة يليها حرف ASCII صغير. فالاسم user-profile ملتبس لأن التحويل الأمامي سيحذف الشرطة ويعيد userProfile، لا الاسم الأصلي. تبلغ الأداة عن هذه الحالة كإدخال غير صالح بدلاً من الادعاء بأن التحويل قابل للعكس بأمان.

أما الشرطة التي يليها رقم أو حرف كبير أو حرف غير ASCII فتبقى مقبولة. يعرض الناتج الصيغتين معاً لتسهيل المقارنة والنسخ.

استخدموا قواعد DOM الدقيقة بدلاً من تحويل حالة عام

غالباً ما تعامل أدوات camelCase العامة المسافات والشرطات السفلية وعلامات الترقيم المتكررة والشرطات كفواصل كلمات متساوية. أما ربط dataset في JavaScript فلا يفعل ذلك؛ فهو تحويل محدد للأحرف يصل بين سمات HTML ومفاتيح DOMStringMap. يمنع تطبيق القاعدة الدقيقة اختلافات خفية في المحددات ومعالجات الأحداث وأدوات التحليل والاختبارات وشيفرة التهيئة.

على سبيل المثال، تتحول data-release--channel إلى release-Channel: تبقى الشرطة الأولى لأن شرطة أخرى تليها، وتحذف الثانية لأن الحرف الصغير c يليها. يمكنكم استخدامها كمرجع تفاعلي سريع أو خطوة تحقق في مولدات الشيفرة ومسارات البناء.

حالات الاستخدام

اكتبوا وصول DOM انطلاقاً من HTML

حوّلوا سمة data-* منسوخة إلى المفتاح الدقيق المطلوب بعد element.dataset في JavaScript.

أنشئوا السمات على الخادم

حوّلوا خصائص dataset في مخطط التطبيق إلى أسماء سمات صالحة لقوالب HTML.

تحققوا من الاختبارات والمحددات

حافظوا على توافق سمات HTML وتوكيدات dataset ومحددات CSS مع قواعد المتصفح.

الأسئلة الشائعة

هل يطابق محولاً عاماً من kebab-case إلى camelCase؟

لا. فهو يتبع قواعد أحرف dataset في DOM ويحافظ على الرموز التي قد يحذفها محول عام.

لماذا قد ترفض خاصية ذات شرطة في التحويل العكسي؟

تخالف الشرطة التي يليها حرف ASCII صغير شرط DOM، ولن يعود التحويل إلى اسم الخاصية نفسه.

هل يدعم الأرقام والشرطات السفلية؟

نعم. تبقى كما هي؛ ولا تتغير إلا أحرف ASCII الكبيرة وأزواج الشرطة والحرف الصغير المطابقة.

لماذا يُرفض الاسم الذي لا تكون بدايته data-؟

لأن السمات التي تبدأ بالبادئة data- وحدها لها خاصية مقابلة في dataset. ورفض غيرها يكشف مبكرًا أسماء الفئات والسمات العادية والمقاطع الناقصة قبل أن تصل إلى شيفرتك.

ماذا يحدث مع شرطتين متتاليتين؟

لا تُحذف إلا الشرطة التي تسبق حرفًا صغيرًا مباشرة. في data-release--channel تبقى الشرطة الأولى لأن بعدها شرطة أخرى، وتُحذف الثانية قبل الحرف c، فتكون النتيجة release-Channel.

أدوات ذات صلة

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

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

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

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)

مثال على الطلب

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

مثال على الاستجابة

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

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`timeout_sec`	30
`max_crawl_pages`	25

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

ملاحظات تقنية

حوّلوا سمة data في HTML إلى خاصية dataset

تتضمن الاستجابة output والحقلين الواضحين data_attribute وdataset_property، بحيث يستطيع المستخدم والبرنامج تمييز الصيغتين بلا اعتماد على ترتيب الحقول.

أعيدوا خاصية dataset إلى سمة HTML

وهكذا تصبح userProfileId بالشكل data-user-profile-id، وتصبح apiV2Endpoint بالشكل data-api-v2-endpoint.

استخدموا قواعد DOM الدقيقة بدلاً من تحويل حالة عام

تعمل هذه القدرة بصورة حتمية، ولا تستخدم الشبكة ولا تخزن البيانات، وتعطي النتيجة نفسها في المتصفح وعبر API. عند الأتمتة، أرسلوا الحقلين text وdirection، وتعاملوا مع invalid_input كإشارة إلى بادئة خاطئة أو تحويل عكسي غير قابل للاسترجاع. تبلغ كلفة كل طلب API مقدار $0.002.

أسئلة تقنية

ماذا يحدث إذا لم تبدأ السمة بالبادئة data-؟

يعيد التحويل الأمامي invalid_input، لأن سمات data-* وحدها تقابل خصائص dataset.

ما كلفة API؟

تبلغ كلفة كل طلب $0.002. ويمكنكم أيضاً إجراء التحويلات الفردية في المتصفح.

اطّلع على توثيق KIT الكامل ←

شغّل الأداة مجانًا

مثال محلول

حوّلوا سمة data في HTML إلى خاصية dataset

أعيدوا خاصية dataset إلى سمة HTML

استخدموا قواعد DOM الدقيقة بدلاً من تحويل حالة عام

حالات الاستخدام

اكتبوا وصول DOM انطلاقاً من HTML

أنشئوا السمات على الخادم

تحققوا من الاختبارات والمحددات

الأسئلة الشائعة

أدوات ذات صلة

للمطوّرين — الوصول عبر API

الـEndpoint

استدعِ الخدمة من بيئتك

مثال على الطلب

مثال على الاستجابة

الأسعار

الحدود

الأخطاء

ملاحظات تقنية

حوّلوا سمة data في HTML إلى خاصية dataset

أعيدوا خاصية dataset إلى سمة HTML

استخدموا قواعد DOM الدقيقة بدلاً من تحويل حالة عام

أسئلة تقنية

شكرًا