搜索完全匹配并突出显示 jquery 数据表正则表达式

Question

在jquery 数据表中，我必须过滤完全匹配的结果并突出显示它。为了完全匹配，我正在尝试使用以下代码，但它不起作用。 fiddle

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

Answer 1

尝试

  $('#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() ; see also $.fn.dataTable.util.escapeRegex()

Answer 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。

Answer 3

我认为你需要使用 word boundary, \b :

Matches a word boundary. A word boundary matches the position where a word character is not followed or preceeded by another word-character.

因此，当您有搜索词“limit”和字符串“my word has no limit”、“它是无限的" 只有第一个字符串是匹配的。所以

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

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

突出显示

定义一些静态 "highlight tags" 以注入和删除以突出显示搜索匹配项：

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(, 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);
})

分叉 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/

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

搜索完全匹配并突出显示 jquery 数据表正则表达式

search exact match and highlight jquery datatable regex

jquery

regex

jquery-datatables