Next.js实现文章敏感词检测并标红提示用户修改

683 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

需求

做博客社区,肯定是有各种各样的人发布文章,但是我们为了维护整个社区的风气,所以我们要在用户发布文章/评论的时候对用户输入的内容进行敏感词检测、脱敏(把骂人等话语直接提示用户或者用**进行代替)

第三方API选择与使用

最开始选择百度API:ai.baidu.com/ai-doc/ANTI… 但是百度API对敏感内容的检测效果真的不太好,所以就选择了一个其他的接口平台 (百度的接口不仅要先通过appid和appsecret 获取到token之后,再拿着这个token去调用文本敏感内容检测,所以调用也相对比较麻烦) 所以基于百度接口 一调用麻烦,二检测到的结果也不符合预期,所以用下面这个接口

果创云接口

hn216.api.yesapi.cn/docs-api-Ap… 只需要注册一个号,然后通过这个号的appid就可以直接调用接口了,全程只需要两分钟 下面是我测试的时候得到的结果:

image.png

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
    }
  }

最后我们的效果是这样的:

image.png