How to Format HTML in TypeScript

How to format HTML in TypeScript

Formatting HTML in TypeScript is an essential task for any web development project. It allows you to take unformatted HTML strings and convert them into a consistent and readable format, making it easier to work with and maintain. In this guide, we will explore how to format HTML in TypeScript, covering the most common use case, edge cases, and performance tips.

Quick Example

Here is a minimal example of how to format HTML in TypeScript using the dompurify library:

import { JSDOM } from 'jsdom';
import { DOMPurify } from 'dompurify';

const html = '<div><p>This is a <span>test</span></p></div>';
const dom = new JSDOM(html);
const document = dom.window.document;
const formattedHtml = DOMPurify.sanitize(document.body.innerHTML);

console.log(formattedHtml);
// Output: <div><p>This is a <span>test</span></p></div>

To use this code, install the required dependencies by running npm install jsdom dompurify or yarn add jsdom dompurify.

Step-by-Step Breakdown

Let's walk through the code line by line:

1. import { JSDOM } from 'jsdom';: We import the JSDOM class from the jsdom library, which allows us to create a DOM document from a string.
2. import { DOMPurify } from 'dompurify';: We import the DOMPurify class from the dompurify library, which provides a method for sanitizing and formatting HTML.
3. const html = '<div><p>This is a <span>test</span></p></div>';: We define the unformatted HTML string.
4. const dom = new JSDOM(html);: We create a new JSDOM instance from the unformatted HTML string.
5. const document = dom.window.document;: We get the document object from the JSDOM instance.
6. const formattedHtml = DOMPurify.sanitize(document.body.innerHTML);: We use the DOMPurify.sanitize() method to sanitize and format the HTML. We pass the innerHTML of the body element as the input.
7. console.log(formattedHtml);: We log the formatted HTML to the console.

Handling Edge Cases

Here are some common edge cases to consider:

Empty/null input

If the input HTML string is empty or null, we should return an empty string:

const html = '';
const formattedHtml = html ? DOMPurify.sanitize(html) : '';
console.log(formattedHtml); // Output: ''

Invalid input

If the input HTML string is invalid, DOMPurify will throw an error. We can catch this error and return an error message:

try {
  const formattedHtml = DOMPurify.sanitize(html);
  console.log(formattedHtml);
} catch (error) {
  console.error('Invalid input:', error);
}

Large input

If the input HTML string is very large, we may need to consider performance optimizations. We can use the DOMPurify options to configure the sanitization process:

const options = { ALLOWED_TAGS: ['div', 'p', 'span'] };
const formattedHtml = DOMPurify.sanitize(html, options);
console.log(formattedHtml);

Unicode/special characters

DOMPurify supports Unicode and special characters. However, if we need to preserve specific characters, we can use the DOMPurify options to configure the sanitization process:

const options = { ALLOWED_TAGS: ['div', 'p', 'span'], ALLOWED_ATTR: ['style'] };
const formattedHtml = DOMPurify.sanitize(html, options);
console.log(formattedHtml);

Common Mistakes

Here are three common mistakes developers make when formatting HTML in TypeScript:

Mistake 1: Not sanitizing the input

const html = '<script>alert("XSS")</script>';
const formattedHtml = html; // Don't do this!
console.log(formattedHtml);

Corrected code:

const html = '<script>alert("XSS")</script>';
const formattedHtml = DOMPurify.sanitize(html);
console.log(formattedHtml);

Mistake 2: Not handling errors

try {
  const formattedHtml = DOMPurify.sanitize(html);
  console.log(formattedHtml);
} catch (error) {
  // Don't ignore the error!
  console.error('Error:', error);
}

Corrected code:

try {
  const formattedHtml = DOMPurify.sanitize(html);
  console.log(formattedHtml);
} catch (error) {
  console.error('Error:', error);
  // Handle the error or return an error message
}

Mistake 3: Not configuring the sanitization process

const formattedHtml = DOMPurify.sanitize(html);
console.log(formattedHtml);

Corrected code:

const options = { ALLOWED_TAGS: ['div', 'p', 'span'] };
const formattedHtml = DOMPurify.sanitize(html, options);
console.log(formattedHtml);

Performance Tips

Here are two practical performance tips for formatting HTML in TypeScript:

1. Use the DOMPurify options: Configure the sanitization process to only allow specific tags and attributes.
2. Use a caching mechanism: Cache the formatted HTML to avoid re-sanitizing the same input multiple times.

FAQ

Q: What is the difference between DOMPurify and jsdom?

A: DOMPurify is a library for sanitizing and formatting HTML, while jsdom is a library for creating a DOM document from a string.

Q: How do I handle large input HTML strings?

A: Use the DOMPurify options to configure the sanitization process, and consider using a caching mechanism to avoid re-sanitizing the same input multiple times.

Q: Can I use DOMPurify with other libraries?

A: Yes, DOMPurify can be used with other libraries, such as React or Angular.

Q: How do I preserve specific characters or attributes?

A: Use the DOMPurify options to configure the sanitization process.

Q: What are some common mistakes developers make when formatting HTML in TypeScript?

A: See the "Common Mistakes" section above.