Context-Aware Text Sanitization in JavaScript: Best Practices for Modern Web Apps

Table of Contents Common Challenges Better Approach React Implementation Serverless API Validation Library Comparison Best Practices When handling user input in web applications, text sanitization is a critical—yet often overlooked—aspect of development. Developers face the challenge of standardizing data for storage while preserving meaningful formatting for display. In this post, we explore common challenges and present effective, context-aware strategies for text sanitization in JavaScript. Common Text Sanitization Challenges Developers frequently encounter these issues when sanitizing user input: Lost Readability: Converting "Product-ID123" to "productid123" can make it harder to identify the original value. Brand Name Distortion: Brand names like "iPhone" lose their proper casing. Context Ignorance: Different data types (e.g., product codes versus user names) require distinct sanitization rules. Inflexible Special Character Handling: Some approaches strip away essential characters like hyphens or spaces. Balancing User Experience and Data Integrity: Ensuring data consistency without degrading the user interface. Consider a traditional approach: // Traditional approach function basicSanitize(input) { return input.toLowerCase().replace(/[^a-z0-9]/g, ''); } basicSanitize("Product-ID123"); // "productid123" basicSanitize("iPhone 15 Pro"); // "iphone15pro" ✅ Before sanitization: Product-ID123 ❌ After basic sanitization: productid123 This method standardizes input for storage but loses the formatting that aids readability and recognition. A Better Approach to Text Sanitization Modern applications benefit from context-aware sanitization. Here’s a flexible function that allows you to tailor sanitization based on the context—whether for display or database comparison: // Context-aware sanitization approach function smartSanitize(input, options = {}) { const { preserveCase = true, preserveSpaces = true, preserveHyphens = false, preserveUnderscores = false } = options; let result = input; // Remove characters based on options if (!preserveHyphens) { result = result.replace(/-/g, ''); } if (!preserveUnderscores) { result = result.replace(/_/g, ''); } if (!preserveSpaces) { result = result.replace(/\s/g, ''); } // Remove remaining special characters (allowing word characters, spaces, hyphens, underscores) result = result.replace(/[^\w\s-_]/g, ''); // Adjust case if needed if (!preserveCase) { result = result.toUpperCase(); } return result; } // For display purposes (preserving formatting) console.log(smartSanitize("Product-ID123", { preserveHyphens: true })); // Output: "Product-ID123" // For database comparison (standardized) console.log(smartSanitize("Product-ID123", { preserveCase: false, preserveHyphens: false })); // Output: "PRODUCTID123" This method lets you maintain important formatting when needed, while also providing a standardized version for data comparisons. Real World Implementation in React Below is an example of integrating a context-aware sanitization approach into a React form component. In production, you might use a dedicated library like purify-text-match for well tested code, additional features and robustness. import { useState } from 'react'; // import purify-text-match library: import { sanitizeString } from 'purify-text-match'; function ProductCodeValidator() { const [input, setInput] = useState(''); const [isValid, setIsValid] = useState(false); const [error, setError] = useState(''); // Sample valid codes from your database const validCodes = ['PROD-001', 'PROD-002', 'PROD-003']; const validateCode = (value) => { // For display: preserve formatting const displayValue = sanitizeString(value, { preserveCase: true, preserveHyphens: true }); // For comparison: standardize formatting const normalizedInput = sanitizeString(value, { preserveCase: false, preserveHyphens: false }); // Check if normalized input matches any normalized valid code const isMatch = validCodes.some(code => { const normalizedCode = sanitizeString(code, { preserveCase: false, preserveHyphens: false }); return normalizedInput === normalizedCode; }); setIsValid(isMatch); setError(isMatch ? '' : 'Invalid product code'); }; return ( { setInput(e.target.value); validateCode(e.target.value); }} placeholder="Enter product code" /> {error && {error}} {isValid && Valid code!} ); } Serverless API Validation Example For backend validation, you can adopt a similar approach in your serverless functions: // Example AWS Lambda handler export async function handler(event) { const { productCodes } = JSON.parse(event.body); const allowedCodes = await fetchAllowed

// Traditional approach
function basicSanitize(input) {
  return input.toLowerCase().replace(/[^a-z0-9]/g, '');
}

basicSanitize("Product-ID123");  // "productid123"
basicSanitize("iPhone 15 Pro");  // "iphone15pro"

// Context-aware sanitization approach
function smartSanitize(input, options = {}) {
  const {
    preserveCase = true,
    preserveSpaces = true,
    preserveHyphens = false,
    preserveUnderscores = false
  } = options;

  let result = input;

  // Remove characters based on options
  if (!preserveHyphens) {
    result = result.replace(/-/g, '');
  }
  if (!preserveUnderscores) {
    result = result.replace(/_/g, '');
  }
  if (!preserveSpaces) {
    result = result.replace(/\s/g, '');
  }

  // Remove remaining special characters (allowing word characters, spaces, hyphens, underscores)
  result = result.replace(/[^\w\s-_]/g, '');

  // Adjust case if needed
  if (!preserveCase) {
    result = result.toUpperCase();
  }

  return result;
}

// For display purposes (preserving formatting)
console.log(smartSanitize("Product-ID123", { preserveHyphens: true }));  
// Output: "Product-ID123"

// For database comparison (standardized)
console.log(smartSanitize("Product-ID123", { preserveCase: false, preserveHyphens: false }));  
// Output: "PRODUCTID123"

import { useState } from 'react';
// import purify-text-match library:
import { sanitizeString } from 'purify-text-match';

function ProductCodeValidator() {
  const [input, setInput] = useState('');
  const [isValid, setIsValid] = useState(false);
  const [error, setError] = useState('');

  // Sample valid codes from your database
  const validCodes = ['PROD-001', 'PROD-002', 'PROD-003'];

  const validateCode = (value) => {
    // For display: preserve formatting
    const displayValue = sanitizeString(value, {
      preserveCase: true,
      preserveHyphens: true
    });

    // For comparison: standardize formatting
    const normalizedInput = sanitizeString(value, {
      preserveCase: false,
      preserveHyphens: false
    });

    // Check if normalized input matches any normalized valid code
    const isMatch = validCodes.some(code => {
      const normalizedCode = sanitizeString(code, {
        preserveCase: false,
        preserveHyphens: false
      });
      return normalizedInput === normalizedCode;
    });

    setIsValid(isMatch);
    setError(isMatch ? '' : 'Invalid product code');
  };

  return (
    <div>
      <input 
        value={input}
        onChange={(e) => {
          setInput(e.target.value);
          validateCode(e.target.value);
        }}
        placeholder="Enter product code"
      />
      {error && <div className="error">{error}div>}
      {isValid && <div className="success">Valid code!div>}
    div>
  );
}

// Example AWS Lambda handler
export async function handler(event) {
  const { productCodes } = JSON.parse(event.body);
  const allowedCodes = await fetchAllowedProductCodes();

  // Sanitize and validate each code
  const validationResults = productCodes.map(code => {
    const normalizedInput = sanitizeString(code, { preserveCase: false });

    const matchingCode = allowedCodes.find(allowed => {
      const normalizedAllowed = sanitizeString(allowed, { preserveCase: false });
      return normalizedInput === normalizedAllowed;
    });

    return {
      original: code,
      sanitized: normalizedInput,
      matched: !!matchingCode,
      matchedWith: matchingCode || null
    };
  });

  const validItems = validationResults.filter(item => item.matched);
  const invalidItems = validationResults.filter(item => !item.matched);

  return {
    statusCode: invalidItems.length === 0 ? 200 : 400,
    body: JSON.stringify({
      valid: validItems.length,
      invalid: invalidItems.length,
      invalidItems: invalidItems.map(item => item.original)
    })
  };
}

Related Posts

1352. Product of the Last K Numbers

Feb 14, 2025  0

Building a Real-Time NBA Game Day Notification System w...

Feb 9, 2025  0

How AI is Transforming Software Development

Feb 20, 2025  0