A lightweight javascript library for manual data masking

manual-data-masking is a lightweight javascript library for manual data masking.

Repository link:

https://github.com/HC200ok/manual-data-masking

Manual data masking?

Manual data masking is an operation that labels and hides sensitive data, creates new text that hides (masks) sensitive information.

Assume that there is a customer comment including sensitive data like swear word, person name, home address...

e.g.

Damn it, The phone i just bought last week has been broken 😠, I need refund
right now, Call me on this phone number: 080808080.

By using manual-data-masking you can do a manual data masking job like this:

Online preview

At the same time, data masked and text after data masking will be generated by manual-data-masking.

Data masked:

[
  {
    content: "Damn it",
    category: "Person Name",
    start: 0, // start index in text string
    end: 7, // end index in text string
  },
  {
    content: "080808080",
    category: "Phone Number",
    start: 120,
    end: 129,
  },
];

Data masked can be used to build a labeled data set for training data masking related AI model.

Text after data masking:

*******, The phone i just bought last week has been broken 😠, I need refund
right now, Call me on this phone number: *********.

How to use in your project

ES modules

npm install manual-data-masking

import { create as createManualDataMasking } from "manual-data-masking";

const dataMasked = [
  {
    "content": "Damn it",
    "category": "Person Name",
    "start": 0,
    "end": 7
  }
]

const categories = [
  {
    "value": "Person Name",
    "color": "#b6656c"
  },
  {
    "value": "Swear Word",
    "color": "#577eba"
  },
  {
    "value": "Phone Number",
    "color": "#3e6146"
  }
]

const text = "Damn it, The phone i just bought last week has been broken 😠, \n I need refund right now, Call me on this phone number: 080808080."

const $manualDataMasking = createManualDataMasking({
  container: document.getElementById("demo"),
  text,
  dataMasked,
  categories,
  replaceCharactor: "*",
  dataMaskingCharactor: "X",
  maxHeight: 100
})

$manualDataMasking.on("afterDataMasking", (dataMasked, textAfterDataMasking) => {
  console.log(JSON.stringify(dataMasked));
  console.log(textAfterDataMasking);
})
</script>

Script tag:

<script src="https://unpkg.com/manual-data-masking"></script>

<script>
  const dataMasked = [
    {
      content: "Damn it",
      category: "Person Name",
      start: 0,
      end: 7,
    },
  ];

  const categories = [
    {
      value: "Person Name",
      color: "#b6656c",
    },
    {
      value: "Swear Word",
      color: "#577eba",
    },
    {
      value: "Phone Number",
      color: "#3e6146",
    },
  ];

  const text =
    "Damn it, The phone i just bought last week has been broken 😠, \n I need refund right now, Call me on this phone number: 080808080.";

  const $manualDataMasking = manualDataMasking.create({
    container: document.getElementById("demo"),
    text,
    dataMasked,
    categories,
    replaceCharactor: "*",
    dataMaskingCharactor: "X",
    maxHeight: 100,
  });

  $manualDataMasking.on(
    "afterdataMasking",
    (dataMasked, textAfterDataMasking) => {
      console.log(JSON.stringify(dataMasked));
      console.log(textAfterDataMasking);
    }
  );
</script>

Documentation

For more information, please check the documentation here: https://github.com/HC200ok/manual-data-masking/blob/master/README.md