Rails-Inspired JavaScript: How to Sanitize Strings Like a Ruby Pro

Want clean, consistent data in your JavaScript applications? Ruby on Rails makes string sanitization a breeze. But how can JavaScript developers achieve the same elegant experience? This article will guide you through building a powerful sanitize function in JavaScript, inspired by Rails' developer-friendly approach. Learn to trim whitespace, limit newlines, and more!

Why Sanitize Strings in JavaScript?

Untamed user input can wreak havoc on your application. String sanitization ensures data consistency and prevents unexpected behavior. You should sanitize you content if you are using any kind of user input, whether its free form text, or even something simple like a search query.

Here's why you need it:

• Data consistency: Ensures uniformity for processing and storage.
• Improved display: Prevents layout issues caused by extra spaces or newlines.
• Reduced errors: Minimizes unexpected behavior from malformed data.

The Goal: A Flexible sanitize() Function

Imagine this: You have an editor component and you want to sanitize the text being passed. The aim is to create a JavaScript sanitize function that mirrors the flexibility of Rails helpers:

class Editor {
  async #update(content) {
    const sanitizedContent = sanitize(content, { trimTrailingWhitespace: true });
    const response = await fetch(
      this.updateUrlValue,
      {
        body: JSON.stringify({
          content: sanitizedContent
        })
      }
    );
  }
}

The sanitize function should accept content and an options object to specify sanitization rules.

Step-by-Step: Building Your JavaScript Sanitizer

Let's create app/javascript/helpers/textSanitizers.js

1. The Foundation: TextSanitizers Class

Start with a TextSanitizers class to encapsulate our sanitization logic:

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

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

This sets up the structure: the sanitize function creates an instance of TextSanitizers and calls its process method.

2. Initializing and Processing Content

Pass the content to the constructor and create a process method. For now, let's focus on trimming trailing whitespace:

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

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

This code removes any trailing spaces or tabs from each line of the content.

3. Scaling Up: Dynamic Sanitization

To handle multiple sanitization options, let's make the process method more flexible:

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 the breakdown:

• availableCleaners: An array of available sanitization methods.
• process: Iterates through the options object. If an option is in availableCleaners, it calls the corresponding method.
• trimTrailingWhitespace: The method that removes trailing whitespace.

4. Expanding Sanitization Options

Now, let's add more sanitization methods: trimLeadingWhitespace, maxConsecutiveNewlines, and maxConsecutiveSpaces.

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));
  }
}

Each new sanitization option is added to availableCleaners, and a corresponding method is created.

Real-World Examples: Using Your sanitize() Function

Here's how you can use your new sanitize function:

• Trimming Whitespace:

  const text = "  Hello, world!   \n  ";
  const sanitizedText = sanitize(text, { trimTrailingWhitespace: true, trimLeadingWhitespace: true });
  console.log(sanitizedText); // Output: "Hello, world!"
  

  Copy

• Limiting Newlines:

  const text = "This is a text with\n\n\n\nmultiple newlines.";
  const sanitizedText = sanitize(text, { maxConsecutiveNewlines: 2 });
  console.log(sanitizedText); // Output: "This is a text with\n\nmultiple newlines."
  

  Copy

• Controlling Spaces:

  const text = "This  has   too    many     spaces.";
  const sanitizedText = sanitize(text, { maxConsecutiveSpaces: 1 });
  console.log(sanitizedText); // Output: "This has too many spaces."
  

  Copy

Level Up Your JavaScript with Rails-Inspired Techniques

By implementing a flexible sanitize function, you bring the elegance and developer-friendliness of Rails to your JavaScript projects. This approach enhances data quality and reduces potential errors, leading to more robust and maintainable applications. This is just the beginning, experiment and discover how to sanitize different form inputs, such as emails, social security numbers, and more!