fix: handle quoted `.`, `#`, `:` and`[` in attribute selectors

fixes #162
refs #147 (one of the two selectors using negative lookbehind is removed)

src/dom/selector.spec.ts

@@ -2,7 +2,7 @@ import { Config } from "../config";
 import { Parser } from "../parser";
 import { reset as resetDOMCounter } from "./domnode";
 import { HtmlElement } from "./htmlelement";
-import { escapeSelectorComponent, Selector } from "./selector";
+import { escapeSelectorComponent, Selector, splitPattern } from "./selector";
 import { NodeType } from "./nodetype";
 
 interface StrippedHtmlElement {
@@ -153,6 +153,73 @@ describe("escapeSelectorComponent", () => {
 	});
 });
 
+describe("splitPattern()", () => {
+	it("should return [] when and empty string is passed", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern(""))).toEqual([]);
+	});
+
+	it("should return the full string when no delimiter was found", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern("div"))).toEqual(["div"]);
+	});
+
+	it("should split class selector", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern("div.foo"))).toEqual(["div", ".foo"]);
+	});
+
+	it("should split id selector", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern("div#foo"))).toEqual(["div", "#foo"]);
+	});
+
+	it("should split attribute selector", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern("div[foo=bar]"))).toEqual(["div", "[foo=bar]"]);
+	});
+
+	it("should split pseudo class selector", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern("div:foo"))).toEqual(["div", ":foo"]);
+	});
+
+	it("should split pseudo element selector", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern("div::foo"))).toEqual(["div", "::foo"]);
+	});
+
+	it("should handle leading class selector", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern(".foo"))).toEqual([".foo"]);
+	});
+
+	it("should handle leading id selector", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern("#foo"))).toEqual(["#foo"]);
+	});
+
+	it("should handle leading attribute selector", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern("[foo=bar]"))).toEqual(["[foo=bar]"]);
+	});
+
+	it("should handle leading pseudo class selector", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern(":foo"))).toEqual([":foo"]);
+	});
+
+	it("should handle leading pseudo element selector", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern("::foo"))).toEqual(["::foo"]);
+	});
+
+	it("should handle nested characters in string", () => {
+		expect.assertions(1);
+		expect(Array.from(splitPattern('[id=":#[]\'"'))).toEqual(['[id=":#[]\'"']);
+	});
+});
+
 describe("Selector", () => {
 	let doc: HtmlElement;
 
@@ -297,6 +364,18 @@ describe("Selector", () => {
 		]);
 	});
 
+	it('should match nested : in string ([id=":r1:"])', () => {
+		expect.assertions(1);
+		const parser = new Parser(Config.empty().resolve());
+		doc = parser.parseHtml(/* HTML */ ` <label id="#r1:"> lorem ipsum </label> `);
+		const element = doc.querySelector("label");
+		const id = element.id;
+		const selector = new Selector('[id="#r1:"]');
+		expect(Array.from(selector.match(doc))).toEqual([
+			expect.objectContaining({ tagName: "label", id: id }),
+		]);
+	});
+
 	it('should match attribute value with special characters ([lorem-123-ipsum="dolor-sit-amet"])', () => {
 		expect.assertions(1);
 		const selector = new Selector('[lorem-123-ipsum="dolor-sit-amet"]');

src/dom/selector.ts

@@ -18,6 +18,91 @@ export function escapeSelectorComponent(text: string | DynamicValue): string {
 	return text.toString().replace(/([^a-z0-9_-])/gi, "\\$1");
 }
 
+/**
+ * Returns true if the character is a delimiter for different kinds of selectors:
+ *
+ * - `.` - begins a class selector
+ * - `#` - begins an id selector
+ * - `[` - begins an attribute selector
+ * - `:` - begins a pseudo class or element selector
+ */
+function isDelimiter(ch: string): boolean {
+	return /[.#[:]/.test(ch);
+}
+
+/**
+ * Returns true if the character is a quotation mark.
+ */
+function isQuotationMark(ch: string): ch is '"' | "'" {
+	return /['"]/.test(ch);
+}
+
+function isPseudoElement(ch: string, buffer: string): boolean {
+	return ch === ":" && buffer === ":";
+}
+
+/**
+ * @internal
+ */
+export function* splitPattern(pattern: string): Generator<string> {
+	if (pattern === "") {
+		return;
+	}
+
+	const end = pattern.length;
+
+	let begin = 0;
+	let cur = 1;
+	let quoted: false | '"' | "'" = false;
+
+	while (cur < end) {
+		const ch = pattern[cur];
+		const buffer = pattern.slice(begin, cur);
+
+		/* escaped character, ignore whatever is next */
+		if (ch === "\\") {
+			cur += 2;
+			continue;
+		}
+
+		/* if inside quoted string we only look for the end quotation mark */
+		if (quoted) {
+			if (ch === quoted) {
+				quoted = false;
+			}
+			cur += 1;
+			continue;
+		}
+
+		/* if the character is a quotation mark we store the character and the above
+		 * condition will look for a similar end quotation mark */
+		if (isQuotationMark(ch)) {
+			quoted = ch;
+			cur += 1;
+			continue;
+		}
+
+		/* special case when using :: pseudo element selector */
+		if (isPseudoElement(ch, buffer)) {
+			cur += 1;
+			continue;
+		}
+
+		/* if the character is a delimiter we yield the string and reset the
+		 * position */
+		if (isDelimiter(ch)) {
+			begin = cur;
+			yield buffer;
+		}
+
+		cur += 1;
+	}
+
+	/* yield the rest of the string */
+	const tail = pattern.slice(begin, cur);
+	yield tail;
+}
+
 abstract class Matcher {
 	/**
 	 * Returns `true` if given node matches.
@@ -112,8 +197,7 @@ export class Pattern {
 		this.selector = pattern;
 		this.combinator = parseCombinator(match.shift(), pattern);
 		this.tagName = match.shift() || "*";
-		const p = match[0] ? match[0].split(/(?=(?<!\\)[.#[:])/) : [];
-		this.pattern = p.map((cur: string) => this.createMatcher(cur));
+		this.pattern = Array.from(splitPattern(match[0]), (it) => this.createMatcher(it));
 	}
 
 	public match(node: HtmlElement, context: SelectorContext): boolean {

src/rules/input-missing-label.spec.ts

@@ -48,6 +48,16 @@ describe("rule input-missing-label", () => {
 		expect(report).toBeValid();
 	});
 
+	it("should handle colon in id", () => {
+		expect.assertions(1);
+		const markup = /* HTML */ `
+			<label for=":r1:">lorem ipsum</label>
+			<input id=":r1:" />
+		`;
+		const report = htmlvalidate.validateString(markup);
+		expect(report).toBeValid();
+	});
+
 	it("should not report error when at least one label is accessible", () => {
 		expect.assertions(1);
 		const markup = `

src/rules/no-missing-references.spec.ts

@@ -182,6 +182,16 @@ describe("rule no-missing-references", () => {
 		]);
 	});
 
+	it("should handle colon in id", () => {
+		expect.assertions(1);
+		const markup = /* HTML */ `
+			<label for=":r1:">lorem ipsum</label>
+			<input id=":r1:" />
+		`;
+		const report = htmlvalidate.validateString(markup);
+		expect(report).toBeValid();
+	});
+
 	it("should contain documentation", () => {
 		expect.assertions(1);
 		htmlvalidate = new HtmlValidate({