Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hc200ok/manual-data-masking
A lightweight javascript library for manual data masking
https://github.com/hc200ok/manual-data-masking
data-masking dataset dataset-generation ecmascript2020 javascript library manual-data-masking nlp
Last synced: 3 days ago
JSON representation
A lightweight javascript library for manual data masking
- Host: GitHub
- URL: https://github.com/hc200ok/manual-data-masking
- Owner: HC200ok
- License: mit
- Created: 2021-03-05T08:55:10.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-07-19T06:58:32.000Z (over 2 years ago)
- Last Synced: 2024-01-29T10:42:08.005Z (10 months ago)
- Topics: data-masking, dataset, dataset-generation, ecmascript2020, javascript, library, manual-data-masking, nlp
- Language: JavaScript
- Homepage:
- Size: 46.8 MB
- Stars: 18
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A lightweight javascript library for manual data masking.
# Manual data masking?
Manual data masking is a kind of 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.
```html
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](https://igykl.csb.app/)
[](https://codesandbox.io/s/easy-data-masking-igykl?file=/index.html)
At the same time, `dataMasked` and `textAfterDataMasking` will be generated by `manual-data-masking`.
`dataMasked`:
```js
[
{
content: "Damn it",
category: "Swear word",
start: 0, // start index in text string
end: 7, // end index in text string
},
{
content: "080808080",
category: "Phone Number",
start: 120,
end: 129,
},
];
```
> `dataMasked` can be used to build a dataset for training data-masking related NLP model.
`textAfterDataMasking`:
```html
*******, The phone I just bought last week has been broken 😠, I need refund
right now, Call me on this phone number: *********.
```
# How to use
### ES modules
```bash
npm install manual-data-masking
```
```html
```
```js
import { create as createManualDataMasking } from "manual-data-masking";
const dataMasked = [
{
"content": "Damn it",
"category": "Swear word",
"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 tag:
```html
const dataMasked = [
{
content: "Damn it",
category: "Swear word",
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);
}
);
```
## Options
| Property | Description | Type | Required | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | -------- | ------- |
| categories | Categories of sensitive data.
e.g.
[{
value: "Person Name",
color: "#3e6146"
},
{
value: "Bad word"
}]
Notice: if you don't set color property, the default color will be `#577eba` | array | true | null |
| container | Container dom element. | Dom Element Object | true | null |
| dataMasked | Sensitive data been masked.
e.g.
[{
content: "Damn it",
category: "Person Name",
start: 0, // start index in text string
end: 7, // end index in text string
}] | array | false | [] |
| dataMaskingCharactor | Charactor in data masking entity | string | false | '●' |
| maxHeight | Max height of container, you can scroll the content if the height of container is over max height. | number | false | null |
| replaceCharactor | Charactor be used to replace the sensitive data | string | false | "\*" |
| text | Origin text content.
Attention: please use `\n` in where you want to wrap a new line | string | true | null |
## Instance functions
| Name | Description |
| :---------------------: | -------------------------------------------------------------------------------- |
| getDataMasked | Get sensitive data been masked
`$manualDataMasking.getDataMasked()` |
| getTextAfterDataMasking | Get text after data masking
`$manualDataMasking.getTextAfterDataMasking()` |
## Events
| Event Name | Description |
| :----------: | ----------------------------------------------------------------------------------- |
| afterDataMasking | Registered callback functions will be triggered when new sensitive data been masked. Value of text after masking and data msked can be used inside of the callback function.
$manualDataMasking.on( "afterDataMasking", (dataMasked, textAfterDataMasking) => {
console.log(JSON.stringify(dataMasked));
console.log(textAfterDataMasking);
});|
## Vue2 version
`manual-data-masking` has another version made with Vue.js 2.x: https://github.com/HC200ok/vue2-text-annotation
## Build Setup
```bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```