How to Build a Zero-Dependency, Real-Time URL Slug Generator in Vanilla JS

As web developers, we often rely on heavy NPM packages like slugify to convert article titles into URL-friendly strings. But if you are building client-side tools or lightweight CMS interfaces, importing a massive library for simple string manipulation is overkill.

Today, I’ll show you how to build a lightning-fast, real-time URL Slug Generator using pure Vanilla JavaScript. We will also include a feature to strip out common "stop words" (like a, an, the, and) to make the slugs highly SEO-optimized.

The HTML Structure

Keep the DOM minimal. We need an input field for the raw title, an output field for the generated slug, and a simple copy button.

<div class="slug-generator-container">
  <div class="input-group">
    <label for="rawTitle">Post Title:</label>
    <input type="text" id="rawTitle" placeholder="Enter your blog post title here..." autocomplete="off">
  </div>

  <div class="output-group">
    <label for="generatedSlug">SEO Friendly Slug:</label>
    <div class="slug-display">
      <input type="text" id="generatedSlug" readonly>
      <button id="copyBtn">Copy</button>
    </div>
  </div>
</div>

The Vanilla JS Logic

The secret to avoiding lag is using the input event listener combined with an efficient Regular Expression pipeline. We process the string in memory and update the DOM instantly.

document.addEventListener('DOMContentLoaded', () => {
  const rawTitle = document.getElementById('rawTitle');
  const generatedSlug = document.getElementById('generatedSlug');
  const copyBtn = document.getElementById('copyBtn');

  // Set of common SEO stop words to remove
  const stopWords = new Set(['a', 'an', 'the', 'and', 'but', 'or', 'on', 'in', 'with', 'to', 'of']);

  rawTitle.addEventListener('input', function() {
    let text = this.value;

    // 1. Convert to lowercase
    text = text.toLowerCase();

    // 2. Remove special characters (keep alphanumeric and spaces)
    text = text.replace(/[^a-z0-9\s-]/g, '');

    // 3. Remove stop words (optional but great for SEO)
    let words = text.split(/\s+/);
    words = words.filter(word => !stopWords.has(word));
    text = words.join(' ');

    // 4. Replace spaces and consecutive hyphens with a single hyphen
    text = text.replace(/\s+/g, '-').replace(/-+/g, '-');

    // 5. Trim hyphens from start and end
    text = text.replace(/^-+|-+$/g, '');

    generatedSlug.value = text;
  });

  // Simple Copy to Clipboard Functionality
  copyBtn.addEventListener('click', () => {
    if (!generatedSlug.value) return;

    generatedSlug.select();
    document.execCommand('copy');

    // Quick visual feedback
    const originalText = copyBtn.textContent;
    copyBtn.textContent = 'Copied!';
    setTimeout(() => { copyBtn.textContent = originalText; }, 1500);
  });
});

Why This Architecture Wins

1. Zero Virtual DOM: By directly updating the value of the output input field, we bypass the diffing overhead of modern frameworks.
2. Event Delegation: The input event fires immediately upon pasting, typing, or cutting text, making it much more reliable than keyup.
3. Regex Pipelining: Instead of looping through arrays of characters, chaining .replace() with Regex handles string mutations at the browser's native C++ level.

Conclusion

Building custom string manipulation utilities in Vanilla JS is not only fun but also guarantees maximum performance and privacy since data never leaves the client's browser.

I am currently applying these exact zero-dependency JS patterns to build a suite of fast, privacy-first web utilities at ToolZava. If you love building or using lightweight developer tools, feel free to check it out!

What is your go-to method for handling slugs in your projects? Let me know in the comments!