How to Convert Title to URL Slug using JavaScript ? - GeeksforGeeks

10 Oct, 2021
Given a title and the task is to convert title into URL slug using JavaScript. In this article, we will use HTML to design the basic structure of body, CSS is used to set the style of 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 title and output for URL slug with unique ids.
Add some CSS style to the element.
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-ouput">                    Generated URL Slug                </span>:                <span id="slug-target-span"></span>            </p>         </fieldset>    </form></body> </html>
Here, we have used the replace() function in JavaScript to make a string slug.
The created slug string can be further used in URLs.
Below is the JavaScript Code implementation: 
Javascript
<script>    function myFunction() {         var a = document.getElementById("slug-source").value;         var b = a.toLowerCase().replace(/ /g, '-')            .replace(/[^\w-]+/g, '');         document.getElementById("slug-target").value = b;         document.getElementById("slug-target-span").innerHTML = b;    }</script>
Example: In this example, we will combine the above two sections of code (HTML and JavaScript code) to convert title into URL slug.
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-ouput">Generated URL Slug</span>:                <span id="slug-target-span"></span>            </p>          </fieldset>    </form>     <script type="text/javascript">        function myFunction() {             var a = document.getElementById("slug-source").value;             var b = a.toLowerCase().replace(/ /g, '-')                .replace(/[^\w-]+/g, '');             document.getElementById("slug-target").value = b;             document.getElementById("slug-target-span").innerHTML = b;        }    </script></body> </html>
Output:
adnanirshad158
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to set space between the flexbox ?
HTML Cheat Sheet - A Basic Guide to HTML
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?