大致為以上的功能，我們在輸入框中輸入內(nèi)容，然后點擊詞組過濾，就會自動標紅含有關(guān)鍵詞的內(nèi)容，純前端實現(xiàn)，下面說一下思路：
首先，輸入框不能使用input和textarea，因為輸入框和多行輸入框只能獲取到內(nèi)容，無法操作html，所以這里我們使用contenteditable="true"能夠操作div的html屬性。
但這樣，我們不能使用v-model來動態(tài)獲取和改變div的值了，所以這里我們是用ref。
思路是，首先我們循環(huán)含有違禁詞組的對象，把所有的違禁詞合并成一個數(shù)組，然后循環(huán)這個數(shù)組，使用正則尋找和該關(guān)鍵詞一樣的文字，每找到一個相同的文字使我們的計數(shù)器+1，方便統(tǒng)計整個違禁詞數(shù)，然后使用replace函數(shù)替換我們找到的文本，并使用css給他加上背景顏色和文字顏色來突出顯示。
該功能的實現(xiàn)完全依靠前端正則的判斷，不需要額外的請求，只要點擊按鈕就會觸發(fā)事件，如果需要每次新輸入內(nèi)容都判斷，可以設置@input事件，監(jiān)聽內(nèi)容輸入，不過這樣的話，會導致觸發(fā)事件的次數(shù)大幅度增加，大家可以酌情按照電腦配置做適配。
上一篇： vant時間選擇器如何配合彈出層顯示
開啟了相對路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對路徑（在關(guān)閉開發(fā)者模式后不顯示這句話） "濟南建站手術(shù)移動護理系統(tǒng)詳細流程(千佛山醫(yī)院版）")
開啟了相對路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對路徑（在關(guān)閉開發(fā)者模式后不顯示這句話） "濟南建站手術(shù)移動護理系統(tǒng)")
開啟了相對路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對路徑（在關(guān)閉開發(fā)者模式后不顯示這句話） "濟南建站紅寶書智慧黨建平臺")
