本文已参与「新人创作礼」活动,一起开启掘金创作之路。
需求
做博客社区,肯定是有各种各样的人发布文章,但是我们为了维护整个社区的风气,所以我们要在用户发布文章/评论的时候对用户输入的内容进行敏感词检测、脱敏(把骂人等话语直接提示用户或者用**进行代替)
第三方API选择与使用
最开始选择百度API:ai.baidu.com/ai-doc/ANTI… 但是百度API对敏感内容的检测效果真的不太好,所以就选择了一个其他的接口平台 (百度的接口不仅要先通过appid和appsecret 获取到token之后,再拿着这个token去调用文本敏感内容检测,所以调用也相对比较麻烦) 所以基于百度接口 一调用麻烦,二检测到的结果也不符合预期,所以用下面这个接口
果创云接口
hn216.api.yesapi.cn/docs-api-Ap… 只需要注册一个号,然后通过这个号的appid就可以直接调用接口了,全程只需要两分钟 下面是我测试的时候得到的结果:
Next.js中具体的调用方式如下:
const sexResult = await request.post('http://hn216.api.yesapi.cn/api/App/Common_BannerWord/Check', {
app_key: '注册好号之后,得到的appkey',
content: '待检测的内容'
})
if (sexResult.data.err_code !== 0) {
res.status(200).json({ failContent: sexResult.data.sensitiveWord, ...EXCEPTION_ARTICLE.CONTENT_FAILED });
}
文章敏感词标红
接口返回的结果中data.sensitiveWord 这个数组的话,其实就是我们传递的这个内容中的敏感词数组。 下面我们的思路就是拿到了这个我们内容中的敏感词之后,对原来的内容进行正则匹配并进行标红
核心代码:
const keywordRed = (keyword) => {
if (keyword && keyword !== '') {
let str = tempContent ? tempContent : content
str = str.split(keyword).join("<span style='color:white;background-color: red;'>" + keyword + "</span>")
setContent(str)
tempContent = str
}
}
最后我们的效果是这样的: