feat(html): add escapeJs and escapeCss functions

Author: lionel-rowe

html/deno.json

@@ -4,6 +4,8 @@
   "exports": {
     ".": "./mod.ts",
     "./entities": "./entities.ts",
+    "./unstable-escape-css": "./unstable_escape_css.ts",
+    "./unstable-escape-js": "./unstable_escape_js.ts",
     "./unstable-is-valid-custom-element-name": "./unstable_is_valid_custom_element_name.ts",
     "./named-entity-list.json": "./named_entity_list.json"
   }

html/unstable_escape_css.ts

@@ -0,0 +1,63 @@
+// Copyright 2018-2025 the Deno authors. MIT license.
+// This module is browser compatible.
+
+/**
+ * Escapes a string for direct interpolation into an external
+ * CSS style sheet, within a `<style>` element, or in a selector.
+ *
+ * Uses identical logic to
+ * [`CSS.escape`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape_static)
+ * in browsers.
+ *
+ * @param str The string to escape.
+ * @returns The escaped string.
+ *
+ * @example Usage
+ * ```ts
+ * import { escapeCss } from "@std/html/unstable-escape-css";
+ * import { assertEquals } from "@std/assert";
+ *
+ * // Invalid in a CSS selector, even though it's a valid HTML ID
+ * const elementId = "123";
+ * // Unsafe for interpolation
+ * const contentInput = `<!-- '" --></style>`;
+ *
+ * const selector = `#${escapeCss(elementId)}`;
+ * const content = `"${escapeCss(contentInput)}"`;
+ *
+ * // Usable as a CSS selector
+ * assertEquals(selector, String.raw`#\31 23`);
+ * // Safe for interpolation
+ * assertEquals(content, String.raw`"\<\!--\ \'\"\ --\>\<\/style\>"`);
+ *
+ * // Usage
+ * `<style>
+ *  ${selector}::after {
+ *    content: ${content};
+ *  }
+ * </style>`;
+ * ```
+ */
+export function escapeCss(str: string): string {
+  const matcher =
+    // deno-lint-ignore no-control-regex
+    /(\0)|([\x01-\x1f\x7f]|(?<=^-?)\d)|(^-$|[ -,.\/:-@\[-^`\{-~])/g;
+
+  return str.replaceAll(matcher, (_, g1, g2, g3) => {
+    return g1 != null
+      // null char
+      ? "�"
+      : g2 != null
+      // control char or digit at start
+      ? escapeAsCodePoint(g2)
+      // solo dash or special char
+      : escapeChar(g3);
+  });
+}
+
+function escapeAsCodePoint(char: string) {
+  return `\\${char.codePointAt(0)!.toString(16)} `;
+}
+function escapeChar(char: string) {
+  return "\\" + char;
+}

html/unstable_escape_css_test.ts

@@ -0,0 +1,52 @@
+// Copyright 2018-2025 the Deno authors. MIT license.
+// This module is browser compatible.
+import { escapeCss } from "./unstable_escape_css.ts";
+import { assertEquals } from "@std/assert";
+
+export const testCases = [
+  { input: "", expected: "" },
+  { input: "a", expected: "a" },
+  { input: "A", expected: "A" },
+  { input: "0", expected: String.raw`\30 ` },
+  { input: "123", expected: String.raw`\31 23` },
+  { input: "-123", expected: String.raw`-\31 23` },
+  { input: "a-123", expected: "a-123" },
+  { input: "a23", expected: "a23" },
+  { input: "-", expected: String.raw`\-` },
+  { input: "a-", expected: "a-" },
+  { input: "_", expected: "_" },
+  { input: " ", expected: String.raw`\ ` },
+  { input: "\n", expected: String.raw`\a ` },
+  { input: "\r", expected: String.raw`\d ` },
+  { input: "\t", expected: String.raw`\9 ` },
+  { input: "\f", expected: String.raw`\c ` },
+  { input: "\v", expected: String.raw`\b ` },
+  { input: "\0", expected: "\ufffd" },
+  { input: "\ufffd", expected: "\ufffd" },
+  { input: "\x01", expected: String.raw`\1 ` },
+  { input: "\x1f", expected: String.raw`\1f ` },
+  { input: "\x7f", expected: String.raw`\7f ` },
+  { input: "文字", expected: "文字" },
+  { input: "💩", expected: "💩" },
+  { input: "\uffff", expected: "\uffff" },
+  { input: "\u{10ffff}", expected: "\u{10ffff}" },
+  {
+    input: "<style>\r\n<!-- -->\r\n</style>",
+    expected: String.raw`\<style\>\d \a \<\!--\ --\>\d \a \<\/style\>`,
+  },
+  {
+    input:
+      " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~",
+    expected: String
+      .raw`\ \!\"\#\$\%\&\'\(\)\*\+\,-\.\/0123456789\:\;\<\=\>\?\@ABCDEFGHIJKLMNOPQRSTUVWXYZ\[\\\]\^_\`abcdefghijklmnopqrstuvwxyz\{\|\}\~`,
+  },
+];
+
+Deno.test("escapeCss() gives same results as CSS.escape in browser", async (t) => {
+  for (const { input, expected } of testCases) {
+    await t.step(JSON.stringify(input), () => {
+      const result = escapeCss(input);
+      assertEquals(result, expected);
+    });
+  }
+});

html/unstable_escape_js.ts

@@ -0,0 +1,49 @@
+// Copyright 2018-2025 the Deno authors. MIT license.
+// This module is browser compatible.
+
+/** Options for {@linkcode escapeJs} */
+export type EscapeJsOptions = {
+  /**
+   * The number of spaces or tab to use for indentation in the output.
+   * If not specified, no extra whitespace is added.
+   */
+  space?: number | "\t";
+};
+
+/**
+ * Escapes a JavaScript object or other data for safe interpolation inside a `<script>` tag.
+ *
+ * The data must be JSON-serializable (plain object, array, string, number (excluding `NaN`/infinities), boolean, or null).
+ *
+ * The output remains fully JSON-compatible, but it additionally escapes characters and sequences that are problematic
+ * in JavaScript contexts, including within `<script>` tags.
+ *
+ * @param data The data to escape.
+ * @param options Options for escaping.
+ * @returns The escaped string.
+ *
+ * @example Usage
+ * ```ts
+ * import { escapeJs } from "@std/html/unstable-escape-js";
+ * import { assertEquals } from "@std/assert";
+ * // Example data to escape
+ * const input = {
+ *   foo: "</script>",
+ *   bar: "<SCRIPT>",
+ *   baz: "<!-- ",
+ *   quux: "\u2028\u2029<>",
+ * };
+ * assertEquals(
+ *  escapeJs(input),
+ *  String.raw`{"foo":"\u003c/script>","bar":"\u003cSCRIPT>","baz":"\u003c!-- ","quux":"\u2028\u2029<>"}`,
+ * );
+ * ```
+ */
+export function escapeJs(data: unknown, options: EscapeJsOptions = {}): string {
+  const { space } = options;
+  return JSON.stringify(data, null, space)
+    .replaceAll(
+      /[\u2028\u2029]|<(?=!--|\/?script)/gi,
+      (m) => String.raw`\u${m.charCodeAt(0).toString(16).padStart(4, "0")}`,
+    );
+}

html/unstable_escape_js_test.ts

@@ -0,0 +1,45 @@
+// Copyright 2018-2025 the Deno authors. MIT license.
+// This module is browser compatible.
+
+import { assertEquals } from "@std/assert";
+import { escapeJs } from "./unstable_escape_js.ts";
+import { dedent } from "@std/text/unstable-dedent";
+
+Deno.test("escapeJs() escapes strings for <script> context", async (t) => {
+  const testCases = [
+    { input: "</script>", expected: String.raw`"\u003c/script>"` },
+    { input: "<SCRIPT>", expected: String.raw`"\u003cSCRIPT>"` },
+    { input: "<!-- ", expected: String.raw`"\u003c!-- "` },
+    { input: "\u2028\u2029<>", expected: String.raw`"\u2028\u2029<>"` },
+  ];
+
+  for (const { input, expected } of testCases) {
+    await t.step(JSON.stringify(input), () => {
+      const result = escapeJs(input);
+      assertEquals(result, expected);
+    });
+  }
+});
+
+Deno.test("escapeJs() escapes object for <script> context", async (t) => {
+  const input = {
+    foo: "</script>",
+    bar: "<SCRIPT>",
+    baz: "<!-- ",
+    quux: "\u2028\u2029<>",
+  };
+
+  const expected = dedent`
+    {
+      "foo": "\\u003c/script>",
+      "bar": "\\u003cSCRIPT>",
+      "baz": "\\u003c!-- ",
+      "quux": "\\u2028\\u2029<>"
+    }
+  `;
+
+  await t.step(JSON.stringify(input), () => {
+    const result = escapeJs(input, { space: 2 });
+    assertEquals(result, expected);
+  });
+});