How to Convert Title to URL Slug using JavaScript ?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


  • 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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Example: In this example, we will combine the above two sections of code (HTML and JavaScript code) to convert title into URL slug.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.