How to Convert Title to URL Slug using JavaScript ?

Last Updated : 08 Mar, 2024

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;
}