fix: [#1414] Adds support for supporting new lines and tabs as white-…

…space character in CSS selectors (#1499) * fix: [#1414] Normalize selector parameter * fix: [#1414] Add more test case * chore: [#1414] Improves the logic for supporting additional white-space characters in selectors --------- Co-authored-by: David Ortner <[email protected]>
capricorn86 · Aug 29, 2024 · 6aa044d · 6aa044d
1 parent 0e3d424
commit 6aa044d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/packages/happy-dom/src/query-selector/SelectorParser.ts b/packages/happy-dom/src/query-selector/SelectorParser.ts
@@ -25,7 +25,7 @@ import ISelectorPseudo from './ISelectorPseudo.js';
  * Group 17: 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}) *= *["']{1}([^"']*)["']{1} *(s|i){0,1}\]|\[([a-zA-Z0-9-_]+) *([~|^$*]{0,1}) *= *([^\]]*)\]|:([a-zA-Z-]+) *\(([^)]+\)?)\)|:([a-zA-Z-]+)|::([a-zA-Z-]+)|([ ,+>]*)/g;
+	/(\*)|([a-zA-Z0-9-]+)|#((?:[a-zA-Z0-9-_]|\\.)+)|\.((?:[a-zA-Z0-9-_]|\\.)+)|\[([a-zA-Z0-9-_]+)\]|\[([a-zA-Z0-9-_]+)\s*([~|^$*]{0,1})\s*=\s*["']{1}([^"']*)["']{1}\s*(s|i){0,1}\]|\[([a-zA-Z0-9-_]+)\s*([~|^$*]{0,1})\s*=\s*([^\]]*)\]|:([a-zA-Z-]+)\s*\(([^)]+\)?)\)|:([a-zA-Z-]+)|::([a-zA-Z-]+)|([\s,+>]*)/gm;
 
 /**
  * Escaped Character RegExp.
@@ -86,6 +86,7 @@ export default class SelectorParser {
 		selector: string,
 		options?: { ignoreErrors?: boolean }
 	): Array<Array<SelectorItem>> {
+		selector = selector.trim();
 		const ignoreErrors = options?.ignoreErrors;
 
 		if (selector === '*') {

diff --git a/packages/happy-dom/test/query-selector/QuerySelector.test.ts b/packages/happy-dom/test/query-selector/QuerySelector.test.ts
@@ -1380,6 +1380,23 @@ describe('QuerySelector', () => {
 			expect(container.querySelector(':where(span[attr1="val,ue1"])')).toBe(null);
 		});
 
+		it('Remove new line from selector and trim selector before parse', () => {
+			const container = document.createElement('div');
+
+			container.innerHTML = QuerySelectorHTML;
+
+			expect(container.querySelector('\n \n\r	\t	\f h1 \n \n\r	\t	\f')).toBe(
+				container.children[0].children[0]
+			);
+			expect(container.querySelector('\n \n\r	\t	\f div div        span \n \n\r	\t	\f')).toBe(
+				container.children[0].children[1].children[0]
+			);
+			expect(
+				container.querySelector('div.class1\n.class2 span') ===
+					container.children[0].children[1].children[0]
+			).toBe(true);
+		});
+
 		it('Returns element matching selector "datalist#id"', () => {
 			const div = document.createElement('div');
 			const datalist = document.createElement('datalist');