通过骨干网过滤器返回数据时突出显示匹配的文本

Question

我正在使用骨干过滤器进行搜索。 下面是我的代码集。

search : function(data){

    var pattern = new RegExp(data,"gi");
    return (this.filter(function(model) {
        console.log("found match in "+ (model.get("name")).match(pattern));
        return pattern.test(model.get("name"));
    }));
}

以下是我的代码：

render: function () {
    var data = new GroupCollection(this.collection.search(searchData)).toJSON();
    var html = this.template(data);
    this.$el.html(html);
    return this;
},

以上搜索代码工作正常。

我想在结果中高亮显示搜索数据，但无法找到执行此操作的方法。

我正在获取搜索数据。但我无法突出显示匹配的文字，如下图所示。

在正则表达式中使用匹配能够获取匹配的文本但是如何在我的模板中显示。

Answer 1

请参阅此jsFiddle

使用 Handlebars.registerHelper

示例代码：

Handlebars.registerHelper('fullName', function(name) {
    var searchString = 'com'; //$("#txtSearch").val();

    var dom = name.replace(searchString, '<span style="color: red">' 
                                         + searchString + '</span>');
    return new Handlebars.SafeString(dom);
});