https://github.com/rpearce/flexible-string-replace

🧶 Safely replace any part of a string with anything. Example: useful for replacing substrings with JSX in React. Replaces https://github.com/rpearce/highlightify and descendent of ideas for trying to fix https://github.com/iansinnott/react-string-replace
https://github.com/rpearce/flexible-string-replace

react replace-string replace-text string-interpolation string-manipulation string-replace typescript

Last synced: 7 months ago
JSON representation

🧶 Safely replace any part of a string with anything. Example: useful for replacing substrings with JSX in React. Replaces https://github.com/rpearce/highlightify and descendent of ideas for trying to fix https://github.com/iansinnott/react-string-replace

• Host: GitHub
• URL: https://github.com/rpearce/flexible-string-replace
• Owner: rpearce
• License: bsd-3-clause
• Created: 2019-03-04T00:00:07.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2023-01-07T03:31:51.000Z (almost 3 years ago)
• Last Synced: 2025-05-07T21:14:14.872Z (7 months ago)
• Topics: react, replace-string, replace-text, string-interpolation, string-manipulation, string-replace, typescript
• Language: JavaScript
• Homepage:
• Size: 1.12 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# flexible-string-replace

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)

[![npm version](https://img.shields.io/npm/v/@rpearce/flexible-string-replace.svg)](https://www.npmjs.com/package/@rpearce/flexible-string-replace) [![npm downloads](https://img.shields.io/npm/dm/@rpearce/flexible-string-replace.svg)](https://www.npmjs.com/package/@rpearce/flexible-string-replace) [![bundlephobia size](https://badgen.net/bundlephobia/minzip/@rpearce/flexible-string-replace)](bundlephobia.com/result?p=@rpearce/flexible-string-replace) [![Build Status](https://travis-ci.org/rpearce/flexible-string-replace.svg?branch=master)](https://travis-ci.org/rpearce/flexible-string-replace) [![Coverage Status](https://coveralls.io/repos/github/rpearce/flexible-string-replace/badge.svg?branch=master)](https://coveralls.io/github/rpearce/flexible-string-replace?branch=master) [![Maintainability](https://api.codeclimate.com/v1/badges/ca092c1e9dfe10b455d7/maintainability)](https://codeclimate.com/github/rpearce/flexible-string-replace/maintainability)

## Links

* [Installation](#installation)

* [Usage](#usage)

* [All Contributors](#contributors)

* [Authors](./AUTHORS)

* [Changelog](./CHANGELOG.md)

* [Contributing](./CONTRIBUTING.md)

* [Code of Conduct](./CODE_OF_CONDUCT.md)

## Installation

```

$ npm i @rpearce/flexible-string-replace

```

or

```

$ yarn add @rpearce/flexible-string-replace

```

## Usage

`flexible-string-replace` mirrors the functionality of

[`String.prototype.replace`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace)

with the following exceptions:

* you can transform your match however you see fit

* the return value is `[ * ]` – an Array of whatever type your `Replacement` is

  or returns. For example, if you pass it a function, then you'll get back a

  list of strings as well as your match transformations, whereas if you pass a

  string, you'll get back simply a list of strings with your replacement applied

* the argument order is `(Pattern, Replacement, String)` so that if you'd like

  to [`curry`](https://ramdajs.com/docs/#curry) the function and partially apply

  the first two arguments, you can then reuse those over and over again with

  different strings

Note: while these examples use some JSX, your matching function can return

whatever you like.

```js

import flexibleStringReplace from '@rpearce/flexible-string-replace'

const str = 'The rain in Spain falls mainly on the plain. Spain is nice.'

const searchText = 'spain'

const replacement = (match, offset) => {match}

// usage with RegExp pattern

const pattern = new RegExp(searchText, 'igm')

flexibleStringReplace(pattern, replacement, str)

// [

//   'The rain in ',

//   Spain,

//   ' falls mainly on the plain. ',

//   Spain,

//   ' is nice.'

// ]

// usage with RegExp pattern and string Replacement

const pattern = 'Spain'

flexibleStringReplace(pattern, 'foobar', str)

// [

//   'The rain in ',

//   'foobar',

//   ' falls mainly on the plain. ',

//   'foobar',

//   ' is nice.'

// ]

// usage with String pattern (no match)

const pattern = 'spain'

flexibleStringReplace(pattern, replacement, str)

// ["The rain in Spain falls mainly on the plain. Spain is nice."]

// usage with String pattern (match)

const pattern = 'Spain'

flexibleStringReplace(pattern, replacement, str)

// [

//   'The rain in ',

//   Spain,

//   ' falls mainly on the plain. Spain is nice.',

// ]

```

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Robert Pearce
💻 🤔 ⚠️ 💡 📖

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!