{"id":20148330,"url":"https://github.com/nwutils/find-in-nw","last_synced_at":"2025-10-17T06:01:53.184Z","repository":{"id":57236410,"uuid":"217921323","full_name":"nwutils/find-in-nw","owner":"nwutils","description":"Adds \"Ctrl+F\" find box to highlight text in the DOM","archived":false,"fork":false,"pushed_at":"2023-12-17T05:00:48.000Z","size":570,"stargazers_count":13,"open_issues_count":4,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-13T20:33:52.186Z","etag":null,"topics":["find","highlight-text","library","nwjs","search"],"latest_commit_sha":null,"homepage":"https://nwutils.io","language":"HTML","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/nwutils.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-27T21:50:24.000Z","updated_at":"2024-09-09T05:07:33.000Z","dependencies_parsed_at":"2025-01-13T11:21:59.259Z","dependency_job_id":"62a08c4b-c6c5-4376-8207-ec73fef87098","html_url":"https://github.com/nwutils/find-in-nw","commit_stats":{"total_commits":23,"total_committers":2,"mean_commits":11.5,"dds":0.08695652173913049,"last_synced_commit":"35ac2a4ce007e222f729e4308e20b5ec7cb047e2"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nwutils%2Ffind-in-nw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nwutils%2Ffind-in-nw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nwutils%2Ffind-in-nw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nwutils%2Ffind-in-nw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nwutils","download_url":"https://codeload.github.com/nwutils/find-in-nw/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241587787,"owners_count":19986628,"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":["find","highlight-text","library","nwjs","search"],"created_at":"2024-11-13T22:37:17.205Z","updated_at":"2025-10-17T06:01:53.177Z","avatar_url":"https://github.com/nwutils.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \"Find\" in NW.js\n\nAdds \"Ctrl+F\" find box to highlight text in the DOM\n\n![Animated example](find-in-nw.gif)\n\n\n\n\n## Use\n\n1. `npm install --save findinnw`\n1. In your HTML file add:\n    ```html\n    \u003cscript src=\"node_modules/findinnw/dist/find-in-nw.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      findInNw.initialize();\n    \u003c/script\u003e\n    ```\n1. Use `CTRL+F` to display and give focus to the search box\n1. After typing, press `ENTER` to go to highlight/scroll to the next match.\n1. Use `TAB` to navigate to the \"previous\", \"next\", and \"close\" buttons.\n1. Use `ENTER` or `SPACE` to activate a button when focused.\n1. User `ESC` to hide the search box and return focus to the body\n\n\n\n\n## API\n\n\n### `findInNw.initialize(options);`\n\nThis is the initialization command. It must be ran once. You can pass in an options object documented below:\n\n#### options\n\nOption            | Type             | Description\n:--               | :--              | :--\n`verbose`         | Boolean          | Console logs information, included mutations that re-trigger searches\n`classesToIgnore` | Array of Strings | List of class names to ignore when deciding to re-trigger searches automatically when the DOM changes\n`idsToIgnore`     | Array of Strings | List of IDs to ignore when deciding to re-trigger searches automatically when the DOM changes\n`passThrough`     | Object           | Any [findAndReplaceDOMText](https://github.com/padolsey/findAndReplaceDOMText#options) options\n\n**Note:** If you notice the search box is acting funny (the \"Next\"/\"Previous\" buttons aren't working as expected for example), then most likely there are DOM changes occurring that are re-triggering the search to display accurate results. This causes the \"current\" highlighted item to be reset. You should turn on `verbose`, then look at the mutations logged when the funny behavior occurs. Each mutation has a `target` (the element that changed). You can add that targeted element's ID or classname to the array of `classesToIgnore` or `idsToIgnore`. This should stop the funny behavior.\n\n**Example:**\n\n```js\nfindInNw.initialize({\n  verbose: true,\n  classesToIgnore: ['tooltip', 'tabCount'],\n  idsToIgnore: ['back-to-top'],\n  passThrough: {}\n});\n```\n\n\n### `findInNw.showSearchBox();`\n\nThis is used to programmitcally display the search box. `CTRL+F` will still display it too.\n\n\n### `findInNw.hideSearchBox();`\n\nThis is used to programmitcally hide the search box. `ESC` will still hide it too.\n\n\n### `findInNw.search('Text to find');`\n\nThis is used to programmitcally find text.\n\n\n### `findInNw.highlightNext();` and `findInNw.highlightPrevious();`\n\nThis will highlight and scroll to the next or previous match.\n\n\n### `findInNw.clearTokens();`\n\nThis is used to remove all the highlighted tokens.\n\n\n\n\n## Customizing Styles\n\n\n### Highlight tokens\n\nAll highlight tokens of matching searched text will be wrapped in a `\u003cmark class=\"find-in-nw-token\"\u003esearched text\u003c/mark\u003e`.\n\nThey will also contain a `data-find-in-nw-position=\"4\"` data attribute, the number correlates to a zero-based index of all matches.\n\nAs you navigate from one match to the next, the currently selected match will have a class of `.find-in-nw-current-token`.\n\nYou can customize this by targeting the following\n\n```css\nmark.find-in-nw-token {\n    background-color: #00F;\n}\n\nmark.find-in-nw-current-token {\n    background-color: #38D878;\n}\n```\n\n\n### Search Box\n\nEach element of the search box is styled by targeting a class. They also all have a matching ID that you can target to override them.\n\n```css\n/* The container for the input/count/close */\n#find-in-nw-search-box {}\n\n/* The input field you type in */\n#find-in-nw-input {}\n\n/* The current selected match number. Ex: The number 1 in \"1/5\" */\n#find-in-nw-current {}\n\n/* The separator between the current and count. Ex: The slash (/) in \"1/5\" */\n#find-in-nw-of {}\n\n/* The count of matching highlighted items. Ex: The number 5 in \"1/5\" */\n#find-in-nw-count {}\n\n/* The case sensitivty toggle, Ex: Aa button */\n#find-in-nw-case-sensitive {}\n\n/* The previous and next buttons, ∧ and ∨ */\n#find-in-nw-previous {}\n#find-in-nw-next {}\n\n/* The × close button */\n#find-in-nw-close {}\n```\n\n\n\n\n## Contributing\n\n1. Create an issue first for your desired improvements and how you think they should be implemented.\n1. If plan is approved (or no response given in a timely manner), then you can submit a PR.\n1. Make sure to run `npm run validate` prior to submitting your PR and fix any errors or warnings.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnwutils%2Ffind-in-nw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnwutils%2Ffind-in-nw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnwutils%2Ffind-in-nw/lists"}