小程序-云开发-如何对敏感词进行过滤即内容安全的检测(下)

<!--pages/msgSecCheck/msgSecCheck.wxml-->
<view class="container">
  <textarea class="content" placeholder="写点文字..." bindinput="onInput" auto-focus bindfocus="onFocus" bindblur="onBlur">
  </textarea>
</view>

<view class="footer">
  <button class="send-btn" size="default" bind:tap="send">发布</button>
</view>

/* pages/msgSecCheck/msgSecCheck.wxss */
.container {
  padding: 20rpx;
}

.content {
  width: 100%;
  height: 360rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  border: 1px solid #ccc;
}

.footer {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  background: #34bfa3;
}

.send-btn {
  width: 100% !important;
  color: #fff;
  font-size: 32rpx;
}

button {
  width: 100%;
  background: #34bfa3;
  border-radius: 0rpx;
}

button::after {
  border-radius: 0rpx !important;
}

// pages/msgSecCheck/msgSecCheck.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    textareaVal: ''
  },
  // 监听表单时,数据有变化时
  onInput(event) {
    let textVal = event.detail.value;
    this.setData({
      textareaVal: textVal
    })

  },

  // 聚焦焦点时
  onFocus() {
    console.log('聚焦焦点时');
  },

  // 失去焦点时
  onBlur(event) {
    console.log("失去焦点时");
    // 前端可进行手动的弱校验,也可以在失去焦点时发送请求进行文本的校验,但是每次失去焦点就请求一次,这样是消耗云资源的,其实在发布时候与失去焦点做校验两者都可以


  },

  // 发布
  send() {
    // 请求msgSecCheck1云函数,对文本内容进行校验
    this._requestCloudMsgCheck();
  },

  _requestCloudMsgCheck() {
    let textareaVal = this.data.textareaVal;
    wx.cloud.callFunction({
      name: 'msgSecCheck2', // 只是把这个云函数名替换了一下的,其他并没有什么变化
      data: {
        content: textareaVal
      }
    }).then(res => {
      console.log(res);
      
    }).catch(err => {
      // 失败时,也就是违规做一些用户提示,或者禁止下一步操作等之类的业务逻辑操作
      console.error(err);
    })
  }

})

{
  "permissions": {
    "openapi": [
      "security.msgSecCheck"
    ]
  }
}

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async(event, context) => {
  try {
    const result = await cloud.openapi.security.msgSecCheck({
      content: event.content // 小程序端传过来的值,content字段接收
    })
    return result;
  } catch (err) {
    return err;
  }
}

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async(event, context) => {
  try {
    const result = await cloud.openapi.security.msgSecCheck({
      content: event.content
    })

    if (result.errCode === 87014) {
      return {
        code: 500,
        msg: '内容含有违法违规内容',
        data: result
      }
    } else {
      return {
        code: 200,
        msg: '内容ok',
        data: result
      }
    }
  } catch (err) {
    // 错误处理
    if (err.errCode === 87014) {
      return {
        code: 500,
        msg: '内容含有违法违规内容',
        data: err
      }
    }
    return {
      code: 502,
      msg: '调用msgSecCheck接口异常',
      data: err
    }
  }
}

/**
 *
 * 您也是可以单独将自定义的违规词汇放到一个utils文件,单独js文件当中,通过export的方式导出来,在想要使用的地方引入进去也是可以的
 */
const g_reg = /好贱|操|杀|贱|傻|疯|炮|奸|猪|笨|屁|麻痹|滚犊子|婊/gm

// 手动对敏感词检测
  _hasSensitiveWords(str) {
    if (str == '' || str == 'undefined') return false;
    if (g_reg.test(str)) { // 如果检测有违规,就返回true
      return true;
    }
  }

// 失去焦点时
  onBlur(event) {
    console.log("失去焦点时");
    // 前端可进行手动的弱校验,也可以在失去焦点时发送请求进行文本的校验,但是每次失去焦点就请求一次,这样是消耗云资源的,其实在发布时候与失去焦点做校验两者都可以
    const textVal = event.detail.value;
    if (this._hasSensitiveWords(textVal)) {
      wx.showToast({
        title: '含有敏感词,敏感词将会用***号处理',
      })
      this.setData({
        hasSensitiveWords: textVal.replace(g_reg, "***")
      })
      console.log(this.data.textareaVal);
    } else {
      this.setData({
        hasSensitiveWords: textVal
      })
      console.log(this.data.textareaVal);
    }

  }

/**
 *
 * 你也是可以单独将自定义的文本放到一个js文件当中,通过export的方式导出来,在想要使用的地方引入进去也是可以的
 */
const g_reg = /操|杀|贱|傻|疯|炮|奸|猪|笨|屁|麻痹|滚犊子|婊/gm


// pages/msgSecCheck/msgSecCheck.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    textareaVal: '',
    hasSensitiveWords: ''
  },
  // 监听表单时,数据有变化时
  onInput(event) {
    let textVal = event.detail.value;
    this.setData({
      textareaVal: textVal
    })

  },

  // 聚焦焦点时
  onFocus() {
    console.log('聚焦焦点时');
  },

  // 失去焦点时
  onBlur(event) {
    console.log("失去焦点时");
    // 前端可进行手动的弱校验,也可以在失去焦点时发送请求进行文本的校验,但是每次失去焦点就请求一次,这样是消耗云资源的,其实在发布时候与失去焦点做校验两者都可以
    const textVal = event.detail.value;
    if (this._hasSensitiveWords(textVal)) {
      wx.showToast({
        title: '含有敏感词,敏感词将会用***号处理',
      })
      this.setData({
        hasSensitiveWords: textVal.replace(g_reg, "***")
      })
      console.log(this.data.textareaVal);
    } else {
      this.setData({
        hasSensitiveWords: textVal
      })
      console.log(this.data.textareaVal);
    }

  },

  // 发布
  send() {
    // 请求msgSecCheck1云函数,对文本内容进行校验
    this._requestCloudMsgCheck();
  },

  _requestCloudMsgCheck() {
    let textareaVal = this.data.textareaVal;
    wx.cloud.callFunction({
      name: 'msgSecCheck2',
      data: {
        content: textareaVal
      }
    }).then(res => {
      console.log(res);

    }).catch(err => {
      // 失败时,也就是违规做一些用户提示,或者禁止下一步操作等之类的业务逻辑操作
      console.error(err);
    })
  },

  // 手动对敏感词检测
  _hasSensitiveWords(str) {
    if (str == '' || str == 'undefined') return false;
    if (g_reg.test(str)) { // 如果检测有违规,就返回true
      return true;
    }
  }

})

<!--pages/msgSecCheck/msgSecCheck.wxml-->
<view class="container">
  <textarea class="content" placeholder="写点文字..." bindinput="onInput" auto-focus bindfocus="onFocus" bindblur="onBlur">
  </textarea>
</view>
<view>
    {{ hasSensitiveWords }}
</view>

<view class="footer">
  <button class="send-btn" size="default" bind:tap="send">发布</button>
</view>