How to Convert Title to URL Slug using JavaScript ?
Converting a title to a URL slug in JavaScript involves transforming the input text into a format suitable for URLs. This typically entails replacing spaces with dashes, removing special characters, and ensuring lowercase consistency for compatibility and readability in web addresses.
Prerequisite
- HTML Basics
- JavaScript Basics
Basically below program will convert a title into a URL Slug using JavaScript.
Approach
- Create an HTML form with input for the title and output for the URL slug with unique IDs.
- Add some CSS style to the element.
- Here, we have used the replace() function in JavaScript to make a string slug.
- Here, we use the trim() method to remove extra spaces from the input.
- The created slug string can be further used in URLs.
Example: Below is the basic HTML code implementation:
HTML
<!DOCTYPE html> < html > < head > < style > fieldset.slugify { color: #515151; border: 1px solid #ccc; padding: 15px; } .slugify legend { font-size: 16px; font-weight: 600; padding: 0 10px; } .slugify input { display: block; padding: 8px; margin: 8px; } .slug-output { color: #05ab13; font-size: 20px; font-weight: 500; } </ style > </ head > < body > < form > < fieldset class = "slugify" > < legend >w3wiki</ legend > < label for = "slug-source" > Input Title: </ label > < input type = "text" value = "" id = "slug-source" /> < label for = "slug-target" > URL Slug: </ label > < input type = "text" value = "" id = "slug-target" /> < button type = "button" onClick = "myFunction()" > Convert </ button > < p > < span class = "slug-output" > Generated URL Slug </ span >: < span id = "slug-target-span" ></ span > </ p > </ fieldset > </ form > </ body > </ html > |
Javascript
function myFunction() { const a = document.getElementById( "slug-source" ).value.trim().replace(/\s+/g, " " );; const b = a.toLowerCase().replace(/ /g, '-' ) .replace(/[^\w-]+/g, '' ); document.getElementById( "slug-target" ).value = b; document.getElementById( "slug-target-span" ).innerHTML = b; } |
Output: Click here to check the live Output.
Contact Us