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

问题描述

在 jquery 数据表中，我必须使用精确匹配过滤结果并突出显示它.对于完全匹配，我正在尝试以下代码，但它不起作用.小提琴

In jquery datatable, I have to filter the result with exact match and highlight it. for exact match I am trying following code but it does not work. fiddle

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

推荐答案

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

I think you need to use a word boundary,  :

匹配单词边界.词边界匹配的位置单词字符之后或之前没有另一个单词字符.

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

So when you have search term "limit" and the strings "my word has no limit", "it is unlimited" only the first string is a match. So

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

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

亮点

定义一些静态的突出显示标签"来注入和删除以突出搜索匹配:

Define some static "highlight tags" to inject and remove in order to highlight search matches :

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

为列内容添加高亮标签:

Adding the highlight tags to column content :

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/

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

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

Update. I got the impression (through comments) that whole words anywhere should be matched. If it is about matching a whole word in the beginning of the column :

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

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

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

If it is just about matching characters the column begins with, not nessecarily a whole word :

regex = '^' + term;

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

最后一个可能是用户在搜索字段中输入时最喜欢的一个.

The last one is probably the one users would like the most, when they are typing in the search field.

作为替代方法，您可以尝试使用自定义过滤器:

As an alternative approach you could try to use a custom filter :

$('#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/

demo with highlight as above -> http://jsfiddle.net/x96hzok4/

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

My impression is that this is a little bit faster. Certainly, if you have a lot of rows, and want to search on multiple columns, I think you should consider a custom filter, and consider not to make time-consuming complete regular expressions on all strings.

这篇关于搜索完全匹配并突出显示 jquery 数据表正则表达式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！