DEV Community: Yaar Raj

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

Yaar Raj — Sat, 10 Oct 2026 11:03:50 +0000

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

Zero Virtual DOM: By directly updating the value of the output input field, we bypass the diffing overhead of modern frameworks.
Event Delegation: The input event fires immediately upon pasting, typing, or cutting text, making it much more reliable than keyup.
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!

How to Build a Lightning-Fast, Real-Time Text Analyzer Using Vanilla JavaScript

Yaar Raj — Sun, 27 Sep 2026 00:24:19 +0000

As web developers, we often develop a bad habit of reaching for heavy frameworks (like React or Vue) or external libraries to solve simple problems. But when it comes to basic string manipulation, DOM updates, and client-side utilities, Vanilla JavaScript is often the fastest and most efficient choice.

Recently, I’ve been heavily focused on building client-side web utilities. I noticed that many online text tools lag when pasting large documents (like a 10,000-word essay) because they trigger inefficient re-renders or use poor string-parsing logic.

Today, I’ll show you how to build a highly optimized, real-time Text Analyzer (Word & Character Counter) using pure Vanilla JS.

The HTML Structure

Keep the DOM as lightweight as possible. We only need a text area for input and a few spans to display our dynamic values.

<div class="analyzer-container">
  <textarea id="textInput" placeholder="Paste your text here..."></textarea>

  <div class="stats-panel">
    <p>Characters: <span id="charCount">0</span></p>
    <p>Words: <span id="wordCount">0</span></p>
    <p>Without Spaces: <span id="noSpaceCount">0</span></p>
  </div>
</div>

The Vanilla JS Logic

The key to avoiding browser lag on large text inputs is avoiding heavy loops. Instead, we can use built-in JavaScript properties and efficient Regular Expressions (RegEx) bound to an input event listener.

Here is the core logic:

document.addEventListener('DOMContentLoaded', () => {
    const textInput = document.getElementById('textInput');
    const charCount = document.getElementById('charCount');
    const wordCount = document.getElementById('wordCount');
    const noSpaceCount = document.getElementById('noSpaceCount');

    textInput.addEventListener('input', function() {
        const text = this.value;

        // 1. Total Characters (Fastest method)
        charCount.textContent = text.length;

        // 2. Characters without spaces (Using Regex to globally remove spaces/line breaks)
        const textWithoutSpaces = text.replace(/\s+/g, '');
        noSpaceCount.textContent = textWithoutSpaces.length;

        // 3. Word Count (Splitting by whitespace, handling empty input)
        // Trim removes trailing/leading spaces, split creates an array of words
        const wordsArray = text.trim().split(/\s+/);

        // If the text is completely empty, set word count to 0 to prevent counting an empty string as 1 word
        wordCount.textContent = text.trim() === '' ? 0 : wordsArray.length;
    });
});

Why This Approach Works Better

Event Delegation: By attaching the event listener directly to the input event, the DOM updates instantly whether the user types, pastes, or deletes text. It doesn't wait for a keyup event, which fails if a user pastes via right-click.
Optimized RegEx: The /\s+/g regular expression handles all whitespace (spaces, tabs, and line breaks) in a single pass, which is computationally cheaper than iterating through a string character by character.
No Virtual DOM Overhead: We are surgically updating the textContent of specific spans. We bypass the massive overhead of diffing a Virtual DOM, making it blazingly fast even for huge strings.

Conclusion

Mastering fundamental JavaScript concepts like RegEx and direct DOM manipulation allows you to build incredibly fast tools without bloating your bundle size. When building utilities, always prioritize client-side execution to keep user data private and server costs at zero.

If you love exploring lightweight, fast, and dependency-free web utilities, you can check out my project at ToolFount, where I am applying these exact Vanilla JS architectural concepts to build a massive directory of everyday developer and daily-life calculators.

What is your favorite vanilla JS trick for string manipulation? Let me know in the comments!

Why Writing Custom Scripts for Everyday Tasks is a Bad Idea (And What to Do Instead)

Yaar Raj — Fri, 11 Sep 2026 03:19:32 +0000

As developers, we spend a lot of time mastering Computer Science fundamentals—learning how to write efficient algorithms, handle complex data structures, and optimize time complexity. We take pride in our ability to code our way out of any problem.

But let’s be honest: when you are in the middle of a tight sprint, writing a custom Python or JavaScript snippet from scratch just to format a JSON file, convert a string, or manipulate text is a terrible use of your time.

The Developer's Dilemma: Build vs. Use

Whenever we face a minor, repetitive task, our first instinct is usually: "I can write a quick script for this in 5 minutes."

The reality? Those 5 minutes turn into 30 minutes of debugging, handling edge cases, and testing.

For example, if you need to quickly extract specific data from a block of text, writing a RegEx script is great for learning, but terrible for productivity when a client is waiting for an update. We need to bridge the gap between knowing the underlying fundamentals and practical efficiency.

The Power of Ready-Made Utility Hubs

Instead of reinventing the wheel every single time, smart developers rely on robust, client-side utility platforms. Keeping a dedicated toolkit bookmarked is one of the biggest productivity hacks you can implement.

Recently, I’ve been streamlining my workflow by relying on all-in-one utility platforms instead of searching for individual single-purpose websites. One excellent resource I have added to my daily workflow is ToolFount.

Why centralized utility platforms like this are a game-changer:

Context Switching is Minimized: You don't have to open 10 different tabs for 10 different small tasks (like encoding URLs, formatting code, or calculating values).
Client-Side Processing: The best tools run directly in your browser, meaning your sensitive test data doesn't get sent to a random server.
Instant Results: No need to open your IDE, write a function, run it in the terminal, and copy the output. It is instant.

Work Smarter, Not Harder

Understanding how a tool works under the hood is what makes you a great engineer. But knowing when to use a pre-built tool is what makes you a highly productive professional.

Stop wasting your cognitive energy on mundane tasks. Bookmark a solid utility hub, automate the boring stuff, and save your brainpower for solving complex architectural problems.

What is that one obscure web tool or extension you use every single day that other developers might not know about? Drop your recommendations in the comments below! 👇