javascript - 在聊天框中突出显示关键字，如何为多个关键字添加不同的样式？

Question

我正在编辑一个用户脚本，该脚本在游戏网站的聊天框中具有突出显示功能。我正在尝试制作它，以便我可以向其中添加关键字和不同的 css 样式。我正在寻找将关键字添加到组中的东西，以便我可以为该组中的多个关键字创建一种样式。以及与其他群体不同的风格。

这就是它的样子

/image/7YEyH.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()'
       );
   }