{"id":21363681,"url":"https://github.com/kevinokerlund/dom-regex","last_synced_at":"2025-08-08T13:13:10.855Z","repository":{"id":57214752,"uuid":"63801336","full_name":"kevinokerlund/dom-regex","owner":"kevinokerlund","description":"JavaScript library for querying DOM elements with Regular Expressions.","archived":false,"fork":false,"pushed_at":"2017-01-23T02:38:47.000Z","size":50,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-25T14:56:02.531Z","etag":null,"topics":["dom","dom-regex","javascript-library","queryselector","regular-expression"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kevinokerlund.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-20T17:35:19.000Z","updated_at":"2021-03-09T01:48:10.000Z","dependencies_parsed_at":"2022-08-26T13:41:44.227Z","dependency_job_id":null,"html_url":"https://github.com/kevinokerlund/dom-regex","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinokerlund%2Fdom-regex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinokerlund%2Fdom-regex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinokerlund%2Fdom-regex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinokerlund%2Fdom-regex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevinokerlund","download_url":"https://codeload.github.com/kevinokerlund/dom-regex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243836028,"owners_count":20355616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","dom-regex","javascript-library","queryselector","regular-expression"],"created_at":"2024-11-22T06:20:43.068Z","updated_at":"2025-03-16T07:13:14.000Z","avatar_url":"https://github.com/kevinokerlund.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dom-regex\nA JavaScript library for querying DOM elements with Regular Expressions.\n\nThis library is UMD wrapped so it can be used with or without a module loader such as requireJS.\n\n## Install\n\n```shell\nnpm install --save dom-regex\n```\n\n_**Note:**_ If this library is exposed directly to the window, it operates under the global variable `DomRegex`. Keep\nin mind you may be in an environment (ex: webpack) that requires you explicitly expose it to the window if you intend\nto use if from a window perspective.\n\n\n\n## Example Usage\n```javascript\nlet DomRegex = require('dom-regex');\n\n// find all elements with any data- attribute\nlet elements = DomRegex.all(/data-[a-z]/);\n```\n\n\n---\n\n\nThe following examples and methods behave like `querySelectorAll` and `querySelector`. The methods that use `all`\nreturn all matching instances. The methods that use `one` return only the first instance found.\n\n\n\n## Querying through all the elements on the window\n\n**Methods:**  \n`DomRegex.all(regex [, attributeName])`  \n`DomRegex.one(regex [, attributeName])`\n\nWhen not using an attribute name, the regex is applied to the entire inside contents of the element's opening tag. If\nthe tag is `\u003cdiv class=\"bar\" data-id=\"141pop\"\u003e` then the regex would be applied to `div class=\"bar\" data-id=\"141pop\"`\n\n#### Finding all matches on the window:\n```javascript\nlet elements = DomRegex.all(/data-[a-z]/);\n```\n\n#### Finding the first match on the window:\n```javascript\nlet element = DomRegex.one(/data-[a-z]/);\n```\n\n### Find all elements that have an attribute value that matches a Regular Expression\nWhen using an attribute name, the regex is applied to the value of the attribute. If the element's opening tag was\n`\u003cdiv class=\"bar\" data-id=\"141pop\"\u003e` and the attribute name supplied was `data-id`, then the regex would be tested\nagainst `141pop`.\n\n#### Finding all matches against an attribute name:\n```javascript\n// find all elements that have a data-id attribute that starts with 3 digits\nlet elements = DomRegex.all(/^\\d{3}/, 'data-id');\n```\n\n#### Finding one match against an attribute name:\n```javascript\nlet element = DomRegex.one(/^\\d{3}/, 'data-id');\n```\n\n\n\n## Querying children of elements\nQuerying \"inside\" of elements is much like using `querySelectorAll` on an `HTMLElement`\n(`element.querySelectorAll('...')`). This method takes it a step further by offering the ability to query inside lists\nof elements, or by using selectors.\n\n**Methods:**  \n`DomRegex.all.inside(query, regex [, attributeName])`  \n`DomRegex.one.inside(query, regex [, attributeName])`\n\n#### Querying inside of a specific element:\n```javascript\n// find all custom elements inside of #element\nlet element = document.getElementById('#element');\nlet customElement = DomRegex.all.inside(element, /^[a-z]+-[a-z]+/);\n```\n\n#### Querying inside elements using a selector:\n```javascript\n// find all custom elements inside of any div with a class of \"bar\"\nlet customElement = DomRegex.all.inside('div.bar', /^[a-z]+-[a-z]+/);\n```\n\n#### Querying inside each element in a NodeList\n```javascript\nlet divs = document.querySelectorAll('div');\nlet elements = DomRegex.all.inside(divs, /\\d+/, 'data-id');\n```\n\n#### Querying inside each element in an Array\n```javascript\nlet elements = DomRegex.all.inside(arrayOfElements, /\\d+/, 'data-id');\n```\n\n\n\n## Querying against elements\nWhen querying against elements, you apply the regex directly to the element. This allows you to filter elements that\nyou have already obtained.\n\n**Methods:**  \n`DomRegex.all.against(query, regex, [, attributeName])`  \n`DomRegex.one.against(query, regex, [, attributeName])`\n\n#### Applying regex to a specific element\n```javascript\nlet element = document.getElementById('#element');\nlet customElement = DomRegex.all.against(element, /^[a-z]+-[a-z]+/);\n// if this passes, it would return the element in an array because we are using `all`\n```\n\n#### Applying regex to elements that match a selector\n```javascript\n// this will test all divs with a class of \"bar\"\nlet customElement = DomRegex.all.against('div.bar', /\\d{3}/, 'data-id');\n```\n\n#### Applying regex to elements inside of a NodeList\n```javascript\nlet divs = document.querySelectorAll('div');\nlet elements = DomRegex.all.against(divs, /\\d+/, 'data-id');\n```\n\n#### Applying regex to elements inside of an array\n```javascript\nlet elements = DomRegex.all.against(arrayOfElements, /\\d+/, 'data-id');\n```\n\n\n\n## Other Examples:\nGet all elements with a `data-` attribute\n```javascript\nlet elements = DomRegex.all(/data-[a-z]/);\n```\n\nGet all elements that have a data-id attribute that conforms to a pattern, (for example 3 numbers followed 3 letters):\n```javascript\nlet elements = DomRegex.all(/^\\d{3}[a-z]{3}$/i, 'data-id');\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinokerlund%2Fdom-regex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinokerlund%2Fdom-regex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinokerlund%2Fdom-regex/lists"}