Rails-Inspired Text Cleaning: How to Sanitize Strings in JavaScript

Want Rails-level developer experience in your JavaScript projects? Ruby on Rails offers many helpful utilities that JavaScript often lacks. Here’s how to replicate the Rails sanitize method in JavaScript for cleaner, more consistent text handling. Keep reading to learn how to implement a flexible sanitize function!

This guide will implement a JavaScript sanitize function that mirrors the cleanliness of Rails by creating a TextSanitizers class that manages different text-cleaning operations.

Why Sanitize Strings in JavaScript?

Sanitizing strings ensures data consistency and prevents unexpected issues. Imagine a content editor where users might accidentally introduce extra spaces, excessive newlines, or trailing whitespace. Sanitizing solves these problems by:

• Improving Data Quality: Ensures clean, consistent data for processing and storage.
• Preventing Display Issues: Avoids visual glitches caused by unwanted whitespace or formatting.
• Enhancing User Experience: Makes text input more forgiving and user-friendly.

The Goal: A Flexible sanitize() Function

Our aim is to create a sanitize function in Javascript that can be called like this:

const sanitizedContent = sanitize(content, { 
  trimTrailingWhitespace: true,
  trimLeadingWhitespace: true,
  maxConsecutiveNewlines: 2,
  maxConsecutiveSpaces: 1
});

This function should accept a string (content) and an options object specifying the sanitization rules to apply.

Step 1: Setting Up textSanitizers.js

First, create the file app/javascript/helpers/textSanitizers.js. This file will house our TextSanitizers class and the core sanitize function.

// app/javascript/helpers/textSanitizers.js
class TextSanitizers {}

export const sanitize = (content, options = {}) => {
  return new TextSanitizers(content).process(options);
};

The sanitize function creates a new TextSanitizers instance, passing in the content to be processed and then calls the process method.

Step 2: Initializing the TextSanitizers Class

Let's flesh out the TextSanitizers class:

class TextSanitizers {
  constructor(content) {
    this.content = content;
  }

  process(options = {}) {
    return this.content.replace(/[ \t]+$/gm, "");
  }
}

Currently, the process method only trims trailing whitespace. We'll expand this to handle multiple sanitization options.

Step 3: Making it Flexible

To allow for multiple sanitization rules, we'll introduce an availableCleaners array and refactor the process method.

class TextSanitizers {
  availableCleaners = [
    "trimTrailingWhitespace"
  ];

  constructor(content) {
    this.content = content;
  }

  process(options = {}) {
    return Object.entries(options).reduce((result, [option, value]) => {
      return this.availableCleaners.includes(option) ? this[option](result, value) : result;
    }, this.content);
  }

  // private

  trimTrailingWhitespace(text) {
    return text.replace(/[ \t]+$/gm, "");
  }
}

Here's what's happening:

• availableCleaners: An array listing the available sanitization methods.
• process(options): Uses Object.entries to convert the options object into an array of key-value pairs. The reduce function iterates over key-value pairs: { trimTrailingWhitespace: true } becomes [["trimTrailingWhitespace", true]].
• The reduce iterates through these options, checking if the option is in availableCleaners. If yes, it calls the corresponding method (e.g., this.trimTrailingWhitespace(result, value)).

Step 4: Adding Sanitization Options

Now, let's add more sanitization options:

class TextSanitizers {
  availableCleaners = [
    "trimTrailingWhitespace",
    "trimLeadingWhitespace",
    "maxConsecutiveNewlines",
    "maxConsecutiveSpaces"
  ];

  constructor(content) {
    this.content = content;
  }

  process(options = {}) {
    return Object.entries(options).reduce((result, [option, value]) => {
      return this.availableCleaners.includes(option) ? this[option](result, value) : result;
    }, this.content);
  }

  // private

  trimTrailingWhitespace(text) {
    return text.replace(/[ \t]+$/gm, "");
  }

  trimLeadingWhitespace(text) {
    return text.replace(/^[ \t]+/gm, "");
  }

  maxConsecutiveNewlines(text, maxNewlines) {
    return text.replace(/\n{3,}/g, "\n".repeat(maxNewlines));
  }

  maxConsecutiveSpaces(text, maxSpaces) {
    return text.replace(/ {2,}/g, " ".repeat(maxSpaces));
  }
}

For each new sanitization, the option is added to availableCleaners and a corresponding method is created.

Real-World Example: Cleaning User Input

Imagine a comment section on a blog. Users might paste text with inconsistent formatting. Use our sanitize function to clean it:

import { sanitize } from './helpers/textSanitizers';

const userInput = "  \n\n\n  This is a comment with   extra spaces and newlines.   ";
const cleanComment = sanitize(userInput, {
  trimLeadingWhitespace: true,
  trimTrailingWhitespace: true,
  maxConsecutiveNewlines: 2,
  maxConsecutiveSpaces: 1
});

console.log(cleanComment); 
// Expected output: "This is a comment with extra spaces and newlines."

Conclusion: Rails-Inspired Cleanliness in JavaScript

This approach brings a touch of Rails' developer-friendly utilities to JavaScript, allowing you to sanitize strings with ease. Extend the TextSanitizers class with more options as needed to tailor it to your project's specific requirements. Super clean! 🛀.