Skip to content
Related Articles

Related Articles

How to Convert Title to URL Slug using JavaScript ?
  • Last Updated : 09 Sep, 2020

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:

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-ouput {
            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-ouput {
            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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :