Open In App
Related Articles

How to Convert Title to URL Slug using JavaScript ?

Improve Article
Save Article
Like Article

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.


  • HTML Basics
  • JavaScript Basics

Basically below program will convert a title into a URL Slug using JavaScript.


  • 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:


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;


<!DOCTYPE html>
        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;
        <fieldset class="slugify">
            <label for="slug-source">
                  Input Title:
            <input type="text" value=""
                   id="slug-source" />
            <label for="slug-target">
                  URL Slug:
            <input type="text" value=""
                   id="slug-target" />
            <button type="button"
                <span class="slug-output">
                    Generated URL Slug
                <span id="slug-target-span"></span>

Output: Click here to check the live Output.

Last Updated : 02 Aug, 2023
Like Article
Save Article
Similar Reads
Related Tutorials