Universal Zalgo Text Cleaner

A lightweight, zero-dependency utility to clean Zalgo/glitched text from strings. Works seamlessly across React, Next.js, Vue, Angular, and Svelte.

Clean your inputs, console logs, UI, or social media posts safely and efficiently.

Features

• Cleans Zalgo/glitched text using Unicode normalization.
• Removes combining diacritical marks and optional strict mode for non-ASCII characters.
• Cross-framework compatible (React, Next.js, Vue, Angular, Svelte).
• Lightweight and zero dependencies.
• Reusable function-based API for professional usage.

Utility Function

/**
 * Universal Zalgo Text Cleaner
 * @param {string} mode - 'strict' (default) removes all non-ASCII, 'light' removes only combining marks
 * @returns {function} - Function that accepts input string and returns cleaned string
 */
export function createZalgoCleaner(mode = "strict") {
  return function(input = "") {
    if (typeof input !== "string") return "";

    // Step 1: Normalize Unicode characters
    let normalized = input.normalize("NFD");

    // Step 2: Remove combining marks
    normalized = normalized.replace(/[\u0300-\u036f]/g, "");

    // Step 3: Strict mode removes remaining non-ASCII characters
    if (mode === "strict") {
      normalized = normalized.replace(/[^\x00-\x7F]/g, "");
    }

    return normalized.trim();
  };
}

Usage Examples

React / Next.js

import { createZalgoCleaner } from './utils/zalgoCleaner';

const clean = createZalgoCleaner();
const text = "w̵̛̽́̿̎o̶̽́̿w̵";

function App() {
  return (
    <div>
      <p>Original: {text}</p>
      <p>Cleaned: {clean(text)}</p>
    </div>
  );
}
export default App;

Vue 3

<script setup>
import { createZalgoCleaner } from './utils/zalgoCleaner';
const clean = createZalgoCleaner();
const text = "w̵̛̽́̿̎o̶̽́̿w̵";
</script>

<template>
  <p>Original: {{ text }}</p>
  <p>Cleaned: {{ clean(text) }}</p>
</template>

Angular

// zalgo-cleaner.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ZalgoCleanerService {
  private cleanFn = (input: string) => {
    if (!input) return '';
    let normalized = input.normalize('NFD');
    normalized = normalized.replace(/[\u0300-\u036f]/g, '');
    normalized = normalized.replace(/[^\x00-\x7F]/g, '');
    return normalized.trim();
  };

  clean(input: string) {
    return this.cleanFn(input);
  }
}

<p>Original: {{ text }}</p>
<p>Cleaned: {{ zalgoCleaner.clean(text) }}</p>

Svelte

<script>
  import { createZalgoCleaner } from './utils/zalgoCleaner.js';
  const clean = createZalgoCleaner();
  let text = "w̵̛̽́̿̎o̶̽́̿w̵";
</script>

<p>Original: {text}</p>
<p>Cleaned: {clean(text)}</p>

Modes

Example

const clean = createZalgoCleaner("strict");
console.log(clean("@Microsoft, @amzn, w̵̽́̿o̶̽́̿w̵"));
// Output: "@Microsoft, @amzn, wow"

Why Use This Utility

• Prevent UI glitches caused by Zalgo/glitched text.
• Ensure safe rendering in browsers and inputs.
• Works across all modern frontend frameworks.
• Easy to integrate and lightweight.

Author / Maintainer

Kiranravi – Frontend Developer & Open Source Enthusiast

• 🔗 GitHub: https://github.com/Kiranravi
• 🔗 LinkedIn: https://www.linkedin.com/in/kiran-ravi-74baa12a3/
• 📫 Email: [email protected]

Built with ❤️ by Kiranravi. Feel free to contribute, report issues, or suggest features!