{"id":13622511,"url":"https://github.com/iansinnott/react-string-replace","last_synced_at":"2026-01-02T02:46:51.414Z","repository":{"id":37502925,"uuid":"51038092","full_name":"iansinnott/react-string-replace","owner":"iansinnott","description":"A simple way to safely do string replacement with React components","archived":false,"fork":false,"pushed_at":"2024-02-27T14:46:43.000Z","size":739,"stargazers_count":661,"open_issues_count":26,"forks_count":55,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-10T01:03:40.580Z","etag":null,"topics":["react","react-components","string-manipulation"],"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/iansinnott.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-03T23:22:02.000Z","updated_at":"2025-05-02T07:54:26.000Z","dependencies_parsed_at":"2024-06-12T06:43:16.670Z","dependency_job_id":"0448aafb-83c7-48e0-b6a2-f3941f31c542","html_url":"https://github.com/iansinnott/react-string-replace","commit_stats":{"total_commits":110,"total_committers":13,"mean_commits":8.461538461538462,"dds":"0.23636363636363633","last_synced_commit":"ead57a2d814558a288a069b99dcf3f1ae406a71e"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iansinnott%2Freact-string-replace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iansinnott%2Freact-string-replace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iansinnott%2Freact-string-replace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iansinnott%2Freact-string-replace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iansinnott","download_url":"https://codeload.github.com/iansinnott/react-string-replace/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254254041,"owners_count":22039792,"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":["react","react-components","string-manipulation"],"created_at":"2024-08-01T21:01:20.331Z","updated_at":"2026-01-02T02:46:51.409Z","avatar_url":"https://github.com/iansinnott.png","language":"JavaScript","readme":"# React String Replace\n\n[![react-string-replace.js on NPM](https://img.shields.io/npm/v/react-string-replace.svg)](https://www.npmjs.com/package/react-string-replace)\n\nA simple way to safely do string replacement with React components. Zero dependencies.\n\n\u003e Aka turn a string into an array of React components\n\n## Install\n\n```sh\nnpm install react-string-replace\n# or\nyarn add react-string-replace\n# or\nbun add react-string-replace\n```\n\n## Usage\n\nFirst, import the lib. Both `require` and `import` are supported.\n\n```js\nimport reactStringReplace from \"react-string-replace\";\n// OR\nconst reactStringReplace = require(\"react-string-replace\");\n```\n\nExamples will use `import` since it is more common in the React ecosystem.\n\n### Simple Example\n\n```js\nimport reactStringReplace from 'react-string-replace';\n\nreactStringReplace('whats your name', 'your', (match, i) =\u003e (\n  \u003cspan\u003e{match}\u003c/span\u003e\n));\n// =\u003e [ 'whats ', \u003cspan\u003eyour\u003c/span\u003e, ' name' ]\n```\n\n### More realistic example\n\nHighlight all digits within a string by surrounding them in span tags:\n\n```js\nreactStringReplace(\"Apt 111, phone number 5555555555.\", /(\\d+)/g, (match, i) =\u003e (\n  \u003cspan key={i} style={{ color: \"red\" }}\u003e\n    {match}\n  \u003c/span\u003e\n));\n// =\u003e\n// [\n//   'Apt ',\n//   \u003cspan style={{ color: 'red' }}\u003e111\u003c/span\u003e,\n//   ', phone number ',\n//   \u003cspan style={{ color: 'red' }}\u003e5555555555\u003c/span\u003e,\n//   '.'\n// ]\n```\n\n### Within a React component\n\n```jsx\nimport reactStringReplace from \"react-string-replace\";\n\nfunction HighlightNumbers() {\n  const content = \"Hey my number is 555-555-5555.\";\n  return (\n    \u003cdiv\u003e\n      {reactStringReplace(content, /(\\d+)/g, (match, i) =\u003e (\n        \u003cspan key={i} style={{ color: \"red\" }}\u003e\n          {match}\n        \u003c/span\u003e\n      ))}\n    \u003c/div\u003e\n  );\n}\n```\n\n### Multiple replacements on a single string\n\nYou can run multiple replacements on one string by calling the function multiple times on the returned result. For instance, if we want to match URLs, @-mentions and hashtags in a string we could do the following:\n\n```js\nimport reactStringReplace from \"react-string-replace\";\n\nconst text =\n  \"Hey @ian_sinn, check out this link https://github.com/iansinnott/ Hope to see you at #reactconf\";\nlet replacedText;\n\n// Match URLs\nreplacedText = reactStringReplace(text, /(https?:\\/\\/\\S+)/g, (match, i) =\u003e (\n  \u003ca key={match + i} href={match}\u003e\n    {match}\n  \u003c/a\u003e\n));\n\n// Match @-mentions\nreplacedText = reactStringReplace(replacedText, /@(\\w+)/g, (match, i) =\u003e (\n  \u003ca key={match + i} href={`https://twitter.com/${match}`}\u003e\n    @{match}\n  \u003c/a\u003e\n));\n\n// Match hashtags\nreplacedText = reactStringReplace(replacedText, /#(\\w+)/g, (match, i) =\u003e (\n  \u003ca key={match + i} href={`https://twitter.com/hashtag/${match}`}\u003e\n    #{match}\n  \u003c/a\u003e\n));\n\n// =\u003e [\n//   'Hey ',\n//   \u003ca href='https://twitter.com/ian_sinn'\u003e@ian_sinn\u003c/a\u003e\n//   ', check out this link ',\n//   \u003ca href='https://github.com/iansinnott/'\u003ehttps://github.com/iansinnott/\u003c/a\u003e,\n//   '. Hope to see you at ',\n//   \u003ca href='https://twitter.com/hashtag/reactconf'\u003e#reactconf\u003c/a\u003e,\n//   '',\n// ];\n```\n\n### Full Example\n\nSee the [`example/`](https://github.com/iansinnott/react-string-replace/tree/master/example) directory for a runnable example.\n\n## Why?\n\nI wanted an easy way to do string replacement similar to `String.prototype.replace` within React components **without** breaking React's built in string escaping and XSS protection. This meant standard string replacement combined with `dangerouslySetInnerHTML` was out of the question.\n\n## API\n\n### reactStringReplace(string, match, replacementFunction, count)\n\n#### string\n\nType: `string|array`\n\nThe string or array you would like to do replacement on.\n\n**NOTE:** When passed an array this is the same as running the replacement on every string within the array. Any non-string values in the array will be left untouched.\n\n#### match\n\nType: `regexp|string`\n\nThe string or RegExp you would like to replace within `string`.\n\n**NOTE:** When using a `RegExp` you **MUST** include a capturing group. (`/(hey)/g` is ok, `/hey/g` is not.)\n\nExample: Replace all occurrences of `'hey'` with `\u003cspan\u003ehey\u003c/span\u003e`\n\n```js\nreactStringReplace(\"hey hey you\", /(hey)/g, () =\u003e \u003cspan\u003ehey\u003c/span\u003e);\n```\n\n#### replacementFunction\n\nType: `function`\n\nThe replacer function to run each time `match` is found. This function will be passed the matching string and an `index` which can be used for adding keys to replacement components if necessary. Character `offset` identifies the position of match start in the provided text.\n\n```js\nconst replacementFunction = (match, index, offset) =\u003e \u003cspan key={index}\u003e{match}\u003c/span\u003e;\nreactStringReplace(\"hey hey you\", /(hey)/g, replacementFunction);\n```\n\n#### count\n\nType: `number`\n\nThe number of substitutions to perform - for example if `count` is 1, then only the first occurrence of the string will be replaced.\n\nExample: Replace first occurrence of `'hey'` with `\u003cspan\u003ehey\u003c/span\u003e`\n\n```js\nreactStringReplace(\"hey hey you\", \"hey\", () =\u003e \u003cspan\u003ehey\u003c/span\u003e, 1);\n```\n\n## API Stability\n\nThe API is stable and production ready.\n\n**v2.0.0 Breaking Change:** The `index` parameter passed to the replacement function now starts at 0 and increments by 1 (previously it started at 1 and incremented by 2).\n\nFor details on API tests see [the tests file](./index.test.js).\n\n## License\n\nMIT © [Ian Sinnott](https://github.com/iansinnott)\n","funding_links":[],"categories":["JavaScript","React","Packages"],"sub_categories":["Utils"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiansinnott%2Freact-string-replace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiansinnott%2Freact-string-replace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiansinnott%2Freact-string-replace/lists"}