Merge pull request #879 from capricorn86/task/877-id-attributes-with-…

…colons-break-dom-selectors #877@patch: Adds support for using escaped characters to ID:s in quer…
capricorn86 · Apr 29, 2023 · e3d2611 · e3d2611
2 parents f94ed89 + de0db65
commit e3d2611
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/happy-dom/src/query-selector/SelectorParser.ts b/packages/happy-dom/src/query-selector/SelectorParser.ts
@@ -18,7 +18,7 @@ import DOMException from '../exception/DOMException';
  * Group 11: Combinator.
  */
 const SELECTOR_REGEXP =
-	/(\*)|([a-zA-Z0-9-]+)|#([a-zA-Z0-9-_]+)|\.((?:[a-zA-Z0-9-_]|\\.)+)|\[([a-zA-Z0-9-_]+)\]|\[([a-zA-Z0-9-_]+)([~|^$*]{0,1}) *= *["']{0,1}([^"']+)["']{0,1}\]|:([a-zA-Z-:]+)|\(([^)]+)\)|([ ,+>]*)/g;
+	/(\*)|([a-zA-Z0-9-]+)|#((?:[a-zA-Z0-9-_]|\\.)+)|\.((?:[a-zA-Z0-9-_]|\\.)+)|\[([a-zA-Z0-9-_]+)\]|\[([a-zA-Z0-9-_]+)([~|^$*]{0,1}) *= *["']{0,1}([^"']+)["']{0,1}\]|:([a-zA-Z-:]+)|\(([^)]+)\)|([ ,+>]*)/g;
 
 /**
  * Escaped Character RegExp.
@@ -85,7 +85,7 @@ export default class SelectorParser {
 				} else if (match[2]) {
 					currentSelectorItem.tagName = match[2].toUpperCase();
 				} else if (match[3]) {
-					currentSelectorItem.id = match[3];
+					currentSelectorItem.id = match[3].replace(CLASS_ESCAPED_CHARACTER_REGEXP, '');
 				} else if (match[4]) {
 					currentSelectorItem.classNames = currentSelectorItem.classNames || [];
 					currentSelectorItem.classNames.push(match[4].replace(CLASS_ESCAPED_CHARACTER_REGEXP, ''));

diff --git a/packages/happy-dom/test/query-selector/QuerySelector.test.ts b/packages/happy-dom/test/query-selector/QuerySelector.test.ts
@@ -914,7 +914,17 @@ describe('QuerySelector', () => {
 			div2.id = 'id';
 			div.appendChild(div2);
 
-			expect(div.querySelector('#id')).toEqual(div2);
+			expect(div.querySelector('#id') === div2).toBe(true);
+		});
+
+		it('Returns an element by id matching "#:id:".', () => {
+			const div = document.createElement('div');
+			const div2 = document.createElement('div');
+
+			div2.id = ':id:';
+			div.appendChild(div2);
+
+			expect(div.querySelector('#\\:id\\:') === div2).toBe(true);
 		});
 
 		it('Does not find input with selector of input:not([list])[type="search"]', () => {