{"id":13622998,"url":"https://github.com/cutiful/replace-in-html","last_synced_at":"2025-04-15T10:32:16.963Z","repository":{"id":57353708,"uuid":"413437465","full_name":"cutiful/replace-in-html","owner":"cutiful","description":"Replace text in HTML strings without messing up element attributes.","archived":false,"fork":false,"pushed_at":"2023-02-25T13:53:16.000Z","size":278,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-21T15:17:28.471Z","etag":null,"topics":["find-and-replace","html","replace-text"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/replace-in-html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cutiful.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"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":"2021-10-04T13:39:29.000Z","updated_at":"2023-03-27T17:32:11.000Z","dependencies_parsed_at":"2024-11-08T10:33:40.693Z","dependency_job_id":"800166d9-ddd7-402a-9f08-38d3429f7d01","html_url":"https://github.com/cutiful/replace-in-html","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"ef54523a21065fc57f47bebbf7147a890d6e2da3"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cutiful%2Freplace-in-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cutiful%2Freplace-in-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cutiful%2Freplace-in-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cutiful%2Freplace-in-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cutiful","download_url":"https://codeload.github.com/cutiful/replace-in-html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249051760,"owners_count":21204884,"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-and-replace","html","replace-text"],"created_at":"2024-08-01T21:01:26.769Z","updated_at":"2025-04-15T10:32:16.626Z","avatar_url":"https://github.com/cutiful.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# replace-in-html\nReplaces text in an HTML fragment without replacing attributes. Only works in a\nbrowser (or JSDOM).\n\n## Examples\n```js\nreplaceInHtml(`\u003ca href=\"https://meow.example.org\"\u003emeow\u003c/a\u003e`, \"meow\", `\u003cimg src=\"./cat.png\"\u003e`);\n// \u003ca href=\"https://meow.example.org\"\u003e\u003cimg src=\"./cat.png\"\u003e\u003c/a\u003e\n\nreplaceInHtml(\n  `\u003cp class=\"me\"\u003eNested elements and regexps: \u003cspan\u003ereplace \u003cb\u003eme!\u003c/b\u003e\u003c/span\u003e \u003cspan\u003eand me!\u003c/span\u003e\u003c/p\u003e`,\n  /(?\u003c!\\w)me/g, // negative lookbehind,\n  \"without replacing \\\"me\\\" in \\\"elements\\\"\",\n);\n// \u003cp class=\"me\"\u003eNested elements and regexps: \u003cspan\u003ereplace \u003cb\u003ewithout replacing \"me\" in \"elements\"!\u003c/b\u003e\u003c/span\u003e \u003cspan\u003eand without replacing \"me\" in \"elements\"!\u003c/span\u003e\u003c/p\u003e\n\nreplaceInHtml(\n  `\u003cdiv\u003e\u003ccode\u003ereplacer\u003c/code\u003e can be a string or a function returning $return_types\u003c/div\u003e`,\n  /\\$return_types/g,\n  match =\u003e {\n    const el = document.createElement(\"span\");\n    el.className = match.slice(1);\n    el.innerHTML = \"a string, DOM Node or an array of DOM Nodes\";\n\n    return el;\n  },\n);\n// \u003cdiv\u003e\u003ccode\u003ereplacer\u003c/code\u003e can be a string or a function returning \u003cspan class=\"return_types\"\u003ea string, DOM Node or an array of DOM Nodes\u003c/span\u003e\u003c/div\u003e\n\nreplaceInHtml(\n  `\u003cp\u003eSo let's try an example closer to the real world:question:\u003c/p\u003e\n  \u003cp\u003eHow about... :lightbulb: custom emoji tags? :blobcat:\u003c/p\u003e`,\n  /:[a-zA-Z0-9_]{2,}:/g,\n  match =\u003e {\n    const el = document.createElement(\"img\");\n    el.className = \"custom_emoji\";\n    el.alt = el.title = match;\n    el.src = `https://cdn.example.org/i/emoji/${match.slice(1, -1)}.png`;\n\n    return el;\n  },\n);\n// \u003cp\u003eSo let's try an example closer to the real world\u003cimg class=\"custom_emoji\" title=\":question:\" alt=\":question:\" src=\"https://cdn.example.org/i/emoji/question.png\"\u003e\u003c/p\u003e\n// \u003cp\u003eHow about... \u003cimg class=\"custom_emoji\" title=\":lightbulb:\" alt=\":lightbulb:\" src=\"https://cdn.example.org/i/emoji/lightbulb.png\"\u003e custom emoji tags? \u003cimg class=\"custom_emoji\" title=\":blobcat:\" alt=\":blobcat:\" src=\"https://cdn.example.org/i/emoji/blobcat.png\"\u003e\u003c/p\u003e\n```\n\n## Installation\n### Webpack / Rollup\nNPM:\n```sh\nnpm install replace-in-html\n```\n\nYarn:\n```sh\nyarn add replace-in-html\n```\n\nthen in JS:\n```js\nimport replaceInHtml from \"replace-in-html\";\n\nconst replaced = replaceInHtml(\"\u003cp\u003eoriginal html\u003c/p\u003e\", /original/g, \"modified\");\nconsole.log(replaced);\n```\n\n### Browser\n```html\n\u003cscript src=\"https://unpkg.com/replace-in-html\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const replaced = window.replaceInHtml(\"\u003cp\u003eoriginal html\u003c/p\u003e\", /original/g, \"modified\");\n  console.log(replaced);\n\u003c/script\u003e\n```\n\n## Usage\n```js\nreplaceInHtml(html, search, replacer)\n```\n\n- `html`: a string containing the HTML to perform the replacing on (note that it can't be a document with `\u003chtml\u003e`, `\u003chead\u003e` or `\u003cbody\u003e`; it should only contain elements that go inside `\u003cbody\u003e`)\n- `search`: a string or `RegExp` to replace (don't forget `/g` in the regular expression if you want to find all matching substrings!)\n- `replacer`: either an HTML string to replace with; or a function that accepts the matching text and returns an HTML string, a `Node` (e. g. created using `document.createElement(name)`) or an array of `Node`s\n\nReturns an HTML string.\n\n## How it works\n`replace-in-html` uses `DOMParser` to parse your HTML into an isolated document\nthat doesn't have access to your page; traverses it, replaces any matching text\nand returns the resulting body. It's safe, small and decently fast. (Note that\nif you're processing user-generated HTML, you still have to sanitize it.)\n\n\u003c!---\n## Signature\n```ts\nreplaceInHtml(html: string, search: string | RegExp, replacer: (match: string) =\u003e string | Node | Node[]): string\n```\n---\u003e\n\n***\n\n\u0026copy; 2021 [cutiful](https://github.com/cutiful)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcutiful%2Freplace-in-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcutiful%2Freplace-in-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcutiful%2Freplace-in-html/lists"}