如何在JS中编辑JavaScript变量的CSS？

我有一个网站的现场搜索，它的工作刚刚好，但我似乎不知道如何突出搜索结果中的词。下面是我的JS代码。我假设我需要编辑

数据搜索项

变量，但我不知道如何操作

我只知道HTML/CSS。没有JavaScript

jQuery(document).ready(function($) {

    $('.training-search-list li').each(function() {
        $(this).attr('data-search-term', $(this).text().toLowerCase());
    });

    $('.training-search-box').on('keyup', function() {

        var searchTerm = $(this).val().toLowerCase();

        $('.training-search-list li').each(function() {

            if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
                $(this).show();
            } else {
                $(this).hide();
            }

        });

    });

});

jQuery（文档）.ready（函数（$）{
$（'.training search list li'）。每个（函数（）{
$（this.attr（'data-search-term'，$（this.text（）.toLowerCase（））；
});
$（'training search box'）。在（'keyup'，function（）上{
var searchTerm=$（this.val（）.toLowerCase（）；
$（'.training search list li'）。每个（函数（）{
if（$（this）.filter（'[data search term*='+searchTerm+']'）.length>0 | | searchTerm.length<1）{
$（this.show（）；
}否则{
$（this.hide（）；
}
});
});
});

---

提前谢谢。

我很久以前就做了

    (function($){

  $('#categoryFilter').focus().keyup(function(event){
    var input = $(this);
    var val = input.val();
    if(val == ''){
      $('#filter li').show();
      $('#filter a span').removeClass('highlighted');
      return true;
    }
    var regexp = '\\b(.*)';
    for (var i in val) {
      regexp += '('+val[i]+')(.*)';
    }
    regexp += '\\b';
    $('#filter li').show();
    $('#filter').find('a > span').each(function(){
      var span = $(this);
      var resultats = span.text().match(new RegExp(regexp,'i'));
      if(resultats){
        var string = '';
        for (var i in resultats){
          if(i > 0){
            if(i%2 == 0){
              string += '<span class="highlighted">'+resultats[i]+'</span>';
            }else {
                string += resultats[i];
            }
          }
        }
        span.empty().append(string);
      }else {
        span.parent().parent().hide();
      }
    });
  });
})(jQuery);

（函数（$）{
$（'#categoryFilter'）.focus（）.keyup（函数（事件）{
var输入=$（此）；
var val=input.val（）；
如果（val=''）{
$（'#filter li'）.show（）；
$（“#筛选范围”）.removeClass（'突出显示'）；
返回true；
}
var regexp='\\b（.*）；
用于（var i在val中）{
regexp+=“'（'+val[i]+）（*）；
}
regexp+='\\b'；
$（'#filter li'）.show（）；
$（'#filter'）。查找（'a>span'）。每个（函数（）{
var span=$（本）；
var resultats=span.text（）.match（新的RegExp（RegExp，'i'））；
如果（结果）{
var字符串=“”；
for（结果中的var i）{
如果（i>0）{
如果（i%2==0）{
字符串+=''+结果[i]+''；
}否则{
字符串+=结果[i]；
}
}
}
span.empty（）.append（字符串）；
}否则{
span.parent（）.parent（）.hide（）；
}
});
});
})（jQuery）；

---

也许你可以试着用我的某个部分来编写你自己的代码

$（this）.filter（“[data search term*=”+searchTerm+']）

返回一个数组，保存它，

var results=$（this）.filter（“[data search term*=”+searchTerm+']）

然后在结果元素中添加一个类，

results.addClass（'searchResult'）

并为

searchResult

创建css类

数据搜索项

是HTML元素的一个属性。因此，您可以在CSS中尝试以下操作：

[data search term]{/*突出显示CSS代码*/}

。感谢您的回复。这两个答案都突出显示了整个可搜索条件（即列表项）。我只想突出显示单词或短语。我甚至不知道从哪里开始。