replacing invalid tag names by div (#22)

src/snapshot.ts

@@ -8,11 +8,25 @@ import {
 } from './types';
 
 let _id = 1;
+const symbolAndNumberRegex = RegExp('[^a-z]');
 
 function genId(): number {
   return _id++;
 }
 
+function getValidTagName(tagName: string): string {
+  const processedTagName = tagName.toLowerCase().trim();
+
+  if (symbolAndNumberRegex.test(processedTagName)) {
+    // if the tag name is odd and we cannot extract
+    // anything from the string, then we return a
+    // generic div
+    return 'div';
+  }
+
+  return processedTagName;
+}
+
 function getCssRulesString(s: CSSStyleSheet): string | null {
   try {
     const rules = s.rules || s.cssRules;
@@ -174,7 +188,7 @@ function serializeNode(
           }
         });
       }
-      const tagName = (n as HTMLElement).tagName.toLowerCase();
+      const tagName = getValidTagName((n as HTMLElement).tagName);
       let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
         attributes[name] = transformAttribute(doc, name, value);
@@ -205,8 +219,9 @@ function serializeNode(
           ''
         ).trim().length
       ) {
-        const cssText = getCssRulesString((n as HTMLStyleElement)
-          .sheet as CSSStyleSheet);
+        const cssText = getCssRulesString(
+          (n as HTMLStyleElement).sheet as CSSStyleSheet,
+        );
         if (cssText) {
           attributes._cssText = absoluteToStylesheet(cssText, location.href);
         }