GitHub - HC200ok/manual-data-masking: A lightweight javascript library for manua...
source link: https://github.com/HC200ok/manual-data-masking
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
Imagine that there is a customer comment including sensitive data like swear word, person name, home address...
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:
At the same time, data masked and text after data masking will be generated by manual-data-masking
.
Data masked:
[
{
content: "Damn it",
category: "Swear word",
start: 0, // start index in text string
end: 7, // start 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
ES modules
npm install manual-data-masking
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>
Script tag:
<script src="https://unpkg.com/manual-data-masking"></script>
<script>
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);
}
);
</script>
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); }); |
Stargazers
Vue2 version
manual-data-masking
has another version made with Vue.js 2.x: https://github.com/HC200ok/vue2-text-annotation
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK