Vue 輸入框禁止輸入非法字符，並查找非法字符的位置，顯示出來

最近有個需求，由於一些原因，在發送信息時不能輸入非法字符，只能輸入中英文、數字及下劃線。

由於產品是面向社會用戶，所以擔心他們不清楚哪裡輸入了非法字符，特意做了非法字符的提示，如下圖：特殊字符顯示出來，並標上了顏色，這樣看起來會特別方便。至於為什麼不直接禁用非法字符的輸入，是感覺非法字符很多，在用戶不清楚的情況下，輸入不上會讓其感覺很怪異，體驗度不好，所以選擇做相應的提示。

不多說，直接上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即可。當然，這只是博主自己想出來的方法，如果有更好的方式，歡迎交流。