72 lines
3.7 KiB
PHP
72 lines
3.7 KiB
PHP
<section class="diZContainer diZmxAuto diZmy8">
|
|
<h1 class="diZBorderBottom">Slug Generator</h1>
|
|
<p class="diZTextJustify">The Slug Generator tool allows you to easily create SEO-friendly slugs from your input text. A slug is a URL-friendly version of a string, typically used in web addresses to identify a specific page or resource. This tool converts any text you input into a lowercase string, removes special characters, and replaces spaces with hyphens to generate a clean and readable URL slug.</p>
|
|
<div class="diZMaxW600 diZmxAuto diZmy20 diZFlexColumn toolsSection">
|
|
<textarea class="diZTextAreaResizeNone" placeholder="Enter text" id="inputText" rows="6"></textarea> <br>
|
|
<button class="diZmxAuto" onclick="generateSlug()"><span>Generate Slug</span></button>
|
|
<p id="copied-notice" class="diZDisplayNone"></p>
|
|
<textarea id="slugOutput" class="diZTextAreaResizeNone diZDisplayNone diZmy4" rows="6"></textarea>
|
|
<button id="copyBtn" class="diZDisplayNone diZmxAuto" onclick="copyToClipboard()"><span>Copy Slug</span></button>
|
|
</div>
|
|
<div>
|
|
<h3>Usage:</h3>
|
|
<ul>
|
|
<li><strong>Enter Text:</strong> Input your desired text into the text area provided.</li>
|
|
<li><strong>Generate Slug:</strong> Click the "Generate Slug" button to convert the text into a URL-friendly slug.</li>
|
|
<li><strong>Copy Slug:</strong> Once generated, the slug will appear in the output text area. Click the "Copy Slug" button to copy it to your clipboard.</li>
|
|
<li><strong>Paste and Use:</strong> Paste the copied slug directly into your web application, blog post, or any other content management system (CMS) where you need a URL slug.</li>
|
|
</ul>
|
|
|
|
<h3>Features:</h3>
|
|
<ul>
|
|
<li>Converts text to lowercase.</li>
|
|
<li>Removes special characters and replaces spaces with hyphens.</li>
|
|
<li>Provides instant feedback with a "Slug copied to clipboard!" notification upon copying.</li>
|
|
</ul>
|
|
|
|
<h3>Example Use Cases:</h3>
|
|
<ul>
|
|
<li>Bloggers creating SEO-friendly URLs for their articles.</li>
|
|
<li>Developers generating slugs for dynamic content pages.</li>
|
|
<li>Content managers ensuring consistency and readability in URL structures.</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
function generateSlug() {
|
|
const inputText = document.getElementById('inputText').value;
|
|
const slugOutput = document.getElementById('slugOutput');
|
|
// Generate slug
|
|
const slug = inputText.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
|
|
|
|
// Update output textarea and display copy button
|
|
if (slug.length > 0) {
|
|
document.getElementById('copyBtn').style.display = 'block';
|
|
slugOutput.style.display = 'block';
|
|
slugOutput.value = slug;
|
|
} else {
|
|
document.getElementById('copyBtn').style.display = 'none';
|
|
slugOutput.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function copyToClipboard() {
|
|
const slugOutput = document.getElementById('slugOutput');
|
|
const textArea = document.createElement('textarea');
|
|
textArea.value = slugOutput.value;
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textArea);
|
|
|
|
// Show copied notice
|
|
document.getElementById('copied-notice').innerHTML = 'Slug copied to clipboard!';
|
|
document.getElementById('copied-notice').style.display = 'block';
|
|
|
|
// Hide notice after 1 second
|
|
setTimeout(() => {
|
|
document.getElementById('copied-notice').style.display = 'none';
|
|
}, 1000);
|
|
}
|
|
</script>
|