-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathslug-generator.html
48 lines (41 loc) · 1.88 KB
/
slug-generator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slugify: Create SEO-Friendly Slugs</title>
<meta name="description" content="Generate SEO-friendly URL slugs. Ideal for bloggers, content creators, and web developers aiming for better search engine rankings.">
</head>
<body>
<h1>Slugify: Create SEO-Friendly Slugs</h1>
<label for="text-input">Enter Your Text:</label>
<input id="text-input" type="text" placeholder="Example: How to login to a WordPress site.">
<label for="separator-select">Choose Separator:</label>
<select id="separator-select">
<option value="-">Dash (-)</option>
<option value="_">Underscore (_)</option>
</select>
<button id="generate-slug">Generate Slug</button>
<div>
<strong>Generated Slug:</strong>
<span id="generated-slug"></span>
</div>
<p>This tool is brought to you by <a href="https://toolzr.com" target="_blank">Toolzr</a> and is open source, licensed under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a>. The online version can be found at <a href="https://toolzr.com/slug-generator" target="_blank">toolzr.com/slug-generator</a>.</p>
<script>
document.getElementById('generate-slug').addEventListener('click', function() {
const text = document.getElementById('text-input').value;
const separator = document.getElementById('separator-select').value;
const slug = slugify(text, separator);
document.getElementById('generated-slug').textContent = slug;
});
function slugify(text, separator = '-') {
return text
.toString()
.toLowerCase()
.trim()
.replace(/\s+/g, separator) // Replace spaces with the separator
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(new RegExp('\\' + separator + '+', 'g'), separator); // Replace multiple separators with a single one
}
</script>
</body>
</html>