text-marshal
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

Text Marshal

npm version

Text Marshal is used to format text according to the assigned patterns.

Features

The main purpose of the package is to pattern format the input text while typing (in real-time). The key features for this package is listed below

  • Text format itself as per the assigned pattern e.g. date format, card format, etc
  • Define Infinite text pattern
  • Disallow Character

Install

We can install the package by executing the below command in the terminal:

> npm i text-marshal

Package usage

To use this package, we can import it as below

import { textMarshal } from "text-marshal";

To get started, we can write the textMarshal function as below.

console.log(
  textMarshal({
    input: "4242424242424242",
    template: "xxxx xxxx xxxx xxxx",
  })
);

The above code output in the browser as below:

// output:
{
 template: "xxxx xxxx xxxx xxxx",
 plaintext: "4242424242424242",
 marshaltext: "4242 4242 4242 4242"
}

The textMarshal function accepts JSON objects as input. In the JSON object, we have the option to pass the following parameters:

  • input: It is the user's input text that we need to format.
  • template: It is the defined pattern that the input text needs to match
  • disallowCharacters: It is an array of characters that should be disallowed from the output text
  • isRepeat.value: Bool that triggers the infinite pattern
  • isRepeat.removeStart: Remove the start character e.g. space, dot, etc
  • isRepeat.removeEnd: Remove the end character e.g. space, dot, etc

The output of the textMarshal function is the JSON object. The JSON object output the parameters as below

  • template: It defines the text pattern of the output marshaltext.
  • plaintext: It is the text without formating.
  • marshaltext: The format text output of the input text.

With the textMarshal function, we can also define the infinite patterns. To understand it, we can write the below code.

console.log(
  textMarshal({
    input: "1.s23456789",
    template: "xx.",
    disallowCharacters: [".", "s"],
    isRepeat: {
      value: true,
      removeStart: true,
      removeEnd: true,
    },
  })
);

The output of the above code is shown below:

// output:
{
 template: "xx.xx.xx.xx.x",
 plaintext: "123456789",
 marshaltext: "12.34.56.78.9"
}

You can use this plugin to auto-format the input text while typing. For that, we can define the Card Number input in HTML as below.

<div class="input">
  <label for="cardnumber">Enter Card Number</label>

  <input
    class="headline headline__text"
    type="text"
    id="cardnumber"
    name="cardnumber"
    data-pattern="xxxx xxxx xxxx xxxx"
  />
</div>

By using the textMarshal function, we can automatically format the input text to match the assigned pattern.

const cardnumber = document.getElementById("cardnumber");

cardnumber.oninput = function (e) {
  let data = textMarshal({
    input: e.target.value,
    template: cardnumber.getAttribute("data-pattern"),
    disallowCharacters: [/[a-z]/],
  });

  cardnumber.value = data.marshaltext;
};

Resources

License

Text Marshal is licensed under the MIT license

Package Sidebar

Install

npm i text-marshal

Weekly Downloads

184

Version

0.0.2

License

MIT

Unpacked Size

10.4 kB

Total Files

7

Last publish

Collaborators

  • taimoorsattar7