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>GeeksforGeeks</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.