jQuery自动完成插件-自定义突出显示功能

Question

每个项目的自动完成结果如下所示:

<h3>Celebrity Sweepstakes</h3><p>0 episodes</p>

但我只想突出显示 H3 内的标题。请参阅下面的“突出显示”功能。我不知道如何更改原始 RegExp 以仅替换标题内。

$(".show_autocomplete").autocomplete("/shows.js", {
        minChars: 2,
        max: 100,
  formatItem:function(item, index, total, query){
    return "<h3>" + item.title + "</h3><p>" + item.episodes + " episodes</p>"
  },
  formatMatch:function(item){
    return item.title;
  },
  formatResult:function(item){
    return item.title;
  },
  dataType:'json',
  parse:function(data) {
    return $.map(data, function(item) {
      return {
        data: item,
        value: item.title,
        result: item.title
      }
    });
  },
  highlight: function(value, term) {
    var title = value.split("</h3>")[0].replace("<h3>", ""); //only replace inside this?
    return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"); //original regexp
  }
}); 

Answer 1

最好通过进一步分解来解决这个问题。除了它不仅仅应用于 <h3> 的事实之外-内容，当前的实现是否按预期工作？

如果是这样，那么您可以将功能稍微分开，而不是使正则表达式变得更复杂。添加代码来识别和提取标题/<h3> -content，然后使用您当前拥有的代码对其进行突出显示。然后获取结果并将它们与原始输入的其余部分组合起来，瞧，<h3> -仅突出显示。

第二个好处是，这种方法可能比复杂的正则表达式更清楚地表达您的意图，有助于将来的维护(如果需要其他调整)。