在剑道网格中搜索并突出显示搜索字符串

Question

我的要求是搜索剑道网格，并在网格的某些特定列中以黄色突出显示所有出现的搜索字符串。如果没有任何其他 jquery 插件，我怎么能做到这一点。我在想我必须找到数据在网格中显示的表格，并通过某个类名获取表格并迭代 tr>td 并获取 HTML 并替换文本。

我已经这样做了，'English_Description_LongDesc' 是我的网格的字段名称

var value = searchText;
var grid = $('#myKendoGrid').data('kendoGrid');
var columnFullText = "";
for (var index = 0; index < grid._data.length; index++) {

 columnFullText = grid._data[index]['English_Description_LongDesc'];
   //case-insensitive search
    if (columnFullText.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
       //Here I want to get the 'English_Description_LongDesc' cell HTML and highlight the search string 
   }
}

我的想法是我必须从剑道网格中获取数据并获取相应的列数据并在数据中搜索，如果匹配则获取 HTML 并替换列 HTML。

这是正确的方法吗？有没有更好的方法来做到这一点？ 我对剑道控件非常陌生。

---

根据 Gene R 解决方案。我就是这样的

var value = searchText;
var grid = $("#myKendoGrid").data('kendoGrid');   
var regex = new RegExp(value,"gi");
var colIndex = grid.thead.find("th[data-field='English_Description_LongDesc']").index();
var td = $(this).find('td:eq(' + colIndex + ')');
var item = grid.dataItem(this);
if (item.English_Description_LongDesc.indexOf(value) > -1) {
    td.html(item.English_Description_LongDesc.replace(regex, function (t) { return '<span class="highlight">' + t + '</span>'; }));
    }

但这有一个问题。它成为区分大小写的亮点。如果我在字符串“APPLE TREE”中搜索“Apple”，它不会突出显示。有任何想法吗。

---

它工作正常。 已更改if (item.English_Description_LongDesc.indexOf(value) > -1) { 给if (item.English_Description_LongDesc.toLowerCase().indexOf(value.toLowerCase()) > -1) {

---

更多要求

我们能否使用相同的正则表达式以逗号分隔格式突出显示作为输入给出的所有搜索词？ 例如：搜索输入是“苹果、橙子、葡萄”。我们必须在网格中突出显示苹果、橙子或葡萄。 我永远不懂正则表达式。对我来说太难了..

---

更新 - 完成逗号分隔搜索 这是我的最终代码

var grid = $("#myKendoGrid").data('kendoGrid');   
var searchParts = searchText.split(",");
var regex = new RegExp(searchParts.join("|"), "gi");

grid.tbody.find('tr[data-uid]').each(function () {
     var colIndex = grid.thead.find("th[data-field='English_Description_LongDesc']").index();
     var td = $(this).find('td:eq(' + colIndex + ')');
     var item = grid.dataItem(this);
     if (regex.test(item.English_Description_LongDesc)) {
        td.html(item.English_Description_LongDesc.replace(regex, function (t) {
        return '<span class="highlight">' + t + '</span>';
        }));
     }

Answer 1

var value = searchText;
var grid = $("#myKendoGrid").data('kendoGrid');
var colIndex = grid.thead.find("th[data-field='English_Description_LongDesc']").index();   
var regex = new RegExp(value,"gi");

grid.tbody.find('tr[data-uid]').each(function(){
    var td = $(this).find('td:eq('+colIndex+')');
    var item = grid.dataItem(this);
    td.html(item.English_Description_LongDesc.replace(regex, '<span style="background-color:yellow">'+value+'</span>'));
});

更新：不区分大小写的突出显示

这里是工作示例：http://dojo.telerik.com/OraVA

更新2：如果不想替换为value，请使用这种方式：

td.html(item.English_Description_LongDesc.replace(regex, function(t){
    return '<span style="background-color:yellow">'+t+'</span>';
}));

示例：http://dojo.telerik.com/OraVA/5