最近有个需求，由于一些原因，在发送信息时不能输入非法字符，只能输入中英文、数字及下划线。

由于产品是面向社会用户，所以担心他们不清楚哪里输入了非法字符，特意做了非法字符的提示，如下图：特殊字符显示出来，并标上了颜色，这样看起来会特别方便。至于为什么不直接禁用非法字符的输入，是感觉非法字符很多，在用户不清楚的情况下，输入不上会让其感觉很怪异，体验度不好，所以选择做相应的提示。

不多说，直接上js中的代码（html略），然后再讲解，代码不难：

// 封装特殊字符检测方法

    specialCharacters(value) { // 接受的参数是用户输入的内容 
      let arr = value.split('') // 字符串转数组
      arr.forEach((item, index, arr) => {  // 遍历每一个字符串
        let filterRule = /[^\u4e00-\u9fa5a-zA-Z0-9\w]/g;  // 正则判断非法字符
        if (filterRule.test(item)) {  // 如果是非法字符，将该字符转成带有样式的html片段
          arr.splice(index, 1, "<span style='color:red;font-weight:900'>" + item + "</span>")
          // let array = []
          // array.push({ 'index': index, 'value': item}) // 此位置可以检测位置和内容，如果你需要
        }
      })
      return arr  // 返回检测好的数组
    },

思路：
1、拿到用户输入的v-model内容。
2、转成数组，循环遍历每一个字符串。
3、检测每一个字符串是否为非法字符。
4、不是：过。是：将其更改为html片段。
5、返回遍历后的内容（结果为数组）。
6、template中使用ul,li + for循环 + v-html，循环出所有内容。

最后拿到这个返回后的数组，用v-html来解析就行了，就显示出红色的字体。当然，你也可以检测出出现非法字符的位置，上边代码中有，只需要记录forEach中的index即可。当然，这只是博主自己想出来的方法，如果有更好的方式，欢迎交流。