{"id":19615160,"url":"https://github.com/hc200ok/manual-data-masking","last_synced_at":"2025-04-28T02:31:17.622Z","repository":{"id":39985209,"uuid":"344750635","full_name":"HC200ok/manual-data-masking","owner":"HC200ok","description":"A lightweight javascript library for manual data masking","archived":false,"fork":false,"pushed_at":"2022-07-19T06:58:32.000Z","size":49035,"stargazers_count":21,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-21T11:00:23.746Z","etag":null,"topics":["data-masking","dataset","dataset-generation","ecmascript2020","javascript","library","manual-data-masking","nlp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HC200ok.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-05T08:55:10.000Z","updated_at":"2024-12-24T15:44:54.000Z","dependencies_parsed_at":"2022-06-26T02:25:50.332Z","dependency_job_id":null,"html_url":"https://github.com/HC200ok/manual-data-masking","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fmanual-data-masking","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fmanual-data-masking/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fmanual-data-masking/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fmanual-data-masking/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HC200ok","download_url":"https://codeload.github.com/HC200ok/manual-data-masking/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251237970,"owners_count":21557376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-masking","dataset","dataset-generation","ecmascript2020","javascript","library","manual-data-masking","nlp"],"created_at":"2024-11-11T10:55:37.555Z","updated_at":"2025-04-28T02:31:17.045Z","avatar_url":"https://github.com/HC200ok.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"./images/miss-mallard.png\"  width=\"200\"/ /\u003e\n\u003c/p\u003e\n\nA lightweight javascript library for manual data masking.\n\n\u003cimg src=\"./images/size.png\"  /\u003e\n\n# Manual data masking?\n\nManual data masking is a kind of operation that labels and hides sensitive data, creates new text that hides (masks) sensitive information.\n\nAssume that there is a customer comment including sensitive data like swear word, person name, home address...\n\ne.g.\n\n```html\nDamn it, The phone I just bought last week has been broken 😠, I need refund\nright now, Call me on this phone number: 080808080.\n```\n\nBy using `manual-data-masking` you can do a manual data masking job like this:\n\n\u003cimg src=\"./images/data-masking.gif\"  /\u003e\n\n[Online preview](https://igykl.csb.app/)\n\n[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/easy-data-masking-igykl?file=/index.html)\n\nAt the same time, `dataMasked` and `textAfterDataMasking` will be generated by `manual-data-masking`.\n\n`dataMasked`:\n\n```js\n[\n  {\n    content: \"Damn it\",\n    category: \"Swear word\",\n    start: 0, // start index in text string\n    end: 7, // end index in text string\n  },\n  {\n    content: \"080808080\",\n    category: \"Phone Number\",\n    start: 120,\n    end: 129,\n  },\n];\n```\n\u003e `dataMasked` can be used to build a dataset for training data-masking related NLP model.\n\n`textAfterDataMasking`:\n\n```html\n*******, The phone I just bought last week has been broken 😠, I need refund\nright now, Call me on this phone number: *********.\n```\n# How to use\n\n### ES modules\n\n```bash\nnpm install manual-data-masking\n```\n\n```html\n\u003cdiv id=\"demo\"\u003e\u003c/div\u003e\n```\n\n```js\nimport { create as createManualDataMasking } from \"manual-data-masking\";\n\nconst dataMasked = [\n  {\n    \"content\": \"Damn it\",\n    \"category\": \"Swear word\",\n    \"start\": 0,\n    \"end\": 7\n  }\n]\n\nconst categories = [\n  {\n    \"value\": \"Person Name\",\n    \"color\": \"#b6656c\"\n  },\n  {\n    \"value\": \"Swear Word\",\n    \"color\": \"#577eba\"\n  },\n  {\n    \"value\": \"Phone Number\",\n    \"color\": \"#3e6146\"\n  }\n]\n\nconst 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.\"\n\nconst $manualDataMasking = createManualDataMasking({\n  container: document.getElementById(\"demo\"),\n  text,\n  dataMasked,\n  categories,\n  replaceCharactor: \"*\",\n  dataMaskingCharactor: \"X\",\n  maxHeight: 100\n})\n\n$manualDataMasking.on(\"afterDataMasking\", (dataMasked, textAfterDataMasking) =\u003e {\n  console.log(JSON.stringify(dataMasked));\n  console.log(textAfterDataMasking);\n})\n\u003c/script\u003e\n\n```\n\n### Script tag:\n\n```html\n\u003cscript src=\"https://unpkg.com/manual-data-masking\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"demo\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n  const dataMasked = [\n    {\n      content: \"Damn it\",\n      category: \"Swear word\",\n      start: 0,\n      end: 7,\n    },\n  ];\n\n  const categories = [\n    {\n      value: \"Person Name\",\n      color: \"#b6656c\",\n    },\n    {\n      value: \"Swear Word\",\n      color: \"#577eba\",\n    },\n    {\n      value: \"Phone Number\",\n      color: \"#3e6146\",\n    },\n  ];\n\n  const text =\n    \"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.\";\n\n  const $manualDataMasking = manualDataMasking.create({\n    container: document.getElementById(\"demo\"),\n    text,\n    dataMasked,\n    categories,\n    replaceCharactor: \"*\",\n    dataMaskingCharactor: \"X\",\n    maxHeight: 100,\n  });\n\n  $manualDataMasking.on(\n    \"afterDataMasking\",\n    (dataMasked, textAfterDataMasking) =\u003e {\n      console.log(JSON.stringify(dataMasked));\n      console.log(textAfterDataMasking);\n    }\n  );\n\u003c/script\u003e\n```\n\n## Options\n\n| Property             | Description                                                                                                                                                                                            | Type               | Required | Default |\n| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | -------- | ------- |\n| categories           | Categories of sensitive data. \u003cbr\u003ee.g.\u003cbr\u003e [{ \u003cbr\u003e \u0026nbsp;\u0026nbsp;value: \"Person Name\", \u003cbr\u003e \u0026nbsp;\u0026nbsp;color: \"#3e6146\" \u003cbr\u003e }, \u003cbr\u003e {\u003cbr\u003e \u0026nbsp;\u0026nbsp;value: \"Bad word\"\u003cbr\u003e}] \u003cbr\u003e Notice: if you don't set color property, the default color will be `#577eba` | array              | true     | null    |\n| container            | Container dom element.                                                                                                                                                                                  | Dom Element Object | true     | null    |\n| dataMasked           | Sensitive data been masked.\u003cbr\u003ee.g.\u003cbr\u003e[{\u003cbr\u003e\u0026nbsp;\u0026nbsp;content: \"Damn it\",\u003cbr\u003e\u0026nbsp;\u0026nbsp;category: \"Person Name\",\u003cbr\u003e\u0026nbsp;\u0026nbsp;start: 0, // start index in text string\u003cbr\u003e\u0026nbsp;\u0026nbsp;end: 7, // end index in text string\u003cbr\u003e\u0026nbsp;}]                                                                                                                                                                             | array              | false    | []      |\n| dataMaskingCharactor | Charactor in data masking entity                                                                                                                                                                       | string             | false    | '●'     |\n| maxHeight            | Max height of container, you can scroll the content if the height of container is over max height.                                                                                                       | number             | false    | null    |\n| replaceCharactor     | Charactor be used to replace the sensitive data                                                                                                                                                        | string             | false    | \"\\*\"    |\n| text                 | Origin text content. \u003cbr\u003e Attention: please use `\\n` in where you want to wrap a new line                                                                                                                   | string             | true     | null    |\n\n## Instance functions\n\n|    Name    | Description                                                                      |\n| :---------------------: | -------------------------------------------------------------------------------- |\n|      getDataMasked      | Get sensitive data been masked \u003cbr/\u003e `$manualDataMasking.getDataMasked()`        |\n| getTextAfterDataMasking | Get text after data masking \u003cbr/\u003e `$manualDataMasking.getTextAfterDataMasking()` |\n\n## Events\n\n|  Event Name  | Description                                                                         |\n| :----------: | ----------------------------------------------------------------------------------- |\n| 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. \u003cbr\u003e\u003cbr\u003e $manualDataMasking.on( \"afterDataMasking\", (dataMasked, textAfterDataMasking) =\u003e {\u003cbr\u003e \u0026nbsp;\u0026nbsp;console.log(JSON.stringify(dataMasked));\u003cbr\u003e \u0026nbsp;\u0026nbsp;console.log(textAfterDataMasking);\u003cbr\u003e});|\n\n\n## Vue2 version\n`manual-data-masking` has another version made with Vue.js 2.x: https://github.com/HC200ok/vue2-text-annotation\n\n\n## Build Setup\n\n```bash\n# install dependencies\nnpm install\n# serve with hot reload at localhost:8080\nnpm run dev\n# build for production with minification\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhc200ok%2Fmanual-data-masking","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhc200ok%2Fmanual-data-masking","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhc200ok%2Fmanual-data-masking/lists"}