Create A Slug Using Jquery

by

In this blog post, we create a slug of string or title using Jquery. The slug is commonly used to represent the URL. Which is important for SEO.

Here we use replace() method of jquery. The replace() the method returns a new string with some or all matches of a pattern replaced by a replacement.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create A Slug Using Jquery</title>
   
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>

  <input type="text" id="input_value" />
  <a class="create_slug" href="javascript:void(0);">Create Slug</a>
    

  
</body>
</html>

Jquery

$('.create_slug').on('click', function(){
    var Text = $('#input_value').val();
    var slug = Text.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
    alert(slug);
});

Result

this-is-title

I hope I will help you.