在JavaScript中验证限制Zalgo文本：如何阻止用户在表单等场景输入？

Absolutely! You can totally implement validation logic to block Zalgo text in forms or any data-saving triggers. Zalgo text relies on stacking Unicode combining diacritical marks (like those in ranges U+0300–U+036F, U+1AB0–U+1AFF, etc.) to create distorted, "glitched" text—and we can target those specific characters to stop it.

Let’s break down practical, actionable approaches for both front-end (for immediate user feedback) and back-end (for unbreakable data integrity, since front-end checks can be bypassed):

Front-End Validation (Client-Side) #

First, add a check to catch Zalgo text before the user submits the form. This saves them from waiting for a server round-trip to get feedback.

Option 1: Block submission entirely #

Use a regex to detect combining marks, then halt submission if found:

// Check if text contains Zalgo-style characters
function hasZalgoText(text) {
  const zalgoRegex = /[\u0300-\u036F\u1AB0-\u1AFF\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F]/g;
  return zalgoRegex.test(text);
}

// Attach to form submit event
document.getElementById("your-form").addEventListener("submit", (e) => {
  const userInput = document.getElementById("user-input").value;
  if (hasZalgoText(userInput)) {
    e.preventDefault();
    alert("Whoa, that text looks distorted! Please remove any glitched/stacked characters before submitting.");
  }
});

Option 2: Auto-clean the input (instead of blocking) #

If you’d rather fix the text than stop the user, strip out the problematic marks automatically:

function cleanZalgoText(text) {
  const zalgoRegex = /[\u0300-\u036F\u1AB0-\u1AFF\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F]/g;
  return text.replace(zalgoRegex, "");
}

// Clean input as the user types
document.getElementById("user-input").addEventListener("input", (e) => {
  e.target.value = cleanZalgoText(e.target.value);
});

Back-End Validation (Server-Side) #

Never rely only on front-end checks—malicious users can bypass them easily. Add a server-side check to enforce the rule for all incoming data.

Example in Python: #

import re

def contains_zalgo(text: str) -> bool:
    zalgo_pattern = re.compile(r'[\u0300-\u036F\u1AB0-\u1AFF\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F]')
    return bool(zalgo_pattern.search(text))

# When processing form data
user_input = request.POST.get("user_input")
if contains_zalgo(user_input):
    return HttpResponse("Invalid input: Distorted/stacked (Zalgo) text is not allowed.", status=400)

Example in Node.js/Express: #

const express = require('express');
const app = express();

app.post('/submit-form', (req, res) => {
  const userInput = req.body.user_input;
  const zalgoRegex = /[\u0300-\u036F\u1AB0-\u1AFF\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F]/g;
  
  if (zalgoRegex.test(userInput)) {
    return res.status(400).send("Invalid input: Zalgo-style text is not permitted.");
  }
  
  // Proceed with saving data...
  res.send("Submission successful!");
});

Important Edge Case: Legitimate Diacritics #

Some valid text uses single combining marks (e.g., French é, Spanish ñ). To avoid blocking these, adjust your logic to allow a reasonable number of marks relative to base characters:

function hasExcessiveZalgo(text) {
  const zalgoRegex = /[\u0300-\u036F\u1AB0-\u1AFF\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F]/g;
  const zalgoMatches = text.match(zalgoRegex) || [];
  const baseCharacterCount = text.replace(zalgoRegex, "").length;
  
  // Allow max 1 combining mark per base character (tweak this threshold as needed)
  return zalgoMatches.length > baseCharacterCount;
}

This way, you block only the excessive stacking that defines Zalgo text, while letting normal accented characters through.

内容的提问来源于stack exchange，提问作者user9233446