該工具通過高亮顯示違禁詞并在工具欄中顯示違規(guī)詞的數(shù)量，方便用戶及時修改。開發(fā)利用了百度的UEditor 富文本編輯器，并在其基礎(chǔ)上增加了自定義的命令，用于處理違禁詞的檢測和展示。
功能實現(xiàn)：
1.富文本編輯器集成
為了實現(xiàn)文本編輯功能，我們選擇使用 百度 UEditor，該編輯器具有強大的文本編輯和擴展功能，支持富文本輸入、圖文混排等功能。我們在其基礎(chǔ)上通過自定義命令，實現(xiàn)了違禁詞的檢測和高亮顯示。
var ue = UE.getEditor('content1a');
這里通過 UE.getEditor 初始化了編輯器，并設(shè)置了服務(wù)器 URL，以便處理文本內(nèi)容的上傳和存儲。
2.為了實現(xiàn)違禁詞檢測，我們定義了一個 adwordfilter 命令，核心邏輯通過正則表達式來匹配文本中的違禁詞。以下是關(guān)鍵代碼部分：
UE.commands['adwordfilter'] = {
execCommand: function (cmd, opt) {
var fw = [];
fw.push('uedit', '視頻', '小程序', 'APP', '電腦', '最好');
fw.sort();
var filter = new RegExp('(' + fw.join('|').replace(/\./gi, '\\.') + ')', 'gi');
var me = this;
function HighLight() {
var html = me.getContent();
html = html.replace(/<span>(.*?)<\/span>/gi, '$1');
html = html.replace(filter, '<span>$1</span>');
var root = UE.htmlparser(html);
me.filterInputRule(root);
html = root.toHtml();
me.body[xss_clean] = html;
}
// 高亮顯示或提示功能
if (opt) {
switch (opt.toLowerCase().trim()) {
case 'highlight':
HighLight();
break;
case 'prompt':
Prompt();
}
}
}
}
在這個部分中，我們先定義了一個包含違禁詞的數(shù)組 fw，然后通過 RegExp 創(chuàng)建了一個正則表達式來匹配文本中的違禁詞。當文本中出現(xiàn)這些詞時，它們會被 <span> 標簽包裹，從而實現(xiàn)高亮顯示。
3.除了高亮顯示違禁詞，我們還為用戶提供了一個實時的違規(guī)詞提示，顯示在編輯器的工具欄上。具體實現(xiàn)如下：
function Prompt() {
$('#adwordfilter').remove();
var html = me.getContent();
var match = html.match(filter);
var cnt = match ? match.length : 0;
$('<style id="adwordfilter">.edui-toolbar .edui-for-adwordfilter .edui-button-wrap .edui-button-body .edui-icon:before {content:"違規(guī)詞提醒：' + cnt + '個詞";}</style>').appendTo($(document.documentElement));
}
Prompt 函數(shù)會計算文本中違禁詞的數(shù)量，并在工具欄上實時顯示。它使用了 match 方法來統(tǒng)計違禁詞的數(shù)量，并動態(tài)更新工具欄的顯示內(nèi)容。
4.為了確保每次用戶修改內(nèi)容時，系統(tǒng)都會及時檢查是否有違禁詞，編輯器綁定了 contentchange 事件：
UE.getEditor('content1a').addListener('contentchange', function () {
this.execCommand('adwordfilter', 'prompt');
});
每當編輯器內(nèi)容發(fā)生變化時，adwordfilter 命令會被觸發(fā)，立即進行違禁詞檢查并顯示違規(guī)詞的數(shù)量。
該違禁詞提示工具為用戶提供了一個非常方便的實時檢查機制。它不僅能夠高亮顯示文本中的違禁詞，還能通過工具欄提示用戶違規(guī)詞的數(shù)量，幫助用戶快速識別和修改不當內(nèi)容。通過自定義命令與正則表達式的結(jié)合使用，我們能夠?qū)崿F(xiàn)高效且簡潔的違禁詞過濾功能。
