escapeHtml function

Escapes the characters that have a meaning in HTML (& < > " '), to insert a text in markup.

import { escapeHtml } from 'utils';

Signature

export function escapeHtml(input: string): string

Parameters

Name	Description
input	The text to escape.

Returns

The escaped text.

Example

escapeHtml('<b>"Tom & Jerry"</b>'); // '&lt;b&gt;&quot;Tom &amp; Jerry&quot;&lt;/b&gt;'

Tests

Line coverage: 100 %.

• ✅ escapes "<b>"Tom & Jerry"</b>"
• ✅ escapes "it's"
• ✅ escapes "plain text"
• ✅ escapes "&"
• ✅ escapes ""

Source

src/string/escape-html.ts (on GitHub)

Source code

/**
 * Escapes the characters that have a meaning in HTML (`& < > " '`), to insert a text in markup.
 *
 * @param input - The text to escape.
 * @returns The escaped text.
 * @example
 * escapeHtml('<b>"Tom & Jerry"</b>'); // '&lt;b&gt;&quot;Tom &amp; Jerry&quot;&lt;/b&gt;'
 */
export function escapeHtml(input: string): string {
  return input
    .replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#39;');
}

Test file

import { escapeHtml } from './escape-html';

describe(escapeHtml, () => {
  it.for([
    ['<b>"Tom & Jerry"</b>', '&lt;b&gt;&quot;Tom &amp; Jerry&quot;&lt;/b&gt;'],
    ["it's", 'it&#39;s'],
    ['plain text', 'plain text'],
    ['&amp;', '&amp;amp;'],
    ['', ''],
  ] as const)('escapes %j', ([input, expected]) => {
    expect(escapeHtml(input)).toBe(expected);
  });
});

Keywords: escape, html, strings, function