查找精确匹配并在jQuery Datatable中突出显示正则表达式。

Question

查找精确匹配并在jQuery Datatable中突出显示正则表达式。

7

在jquery数据表中，我需要使用精确匹配来过滤结果并对其进行高亮显示。对于精确匹配，我正在尝试以下代码，但它不起作用。 fiddle

table.aoPreSearchCols[ iCol ].sSearch = "^\\s*"+'1'+"\\s*$";
table.aoPreSearchCols[ iCol ].bRegex = false;
table.aoPreSearchCols[ iCol ].bSmart= false;

- Jitender

可以描述一下“它不起作用”吗？看起来在 http://jsfiddle.net/yg32o2yh/5/ 返回了匹配？ - guest271314

当我输入“xon”时，它选择了第一行。但是在那里没有以“xon”开头的单词。 - Jitender

预期结果是查询“xon”不匹配“Tiger Nixon”吗？ - guest271314

我从网上获取了那段代码示例。 - Jitender

请查看帖子。尝试将 RegExp 作为参数包含到 .search() 中。 - guest271314

显示剩余2条评论

3个回答

2

尝试

$('#search-inp').keyup(function(){
    var key = $(this).val();
    var regExp = "."
    if (key)
        regExp = "^\\s*" + key + "\\s*$";

    table.columns(1).search(regExp, true).draw();
});

当搜索关键字key为空时，总是将其设置为.，与regex中的any匹配。

- Alvin Magalona

0

尝试

  $('#search-inp').keyup(function(){
      var elem = $(this)
      table.columns(1)
      .search("^\\s*"+elem.val()+"\\s*$", true)
      .draw()
  });

jsfiddle http://jsfiddle.net/yg32o2yh/6/

请参见column().search()；还可以参见$.fn.dataTable.util.escapeRegex()

- guest271314

感谢您的努力。您的代码正在从段落的开头和结尾进行搜索。我们可以在任一侧使用\b，但是当我们在搜索文本框中留空时会出现问题。 - Jitender

@amit 在原贴中使用了 RegExp。不确定如何正确解释“当我们在搜索文本框中留空时，它会出现问题”的问题？能描述一下详细情况吗？ - guest271314

如果您搜索某些内容并删除搜索文本，则应该将所有列表显示给用户，但实际上并没有发生这种情况。 - Jitender

搜索是仅针对“名称”吗？ - guest271314

是的，这只是为了名称而已。 - Jitender

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidkonrad · Accepted Answer

我认为你需要使用一个“单词边界”（word boundary），\b：

匹配单词边界。单词边界是指一个单词字符前面或后面没有另一个单词字符的位置。

所以当你有搜索词“limit”，和字符串“my word has no limit”，“it is unlimited”时，只有第一个字符串是匹配的。因此

$('#search-inp').keyup(function(){
    var term = $(this).val(),
        regex = '\\b' + term + '\\b';

    table.columns(1).search(regex, true, false).draw();
})

亮点

定义一些静态的“高亮标签”，以便注入和删除，从而突出搜索匹配项：

var hlBegin = '<strong class="highlight">',
    hlEnd = '</strong>';

给列内容添加高亮标签：

function highlight(term) {
    var row, str,
        rowCount = table.rows().nodes().length,
        regexp = new RegExp('('+term+')', 'ig');

    for (row=0; row<rowCount; row++) {
        str = table.cell(row, 1).data();
        str = str.replace(regexp, function($1, match) { 
           return hlBegin + match + hlEnd;
        })
        table.cell(row, 1).data(str).draw();
    }        
}

删除高亮标签：

function removeHighlight() {
    var row, str,
        rowCount = table.rows().nodes().length;

    for (row=0; row<rowCount; row++) {
        str = table.cell(row, 1).data();
        str = str.replace(/(<([^>]+)>)/ig, '');
        table.cell(row, 1).data(str).draw();
    }        
}

将所有东西设置在一起：

$('#search-inp').keyup(function(){
    var term = $(this).val(),
        regex = '\\b' + term + '\\b';

    removeHighlight();
    table.columns(1).search(regex, true, false);
    highlight(term);
})

forked fiddle -> http://jsfiddle.net/Lnvbnp6c/

更新。我通过评论得到的印象是，任何地方都应该匹配整个单词。如果是在列的开头匹配整个单词:

regex = '^' + term + '\\b';

http://jsfiddle.net/Lnvbnp6c/1/

如果只是匹配列开头的字符，而不一定是整个单词：

regex = '^' + term;

http://jsfiddle.net/Lnvbnp6c/2/

最后一种方法可能是用户在搜索框中输入时最喜欢的方式。

作为另一种方法，您可以尝试使用自定义过滤器：

$('#search-inp').keyup(function() {
    var str,
        term = $(this).val(),
        regexp = new RegExp('\\b' + term + '\\b', 'ig');

    removeHighlight();    
    $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex ) {
            str = data[1];
            return regexp.test(str) ? true : false;
        }     
    );
    table.draw();
    highlight(term);    
    $.fn.dataTable.ext.search.pop();
})

上面有带高亮的演示 -> http://jsfiddle.net/x96hzok4/

我的印象是这个方法会更快一些。当然，如果你有很多行数据，并且想要在多列中搜索，我认为你应该考虑使用自定义过滤器，并且不要对所有字符串进行耗时完整的正则表达式匹配。