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> - 内容，然后使用您当前的代码对其进行突出显示。然后取结果并将它们与原始输入的其余部分合并，然后<h3> - 仅突出显示。

第二个好处是，如果需要进行其他调整，这种方法可能会使您的意图明显比复杂的正则表达式更明确，有助于未来的维护。

Answer 2

为什么要让它变得更难？ :)这是我从你的想法得到的，并且工作得很好：

  formatItem:function(item, index, total, query){
    return "<h3><a href=\"/show/" + item.permalink + "\">" + item.title + "</a></h3><p>" + item.followers + " followers | " + item.episodes + " episodes</p>"
  },

  highlight: function(value, term) {
    var value = $(value);
    value.find("a").html(value.find("a").html().replace(RegExp(term, "gi"), "<strong>" + term + "</strong>"));
    return value;
  }

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

2 个答案: