@wendermrn/template-replace-ts v1.6.0

Template Regex Replace

Statements	Branches	Functions	Lines

This project is a simple scheme to replace strings part as like a markdown work. For example: You can use it to create a textarea element in your form and after render a elements with html formatting and etc.

Demo Applications

• React
• Angular

Features

methods

import Template, { TemplateTransformations } from '@wendermrn/template-replace-ts';

const tpl = new Template(); // instance template class

tpl.atob(text); // turns markdown into HTML tags according to the rules
tpl.btoa(text); // turns HTML tags into markdown according to the rules
tpl.replaceTransformations(transformation); // replace all transformation
tpl.addTransform(transformation); // add new transformation rule into existing rules
tpl.clearTransformations(); // clear all transformations rules from the instance
tpl.resetTransformations() // reset transformations to default values

tpl.pickTransformation('bold', ...); // select one or more transformation to apply on atob or btoa
tpl.pickTransformation<TemplateTransformations>('bold', ...); // Same as tpl.pickTransformation(...) but checks types picked (TS)
tpl.pickTransformation<TemplateTransformations | 'custom'>('custom', ...); // Same as tpl.pickTransformation<...>(...) but checks types picked and accept others custom types (TS)

tpl.omitTransformation("italic", ...) // Omit one or more transformations you don't want use on atob or btoa methods
tpl.omitTransformation<TemplateTransformations>("italic", ...) //Same tpl.omitTransformation(...) but checks types omitted (TS)
tpl.omitTransformation<TemplateTransformations | 'custom'>("custom", ...) // Same tpl.omitTransformation<...>(...) but checks types omitted and accept others custom types (TS)

example default rules

const bold: Transformation = {
  atob: {
    from: /\*\*([\s\S]*?)\*\*/g,
    to: '<b>$1</b>',
  },
  btoa: {
    from: /<b>([\s\S]*?)<\/b>/g,
    to: '**$1**',
  },
};

const newLine: Transformation = {
  atob: {
    from: /\n/g,
    to: '<br/>',
  },
  btoa: {
    from: /(<br \/>|<br\/>|<br>)/g,
    to: '\n',
  },
};

const tab: Transformation = {
  atob: {
    from: /\t/g,
    to: '&#9;',
  },
  btoa: {
    from: /"&#9;/g,
    to: '\t',
  },
};

const italic: Transformation = {
  atob: {
    from: /~~([\s\S]*?)~~/g,
    to: '<i>$1</i>',
  },
  btoa: {
    from: /<i>([\s\S]*?)<\/i>/g,
    to: '~~$1~~',
  },
};

Default Transformations Examples

transformations: [
  'bold' , 'newLine', 'tab', 'italic', 'link', 'underline',
  'style', 'deleted', 'subscript', 'superscript','horizontalRule',
  'titles', 'abbrev', 'paragraph', 'lists'
]

Usage

Install

npm i @wendermrn/template-replace-ts

Text base example: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

1. Default transformation

import Template from '@wendermrn/template-replace-ts';

const tpl = new Template();

const text = `**Lorem** Ipsum is simply dummy text of the [printing](https://en.wikipedia.org/wiki/Printing_press) and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type ~~specimen book~~.\n\t It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`;

const textOutput = tpl.atob(text);

/*
//text textOutput

<b>Lorem</b> Ipsum is simply dummy text of the <a href=\"https://en.wikipedia.org/wiki/Printing_press\">printing</a> and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type <i>specimen book</i>.<br/>&#9; It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
 */

2. Default + custom transformation

import Template from '@wendermrn/template-replace-ts';

// custom + default transformations
const tpl = new Template().addTransform({
  underline: {
    atob: {
      from: /___\*([\s\S]*?])\*___/g,
      to: '<u>$1</u>',
    },
    btoa: {
      from: /<u>([\s\S]*?])<\/u>/g,
      to: '___*$1*___',
    },
  },
  uppercase: {
    atob: {
      from: /~up~([\s\S]*?])~up~/g,
      to: `<span class="text-uppercase">$1</span>`,
    },
    btoa: {
      from: /<span class="text-uppercase">([\s\S]*?])<\/span>/g,
      to: '~up~$1~up~',
    },
  },
  // custom replace function
  abbrev: {
    atob: {
      replace: (text: string) => text.replace(/~abbr=\[([\s\S]*?])\]~([\s\S]*?)~abbr~/g, `<abbr title="$1">$2</abbr>`),
    },
    btoa: {
      from: /<abbr title\="([\s\S]*?)">([\s\S]*?)<\/abbr>/g,
      to: '~abbr=[$2]~$1~abbr~',
    },
  },
});

const text = `**Lorem** Ipsum is simply ~up~dummy~up~ text of the [printing](https://en.wikipedia.org/wiki/Printing_press) and typesetting ___*industry*___. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type ~~specimen book~~.\n\t It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`;

const textOutput = tpl.atob(text);

/*
//text textOutput

<b>Lorem</b> Ipsum is simply <span class=\"text-uppercase\">dummy</span> text of the <a href=\"https://en.wikipedia.org/wiki/Printing_press\">printing</a> and typesetting <u>industry</u>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type <i>specimen book</i>.<br/>&#9; It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
 */

3. Replace all transformations and set your own

import Template from '@wendermrn/template-replace-ts';

// replace transformations
const tpl = new Template().replaceTransformations({
  lowercase: {
    atob: {
      from: /~sm~([\s\S]*?)~sm~/g,
      to: `<small>$1</small>`,
    },
    btoa: {
      from: /<span class="text-lowercase">([\s\S]*?)<\/span>/g,
      to: '~sm~$1~sm~',
    },
  },
});

const text = `**Lorem** Ipsum is simply ~up~dummy~up~ text of the [printing](https://en.wikipedia.org/wiki/Printing_press) and typesetting ___*industry*___. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an ~sm~unknown printer~sm~ took a galley of type and scrambled it to make a type ~~specimen book~~.\n\t It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`;

const textOutput = tpl.atob(text);

/*
//text textOutput

**Lorem** Ipsum is simply ~up~dummy~up~ text of the [printing](https://en.wikipedia.org/wiki/Printing_press) and typesetting ___*industry*___. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <small>unknown printer</small> took a galley of type and scrambled it to make a type ~~specimen book~~.\n\t It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
 */

Note that a unique format that worked this time was ~sm~unknown printer~sm~ which became <small>unknown printer</small>.