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.

Brijpal Sharma is a web developer with a passion for writing tech tutorials. Learn JavaScript and other web development technology.