大致為以上的功能，我們?cè)谳斎肟蛑休斎雰?nèi)容，然后點(diǎn)擊詞組過(guò)濾，就會(huì)自動(dòng)標(biāo)紅含有關(guān)鍵詞的內(nèi)容，純前端實(shí)現(xiàn)，下面說(shuō)一下思路：
首先，輸入框不能使用input和textarea，因?yàn)檩斎肟蚝投嘈休斎肟蛑荒塬@取到內(nèi)容，無(wú)法操作html，所以這里我們使用contenteditable="true"能夠操作div的html屬性。
但這樣，我們不能使用v-model來(lái)動(dòng)態(tài)獲取和改變div的值了，所以這里我們是用ref。
思路是，首先我們循環(huán)含有違禁詞組的對(duì)象，把所有的違禁詞合并成一個(gè)數(shù)組，然后循環(huán)這個(gè)數(shù)組，使用正則尋找和該關(guān)鍵詞一樣的文字，每找到一個(gè)相同的文字使我們的計(jì)數(shù)器+1，方便統(tǒng)計(jì)整個(gè)違禁詞數(shù)，然后使用replace函數(shù)替換我們找到的文本，并使用css給他加上背景顏色和文字顏色來(lái)突出顯示。
該功能的實(shí)現(xiàn)完全依靠前端正則的判斷，不需要額外的請(qǐng)求，只要點(diǎn)擊按鈕就會(huì)觸發(fā)事件，如果需要每次新輸入內(nèi)容都判斷，可以設(shè)置@input事件，監(jiān)聽(tīng)內(nèi)容輸入，不過(guò)這樣的話，會(huì)導(dǎo)致觸發(fā)事件的次數(shù)大幅度增加，大家可以酌情按照電腦配置做適配。
