在聊天框中突出顯示關鍵字，如何為幾個關鍵字添加不同的樣式？

Question

我正在編輯一個在游戲網站的聊天框中具有突出顯示功能的用戶腳本。 我正在嘗試使其能夠為它添加關鍵字和不同的CSS樣式。 我正在尋找將關鍵字添加到組中的內容，以便可以為該組中的多個關鍵字制作一種樣式。 和另一組的風格不同。

看起來像這樣

http://i.imgur.com/7nbMuA4.png

dctools.checkForChatKeyword = function(elements) {
    if (GM_getValue("dct-options-hiflags") != null) {
        $(elements).highlight('flag')

            .highlight('keyword 1') 
            .highlight('keyword 2')
            .highlight('keyword 3')
            .highlight('keyword 4')
            .highlight('keyword 5')
            .highlight('keyword 6')
            .highlight('keyword 7');
    }

有沒有一種簡單的方法可以使用數組向這些不同的關鍵字添加CSS樣式？

Answer 1

通常 ，（因為您沒有顯示.highlight函數代碼）您將：

1. 創建一系列jQuery樣式對象，例如：

    var styleRedOnYellow = {"color": "red", "background": "yellow"} , styleWhiteOnBlack = {"color": "white", "background": "black"} , styleLimeOnPink = {"color": "lime", "background": "pink"} , stylePuke_1 = {"color": "#EEF272", "background": "#97CC9A"} ; 

2. 然后，您可以使用關聯數組將關鍵字與樣式鏈接起來 ：

    var stylePerKeyword = []; stylePerKeyword["keyword 1"] = styleRedOnYellow; stylePerKeyword["apple"] = styleRedOnYellow; stylePerKeyword["keyword 3"] = styleLimeOnPink; stylePerKeyword["keyword 4"] = styleLimeOnPink; stylePerKeyword["shoes"] = stylePuke_1; 

3. 然后在.highlight函數中，它可以將樣式應用於包裝節點，如下所示：

    /*--- keywordParameter is the variable inside highlight() that contains the particular keyword for this function call. */ var styleToApply = stylePerKeyword[keywordParameter]; if (styleToApply) { /*-- wrappingNode is a jQuery around whatever highlight() wraps a word in to highlight it with. Probably a <span>. */ wrappingNode.css (styleToApply); } else { console.log ( '*** Unknown keyword, "' + keywordParameter + '", in .highlight()' ); }