Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Convert Title to URL Slug Using JavaScript
Overview
The conversion of a title to URL Slug is also known as to "Slugify" a title. An URL Slug refers to a title which is descriptive by itself and is easy to read. It is attached to the URL of a page which tells about the current page as the slug is self-descriptive. So to convert a title to slug using JavaScript can be achieved using certain JavaScript functions such as toLowerCase(), replace(), trim().
Algorithm
Step 1 ? Create a HTML page with two input tags and add the id attribute in it as "title" and "urlSlug" respectively, the first input element will receive the input from the users as a title and another tag will display the URL Slug. Also create a HTML button "<button>" with a onclick() event which contains a function "convert()".
Step 2 ? Now create a "convert()" arrow function as an internal JavaScript of HTML page.
convert=()=>{}
Step 3 ? Access the value of first input tag with the id as "document.getElementById("title")".value and store the value in a variable.
document.getElementById('title').value;
Step 4 ? CConvert the value received from the title to LowerCase using the "toLowerCase()" function of string. "t" is a variable in which the title is received.
t.toLowerCase();
Step 5 ? Now use the "trim()" function to remove the leading and trailing spaces from the title.
t.trim();
Step 6 ? Replace all the spaces of title with "-" dash, using "replace()" function with a pattern
title with "-" dash, using "replace()" function with a pattern t.replace(/[^a-z0-9]+/g, '-');
Step 7 ? URL Slug is ready, displayed on a browser screen.
document.getElementById('urlSlug').value = slug;
Example
In this example we have taken a title from the user as input. When the user inputs any title and clicks on the button, the convert() function is triggered which changes the title value to the lowercase and then all the leading and trailing spaces of the title. Then in the given title, the spaces are replaced by dash (-) and the URL Slug is displayed on the browser readonly input tag.
<html lang="en">
<head>
<title>Convert title to URL Slug</title>
</head>
<body>
<h3>Title to URL Slug Conversion</h3>
<label>Title:</label>
<input type="text" id="title" value="" placeholder="Enter title here"> <br />
<label>URL Slug:</label>
<input type="text" id="urlSlug" style="margin:0.5rem 0;border-radius:5px;border:transparent;padding: 0.4rem;color: green;" placeholder="Slug will appear here..." readonly><br />
<button onclick="convert()" style="margin-top: 0.5rem;">Covert Now</button>
<script>
// This function converts the title to URL Slug
convert = () => {
var t = document.getElementById('title').value;
t = t.toLowerCase(); //t is the title received
t = t.trim(); // trim the spaces from start and end
var slug = t.replace(/[^a-z0-9]+/g, '-'); // replace all the spaces with "-"
document.getElementById('urlSlug').value = slug;
document.getElementById('urlSlug').style.border="0.1px solid green";
}
</script>
</body>
</html>
In the output of the above example the user has entered a title as "tutorial point articles ". On clicking convert now the title is converted to the URL Slug as "tutorial-point-articles". In which the trailing space is being removed using trim() function and the spaces a replaced from hyphens.
Conclusion
The Uniform Resource Locator (URL) Slug helps to improve the search ranking of the page. So the URL Slug is must in the URL and as all the words in the URL are in the lower case so the title is also first converted to lowercase. To watch out for the slug in the URL just take any article, blog or any other content of the website, observe the endpoint of the URL if it would in a sentence then it would be written in the same format as we had seen in the above example.
1K+ Views
