Add HTML tag regex utilities (#230)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: tenedev

.changeset/small-trees-mix.md

@@ -0,0 +1,7 @@
+---
+'@js-utils-kit/regex': minor
+'@js-utils-kit/core': minor
+js-utils-kit: minor
+---
+
+Add `HTML_TAG_REGEX` and `STRICT_HTML_TAG_REGEX` regexes

exports.json

@@ -1,12 +1,12 @@
 {
   "summary": {
-    "totalExports": 220,
+    "totalExports": 222,
     "deprecatedExports": 0,
     "classExports": 0,
     "functionExports": 89,
-    "variableExports": 105,
+    "variableExports": 107,
     "typeExports": 25,
-    "valueExports": 194,
+    "valueExports": 196,
     "totalPackages": 14
   },
   "exportNames": {
@@ -137,6 +137,7 @@
       "HAS_WHITESPACE_REGEX",
       "homeDir",
       "HOUR",
+      "HTML_TAG_REGEX",
       "HTTP_METHODS",
       "HTTP_STATUS",
       "IS_ALPHA_REGEX",
@@ -198,6 +199,7 @@
       "SQRT_1_2",
       "SQRT_2",
       "STARTS_WITH_UPPERCASE_REGEX",
+      "STRICT_HTML_TAG_REGEX",
       "TAB",
       "TAU",
       "TON_TO_KG",
@@ -1402,6 +1404,22 @@
         "filePath": "packages/@js-utils-kit/regex/src/hasWhitespace.ts",
         "line": 23
       },
+      {
+        "name": "HTML_TAG_REGEX",
+        "declarationKind": "VariableDeclaration",
+        "exportKind": "variable",
+        "deprecated": false,
+        "filePath": "packages/@js-utils-kit/regex/src/html.ts",
+        "line": 18
+      },
+      {
+        "name": "STRICT_HTML_TAG_REGEX",
+        "declarationKind": "VariableDeclaration",
+        "exportKind": "variable",
+        "deprecated": false,
+        "filePath": "packages/@js-utils-kit/regex/src/html.ts",
+        "line": 37
+      },
       {
         "name": "NPM_PACKAGE_NAME_REGEX",
         "declarationKind": "VariableDeclaration",

packages/@js-utils-kit/regex/src/html.ts

@@ -0,0 +1,37 @@
+/**
+ * Matches any HTML/XML-like tag, including React fragments.
+ *
+ * Intended for stripping markup from a string, not for validating HTML.
+ *
+ * @example
+ * ```ts
+ * "<p>Hello</p>".replace(HTML_TAG_REGEX, "");
+ * // "Hello"
+ * ```
+ *
+ * @example
+ * ```ts
+ * "<><div>Hello</div></>".replace(HTML_TAG_REGEX, "");
+ * // "Hello"
+ * ```
+ */
+export const HTML_TAG_REGEX = /<\/?[^>]*>/g;
+
+/**
+ * Matches standard HTML tags whose tag names begin with a letter.
+ *
+ * Unlike {@link HTML_TAG_REGEX}, this pattern does not match React fragment tags (`<>` and `</>`).
+ *
+ * @example
+ * ```ts
+ * "<div>Hello</div>".replace(STRICT_HTML_TAG_REGEX, "");
+ * // "Hello"
+ * ```
+ *
+ * @example
+ * ```ts
+ * "<></>".match(STRICT_HTML_TAG_REGEX);
+ * // null
+ * ```
+ */
+export const STRICT_HTML_TAG_REGEX = /<\/?[a-z][^>]*>/gi;

packages/@js-utils-kit/regex/src/index.ts

@@ -8,4 +8,5 @@ export * from './cases';
 export * from './email';
 export * from './endsWithPunctuation';
 export * from './hasWhitespace';
+export * from './html';
 export * from './pm';

packages/@js-utils-kit/regex/test/html.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+import { HTML_TAG_REGEX, STRICT_HTML_TAG_REGEX } from '../src';
+
+describe('HTML_TAG_REGEX', () => {
+  it('matches opening tags', () => {
+    expect('<div>'.match(HTML_TAG_REGEX)).toEqual(['<div>']);
+  });
+
+  it('matches closing tags', () => {
+    expect('</div>'.match(HTML_TAG_REGEX)).toEqual(['</div>']);
+  });
+
+  it('matches self-closing tags', () => {
+    expect('<img src="a.png" />'.match(HTML_TAG_REGEX)).toEqual(['<img src="a.png" />']);
+  });
+
+  it('matches nested tags', () => {
+    expect('<div><span>Hello</span></div>'.match(HTML_TAG_REGEX)).toEqual([
+      '<div>',
+      '<span>',
+      '</span>',
+      '</div>',
+    ]);
+  });
+
+  it('does not match plain text', () => {
+    expect('Hello, world!'.match(HTML_TAG_REGEX)).toBeNull();
+  });
+
+  it('matches malformed tags', () => {
+    expect('<>'.match(HTML_TAG_REGEX)).toEqual(['<>']);
+    expect('</>'.match(HTML_TAG_REGEX)).toEqual(['</>']);
+  });
+});
+
+describe('STRICT_HTML_TAG_REGEX', () => {
+  it('matches opening tags', () => {
+    expect('<div>'.match(STRICT_HTML_TAG_REGEX)).toEqual(['<div>']);
+  });
+
+  it('matches closing tags', () => {
+    expect('</div>'.match(STRICT_HTML_TAG_REGEX)).toEqual(['</div>']);
+  });
+
+  it('matches self-closing tags', () => {
+    expect('<img src="a.png" />'.match(STRICT_HTML_TAG_REGEX)).toEqual(['<img src="a.png" />']);
+  });
+
+  it('matches uppercase tag names', () => {
+    expect('<DIV>'.match(STRICT_HTML_TAG_REGEX)).toEqual(['<DIV>']);
+  });
+
+  it('does not match React fragments', () => {
+    expect('<>'.match(STRICT_HTML_TAG_REGEX)).toBeNull();
+    expect('</>'.match(STRICT_HTML_TAG_REGEX)).toBeNull();
+  });
+
+  it('does not match plain text', () => {
+    expect('Hello'.match(STRICT_HTML_TAG_REGEX)).toBeNull();
+  });
+
+  it('matches nested tags', () => {
+    expect('<div><span>Hello</span></div>'.match(STRICT_HTML_TAG_REGEX)).toEqual([
+      '<div>',
+      '<span>',
+      '</span>',
+      '</div>',
+    ]);
+  });
+});