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: 3 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 8 years ago)
• Default Branch: master
• Last Pushed: 2024-03-14T16:28:50.000Z (8 months ago)
• Last Synced: 2024-03-26T17:24:02.826Z (8 months ago)
• Topics: jsx, react, react-components, string-manipulation
• Language: JavaScript
• Homepage:
• Size: 41 KB
• Stars: 22
• Watchers: 1
• Forks: 3
• Open Issues: 2
• 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

[![string-replace-to-array MIT license on NPM](https://img.shields.io/npm/l/string-replace-to-array.svg?style=flat-square)](https://www.npmjs.com/package/string-replace-to-array)

[![string-replace-to-array on NPM](https://img.shields.io/npm/v/string-replace-to-array.svg)](https://www.npmjs.com/package/string-replace-to-array)

[![Build Status](https://img.shields.io/circleci/project/appfigures/string-replace-to-array.svg)](https://circleci.com/gh/appfigures/string-replace-to-array)

[![string-replace-to-array total downloads on NPM](https://img.shields.io/npm/dt/string-replace-to-array.svg?style=flat-square)](https://www.npmjs.com/package/string-replace-to-array)

[![string-replace-to-array monthly downloads on NPM](https://img.shields.io/npm/dm/string-replace-to-array.svg?style=flat-square)](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.