jQuery 搜索和突出显示，2 种颜色 - 2 个列表

Question

我有一些旧代码用于突出显示单词列表：

jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   }
  }
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
   }
  }
  return skip;
 }
 return this.length && pat && pat.length ? this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 }) : this;
};

$(document).ready(function(){   
 $("td").highlight("car")
 $("td").highlight("sales");
 $("td").highlight("income");
});

</script>;

和这个帖子很像：Search and Highlight in jQuery

但现在我需要相同的脚本来突出显示同一页面上具有不同颜色的第二个列表。我的要求与这篇文章非常相似：Using multiple colors for highlighting

好像听不懂。

Answer 1

（根据 OP 的反馈更新答案...）

对您来说最快的解决方案是修改现有函数，使其接受第二个参数，指定要添加到突出显示范围的 CSS 类名。

（或者更具体地说，在我下面的示例中，不是整个 CSS 类名，而只是颜色部分。这会自动附加到词干“highlight-”，以节省您每次调用函数时都必须输入整个内容.)

所以...

// 1. Change: jQuery.fn.highlight = function(pat) {
// to...
jQuery.fn.highlight = function(pat, color) {

// 2. Change: spannode.className = 'highlight';
// to...
spannode.className = 'highlight-'+color;

您的函数现在接受名为“color”的第二个参数，spannode.className 根据指定的颜色是动态的。

// 3. Add some classes like these to your CSS...
//
.highlight-red {background-color:red;}
.highlight-green {background-color:green;}
.highlight-pink {color:white;font-weight:bold; background-color:pink;}

// 4. Then call your function like this...
//
$("td").highlight("car", 'red')
$("td").highlight("sales", 'green');
$("td").highlight("income", 'pink');

演示：在JSFiddle...中运行