Given a title and the task is to convert the title into a URL slug using JavaScript. In this article, we will use HTML to design the basic structure of the body, CSS is used to set the style of the body, and JavaScript is used to implement the logic structure.
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.
- The created slug string can be further used in URLs.
Example: Below is the basic HTML code implementation:
Javascript
function myFunction() {
const a = document.getElementById("slug-source").value;
const b = a.toLowerCase().replace(/ /g, '-')
.replace(/[^\w-]+/g, '');
document.getElementById("slug-target").value = b;
document.getElementById("slug-target-span").innerHTML = b;
}
|
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>
|
Output: Click here to check the live Output.
