大致為以上的功能，我們在輸入框中輸入內容，然后點擊詞組過濾，就會自動標紅含有關鍵詞的內容，純前端實現，下面說一下思路：
首先，輸入框不能使用input和textarea，因為輸入框和多行輸入框只能獲取到內容，無法操作html，所以這里我們使用contenteditable="true"能夠操作div的html屬性。
但這樣，我們不能使用v-model來動態獲取和改變div的值了，所以這里我們是用ref。
思路是，首先我們循環含有違禁詞組的對象，把所有的違禁詞合并成一個數組，然后循環這個數組，使用正則尋找和該關鍵詞一樣的文字，每找到一個相同的文字使我們的計數器+1，方便統計整個違禁詞數，然后使用replace函數替換我們找到的文本，并使用css給他加上背景顏色和文字顏色來突出顯示。
該功能的實現完全依靠前端正則的判斷，不需要額外的請求，只要點擊按鈕就會觸發事件，如果需要每次新輸入內容都判斷，可以設置@input事件，監聽內容輸入，不過這樣的話，會導致觸發事件的次數大幅度增加，大家可以酌情按照電腦配置做適配。
上一篇： vant時間選擇器如何配合彈出層顯示
下一篇： css自動計算 REM 的實現與應用
