@solariera/text-replacer
v1.1.0
Published
Replace Text to
Downloads
5
Readme
Text Replacer
Replaces tokens in the text and converts them to data for color coordination.
1. Usage
1-1. Installation
# npm
npm install @solariera/text-replacer
# yarn
yarn add @solariera/text-replacer
1-2. Basic Usage
import { textReplacer, ReplaceData } from '@solariera/text-replacer';
const sample: ReplaceData = {
_format: 'I am {name}. I live in {address}.',
_replacers: {
name: { _text: 'Tom', _options: { color: '#0463ff' } },
address: {
_format: '{city}, {country}',
_replacers: {
city: { _text: 'N.Y.' },
country: { _text: 'U.S.A', _options: { color: '#0463ff' } },
},
_options: { color: '#ff0463' },
},
},
};
function App() {
const text = textReplacer(sample);
// [
// { _options: undefined, _text: 'I am' },
// { _text: ' ', _options: undefined },
// { _options: { color: '#0463ff' }, _text: 'Tom' },
// { _text: '. ', _options: undefined },
// { _text: 'I live in ', _options: undefined },
// { _options: { color: '#ff0463' }, _text: 'N.Y.' },
// { _text: ', ', _options: { color: '#ff0463' } },
// { _options: { color: '#0463ff' }, _text: 'U.S.A' },
// { _text: '.', _options: undefined },
// ];
const colored = text.map((data, index) => {
const { _text, _options } = data;
if (_options)
return (
<span style={{ ..._options }} key={index}>
{_text}
</span>
);
return <span key={index}>{_text}</span>;
});
return (
<div className="App">
<span>{colored}</span>
</div>
);
}
export default App;
2. Specifications
2-1. Syntax & Parameters
textReplacer(data
: ReplaceData): ConvertData[]
| No. | Name | Contents |
| :-: | ------------- | ----------------------------------------------------------------- |
| 1 | ReplaceData
| { _format: string; _replacers: Replacers; _options?: unknown } |
| 2 | Replacers
| { [key in string]: ConvertData | ReplaceData } |
| 3 | ConvertData
| { _text: string; _options?: unknown } |