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

Question

在jquery数据表中,我必须使用完全匹配过滤结果并突出显示它.为了完全匹配我正在尝试下面的代码,但它不起作用.小提琴

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

Answer 1

我认为你需要使用单词边界,\b:

匹配单词边界.单词边界匹配单词字符未被跟随或前面的另一个单词字符的位置.

因此,当您有搜索词" 限制 "和字符串" 我的词没有限制 "," 它是无限制的 "时,只有第一个字符串是匹配.所以

$('#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);
})

分叉小提琴 - > http://jsfiddle.net/Lnvbnp6c/

更新.我得到的印象(通过评论)应该匹配任何地方的整个单词.如果它是关于匹配列开头的整个单词:

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

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

如果它只是匹配列开头的字符,而不是nessecarily一个完整的单词:

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/

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