fix(dom): `generateSelector()` escapes characters

fixes #108

src/dom/htmlelement.spec.ts

@@ -442,6 +442,45 @@ describe("HtmlElement", () => {
 			expect(el.generateSelector()).toEqual("#foo > p");
 		});
 
+		it("should handle colon in id", () => {
+			expect.assertions(1);
+			const document = parser.parseHtml(`
+				<div>
+					<div id="foo:">
+						<p></p>
+					</div>
+				</div>
+			`);
+			const el = document.querySelector("p");
+			expect(el.generateSelector()).toEqual("#foo\\: > p");
+		});
+
+		it("should handle space in id", () => {
+			expect.assertions(1);
+			const document = parser.parseHtml(`
+				<div>
+					<div id="foo ">
+						<p></p>
+					</div>
+				</div>
+			`);
+			const el = document.querySelector("p");
+			expect(el.generateSelector()).toEqual("#foo\\  > p");
+		});
+
+		it("should handle bracket in id", () => {
+			expect.assertions(1);
+			const document = parser.parseHtml(`
+				<div>
+					<div id="foo[bar]">
+						<p></p>
+					</div>
+				</div>
+			`);
+			const el = document.querySelector("p");
+			expect(el.generateSelector()).toEqual("#foo\\[bar\\] > p");
+		});
+
 		it("should normalize tagnames", () => {
 			expect.assertions(1);
 			const document = parser.parseHtml(`<dIV></DIv>`);

src/dom/htmlelement.ts

@@ -143,9 +143,10 @@ export class HtmlElement extends DOMNode {
 		for (let cur: HtmlElement = this; cur.parent; cur = cur.parent) {
 			/* if a unique id is present, use it and short-circuit */
 			if (cur.id) {
-				const matches = root.querySelectorAll(`#${cur.id}`);
+				const escaped = cur.id.replace(/([:[\] ])/g, "\\$1");
+				const matches = root.querySelectorAll(`#${escaped}`);
 				if (matches.length === 1) {
-					parts.push(`#${cur.id}`);
+					parts.push(`#${escaped}`);
 					break;
 				}
 			}