https://github.com/appfigures/string-replace-to-array
Like Javascript's string.replace, but accepts and returns an array
https://github.com/appfigures/string-replace-to-array
jsx react react-components string-manipulation
Last synced: 6 months ago
JSON representation
Like Javascript's string.replace, but accepts and returns an array
- Host: GitHub
- URL: https://github.com/appfigures/string-replace-to-array
- Owner: appfigures
- License: mit
- Created: 2016-04-28T18:42:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-06-17T02:54:39.000Z (over 1 year ago)
- Last Synced: 2025-06-11T07:43:19.354Z (6 months ago)
- Topics: jsx, react, react-components, string-manipulation
- Language: JavaScript
- Homepage:
- Size: 77.1 KB
- Stars: 24
- Watchers: 0
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - string-replace-to-array
README
# String replace to array
[](https://www.npmjs.com/package/string-replace-to-array)
[](https://www.npmjs.com/package/string-replace-to-array)
[](https://circleci.com/gh/appfigures/string-replace-to-array)
[](https://www.npmjs.com/package/string-replace-to-array)
[](https://www.npmjs.com/package/string-replace-to-array)
Works just like `String.prototype.replace` but outputs an array instead of a string. It's [tiny](https://bundlephobia.com/package/string-replace-to-array) (<1KB) and has no dependencies.
## Why?
We built this for use with React, but it's very generic and doesn't depend on any environment. Consider the following scenario.
Given this string:
```
var content = 'Hello\nworld'
```
and this React markup:
```
{ content }
```
We'll get this output:
```
Hello world
```
_The newline character is ignored when the browser renders the resulting html._
The solution is to replace `\n` with `
`:
```
{ replace(content, '\n',
) }
```
and the output will be:
```
Helloworld
```
When rendered:
```
Hello
world
```
Now the newline will be rendered properly. Yay!
## Example usage
### Simple example
```
var replace = require('string-replace-to-array')
replace('Hello Amy', 'Amy', { name: 'Amy' })
// output: ['Hello ', { name: 'Amy' }]
```
### Full example
```
replace(
'Hello Hermione Granger...',
/(Hermione) (Granger)/g,
function (fullName, firstName, lastName, offset, string) {
return
}
)
// output: ['Hello ', , ...]
```
For a real-life example check out [react-easy-emoji](https://github.com/appfigures/react-easy-emoji), where this this is used to replace emoji unicode characters with `![]()
` tags.
## Installation
```
npm install --save string-replace-to-array
```
## API
```
(string, regexp|substr, newValue|function) => array
```
The API mimics [String.prototype.replace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace). The only differences are:
- The replacer (third parameter) doesn't have to be a string
- Returns an array instead of a string
## Inspiration
Mainly inspired by this conversation: https://github.com/facebook/react/issues/3386
### Why not use [react-replace-string](https://github.com/iansinnott/react-string-replace)?
Because we needed the full API of `String.replace`, especially the regex match parameters which get passed to the replace function.