نص إلى kebab-case
حوّل النص إلى تنسيق kebab-case.
كيفية استخدام نص إلى kebab-case
- 1Paste your text (any format: spaces, camelCase, underscores)
- 2Conversion happens instantly
- 3Copy the kebab-case result
حول نص إلى kebab-case
kebab-case Converter transforms your text into the kebab-case naming convention where words are lowercased and connected by hyphens. This format is the standard for CSS class names, HTML data-attributes, file names, URL path segments, and front-end component slugs.
The converter intelligently detects word boundaries in any input format — plain text with spaces, camelCase, PascalCase, snake_case, or Title Case — and correctly splits them into lowercase hyphenated words. For example, "getUserProfile" becomes "get-user-profile" and "My Component Name" becomes "my-component-name".
Conversion runs in real time with no server required. Unlike URL slugs, kebab-case does not strip accented characters — it focuses on word boundary detection and hyphenation for code identifiers.
المميزات الرئيسية لـ نص إلى kebab-case
- Converts any text format to lowercase hyphenated kebab-case
- Detects camelCase and PascalCase word boundaries automatically
- Handles snake_case, Title Case, and plain text input
- Instant real-time conversion as you type
- One-click copy button for the converted result
- Download result as a plain .txt file
- Collapses consecutive hyphens to a single hyphen
- Runs entirely in-browser with no data transmission
الصيغ المدعومة
صيغ الإدخال
صيغ الإخراج
All word boundaries are detected regardless of input format. Consecutive hyphens are collapsed to one.
أمثلة
Convert a camelCase JavaScript variable to a CSS class name
Transform a JavaScript identifier into its CSS class name equivalent.
المدخلات
getUserProfileData
النتيجة
get-user-profile-data
Convert a plain text component description to a kebab-case slug
Generate a kebab-case identifier from a human-readable component name.
المدخلات
Primary Navigation Menu
النتيجة
primary-navigation-menu
حالات الاستخدام الشائعة
- Creating CSS class names from design system component names
- Generating HTML data-attribute names from plain English descriptions
- Converting component names to kebab-case for Vue or Web Components
- Creating kebab-case file names from camelCase module names
- Generating URL path segment slugs for API endpoint naming
- Converting PascalCase class names to kebab-case for BEM methodology
استكشاف الأخطاء
Expecting acronyms like "API" to stay uppercase
الحل
kebab-case lowercases everything, so "APIResponse" becomes "a-p-i-response" or "api-response" depending on how word boundaries are detected. Manually edit acronyms in the output if you need specific treatment.
Consecutive hyphens appearing in the output
الحل
The converter collapses consecutive hyphens to a single one. If you see doubled hyphens in the output, check for special characters or spaces that are being converted to hyphens side by side.
Numbers not being separated from adjacent words
الحل
Number-to-letter transitions may not always be detected as word boundaries depending on the input format. If "button3" should become "button-3", add the word separation manually in the input before converting.
الأسئلة الشائعة
What is kebab-case used for?
kebab-case is the standard naming convention for CSS class names, HTML data-attributes (data-user-id), file names, URL path segments, and identifiers in frameworks like Vue.js that use custom HTML elements. It is also used in some API endpoint naming conventions.
What input formats does it accept?
The converter accepts plain text with spaces, camelCase (getUserName), PascalCase (GetUserName), snake_case (get_user_name), and Title Case (Get User Name). All word boundaries are detected automatically.
What is the difference between kebab-case and a URL slug?
Both use lowercase letters and hyphens, but URL slug generation also strips accents, removes non-ASCII characters, and collapses special characters. kebab-case is for code identifiers and preserves more characters. Use slug for URLs; use kebab-case for code.
Does it handle numbers?
Yes. Numbers are preserved in the output. A word like "button3" will typically output as "button3" (one token) unless there is a space or other separator before the number in the input.
What happens to special characters and punctuation?
Special characters and punctuation are removed or replaced with hyphens during conversion. Only lowercase letters, digits, and hyphens are present in the output.
Is there a length limit?
No. Conversion runs locally in your browser with no server overhead. Identifiers and text of any length are converted instantly.
Is my text sent to a server?
No. All conversion runs in client-side JavaScript. Your text is never uploaded, stored, or transmitted to any server.
Does it work with multilingual text?
The converter processes word boundaries based on character type transitions (letter-to-uppercase, letter-to-underscore, etc.). Non-Latin characters are included in the output but are lowercased. For ASCII-only output, remove accents first using the Remove Accents tool.