String replace to array

Works just like String.prototype.replace but outputs an array instead of a string.

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:

<span>{ content }</span>

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 <br>:

<span>{ replace(content, '\n', <br>) }</span>

and the output will be:

<span>Hello</br>world</span>

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 <Person firstName={ firstName } lastName={ lastName } />
  }
)

// output: ['Hello ', <Person firstName="Hermione" lastName="Granger" />, ...]

For a real-life example check out react-easy-emoji, where this this is used to replace emoji unicode characters with <img> tags.

Installation

npm install --save string-replace-to-array

API

(string, regexp|substr, newValue|function) => array

The API mimics String.prototype.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?

Because we needed the full API of String.replace, especially the regex match parameters which get passed to the replace function.