项目地址

使用场景

开发新闻门户或者EC之类网站后台管理系统的前端同学，往往会有从用户评论中屏蔽脏话，手机号，家庭住址等敏感信息的需求。那么使用manual-data-masking这个超轻量javasript库可以让手动屏蔽敏感信息的操作更加轻松简单。

举个例子，有这么一条用户商品评论：

tmd，怎么我昨天刚买的手机就不好用了，我要立马退货，赶紧给我打电话道歉，手机号：0808080808。

使用manual-data-masking，你可以像这样进行划词屏蔽：

chrome-capture-2022-5-1 (1).gif

当然，被屏蔽的敏感内容集合（dataMasked）和被去除敏感信息的用户评论（textAfterDataMasking）也会同时被生成:

Data masked可以用于构建data masking相关的AI模型的训练数据集：

[
  {
    content: "Damn it",
    category: "Person Name",
    start: 0, // 敏感内容在全文中的开始位置
    end: 7, // 敏感内容在全文中结束位置
  },
  {
    content: "080808080",
    category: "Phone Number",
    start: 120,
    end: 129,
  },
];

Text after data masking:

***，怎么我昨天刚买的手机就不好用了，我要立马退货，赶紧给我打电话道歉，手机号：*********。

Online preview

如何在项目中使用

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>

文档

更多关于参数和方法的说明请参照文档：github.com/HC200ok/man…

Vue 组件

manual-data-masking还有一个Vue2的版本，请参照这里：github.com/HC200ok/vue…

最后

如果你觉得这个库有意思或者有帮助到你，请支持我一下，给我一个github⭐，谢谢！

一个用于手动屏蔽敏感信息的超轻量javascript库