fix: properly escape all attribute names

fixes #650
fczbkk · Mar 15, 2024 · 52d159e · 52d159e
1 parent c7c2e76
commit 52d159e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 22 deletions.
diff --git a/src/selector-attribute.ts b/src/selector-attribute.ts
@@ -3,9 +3,9 @@ import { createPatternMatcher, getIntersection } from "./utilities-data.js";
 import { CssSelectorGenerated } from "./types.js";
 
 type AttributeData = {
-  name: string,
-  value: string
-}
+  name: string;
+  value: string;
+};
 
 // List of attributes to be ignored. These are handled by different selector types.
 export const attributeBlacklistMatch = createPatternMatcher([
@@ -15,13 +15,6 @@ export const attributeBlacklistMatch = createPatternMatcher([
   "ng-*",
 ]);
 
-/**
- * Prevents errors when attribute name contains a colon (e.g. "xlink:href").
- */
-function sanitizeAttributeName (name: string) {
-  return name.replace(/:/g, "\\:");
-}
-
 /**
  * Get simplified attribute selector for an element.
  */
@@ -60,9 +53,9 @@ export function isValidAttributeNode(
 /**
  * Sanitize all attribute data. We want to do it once, before we start to generate simplified/full selectors from the same data.
  */
-function sanitizeAttributeData({nodeName, nodeValue}: Node): AttributeData {
+function sanitizeAttributeData({ nodeName, nodeValue }: Node): AttributeData {
   return {
-    name: sanitizeAttributeName(nodeName),
+    name: sanitizeSelectorItem(nodeName),
     value: sanitizeSelectorItem(nodeValue),
   };
 }
@@ -73,9 +66,9 @@ function sanitizeAttributeData({nodeName, nodeValue}: Node): AttributeData {
 export function getElementAttributeSelectors(
   element: Element,
 ): CssSelectorGenerated[] {
-  const validAttributes = Array.from(element.attributes).filter(
-    (attributeNode) => isValidAttributeNode(attributeNode, element),
-  ).map(sanitizeAttributeData);
+  const validAttributes = Array.from(element.attributes)
+    .filter((attributeNode) => isValidAttributeNode(attributeNode, element))
+    .map(sanitizeAttributeData);
   return [
     ...validAttributes.map(attributeNodeToSimplifiedSelector),
     ...validAttributes.map(attributeNodeToSelector),

diff --git a/test/selector-attribute.spec.js b/test/selector-attribute.spec.js
@@ -118,13 +118,13 @@ describe("selector - attribute", function () {
     assert.notMatch(result, /^\[/);
   });
 
-  it('should escape attributes containing colons', () => {
-    root.innerHTML = '<div aaa:bbb="ccc" />'
-    const element = root.firstElementChild
-    const selectors = getAttributeSelectors([element])
+  it("should escape attributes containing colons and semicolons", () => {
+    root.innerHTML = '<div aaa:bbb="ccc" ddd;eee="fff" :="ggg" ;="hhh" : ; />';
+    const element = root.firstElementChild;
+    const selectors = getAttributeSelectors([element]);
     selectors.forEach((selector) => {
-      assert.doesNotThrow(() => document.querySelector(selector), selector)
-      assert.equal(document.querySelector(selector), element)
-    })
+      assert.doesNotThrow(() => document.querySelector(selector), selector);
+      assert.equal(document.querySelector(selector), element);
+    });
   });
 });