diff --git a/packages/happy-dom/src/query-selector/SelectorParser.ts b/packages/happy-dom/src/query-selector/SelectorParser.ts index 5195c0d7d..a7465c9ec 100644 --- a/packages/happy-dom/src/query-selector/SelectorParser.ts +++ b/packages/happy-dom/src/query-selector/SelectorParser.ts @@ -212,10 +212,13 @@ export default class SelectorParser { switch (attribute.operator) { // [attribute~="value"] - Contains a specified word. case '~': - return new RegExp(`[- ]${attribute.value}|${attribute.value}[- ]`, modifier); + return new RegExp( + `[- ]${attribute.value}|${attribute.value}[- ]|^${attribute.value}$`, + modifier + ); // [attribute|="value"] - Starts with the specified word. case '|': - return new RegExp(`^${attribute.value}[- ]`, modifier); + return new RegExp(`^${attribute.value}[- ]|^${attribute.value}$`, modifier); // [attribute^="value"] - Begins with a specified value. case '^': return new RegExp(`^${attribute.value}`, modifier); diff --git a/packages/happy-dom/test/query-selector/QuerySelector.test.ts b/packages/happy-dom/test/query-selector/QuerySelector.test.ts index 59b992727..b4f07af50 100644 --- a/packages/happy-dom/test/query-selector/QuerySelector.test.ts +++ b/packages/happy-dom/test/query-selector/QuerySelector.test.ts @@ -427,6 +427,16 @@ describe('QuerySelector', () => { expect(elements[4] === container.children[0].children[1].children[2]).toBe(true); }); + it('Returns all elements with an attribute value containing a specified word using "[attr1~="value1"]" (which doesn\'t include spaces).', () => { + const container = document.createElement('div'); + container.innerHTML = QuerySelectorHTML; + const elements = container.querySelectorAll('[attr1~="value1"]'); + + expect(elements.length).toBe(2); + expect(elements[0] === container.children[0].children[1].children[0]).toBe(true); + expect(elements[1] === container.children[0].children[1].children[1]).toBe(true); + }); + it('Returns all elements with an attribute value starting with the specified word using "[class|="class1"]".', () => { const container = document.createElement('div'); container.innerHTML = QuerySelectorHTML; @@ -440,6 +450,16 @@ describe('QuerySelector', () => { expect(elements[4] === container.children[0].children[1].children[2]).toBe(true); }); + it('Returns all elements with an attribute value containing a specified word using "[attr1|="value1"]" (which doesn\'t include spaces).', () => { + const container = document.createElement('div'); + container.innerHTML = QuerySelectorHTML; + const elements = container.querySelectorAll('[attr1|="value1"]'); + + expect(elements.length).toBe(2); + expect(elements[0] === container.children[0].children[1].children[0]).toBe(true); + expect(elements[1] === container.children[0].children[1].children[1]).toBe(true); + }); + it('Returns all elements with an attribute value that begins with a specified value using "[class^="cl"]".', () => { const container = document.createElement('div'); container.innerHTML = QuerySelectorHTML;