搜索完全匹配并突出显示jquery datatable正则表达式 [英] search exact match and highlight jquery datatable regex
问题描述
在jquery datatable中，我必须用精确的匹配过滤结果并突出显示。为了完全匹配我正在尝试以下代码，但它不工作。 小提琴
table.aoPreSearchCols [iCol] .sSearch =^ \\\s *+'1'+\\s * $;
table.aoPreSearchCols [iCol] .bRegex = false;
table.aoPreSearchCols [iCol] .bSmart = false;
我想你需要使用 word boundary ， \b ：
匹配单词边界。一个单词边界匹配一个
单词字符不跟随或前面另一个字符的位置。
所以当您有搜索字词 limit ，字符串我的单词没有限制，它是无限制的只有第一个字符串是比赛。所以
$（'＃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& ;';
将高亮标记添加到列内容：
< pre class =lang-js prettyprint-override>
function highlight（term）{
var row，str，
rowCount = table.rows（）。nodes（） ，
regexp = new RegExp（'（'+ term +'）'，'ig'）; （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; （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 = $这个）.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/
如果只是匹配字符列开始，而不是一个完整的单词：
regex ='^'+ term;
http://jsfiddle.net/Lnvbnp6c/2/
最后一个可能是一个用户最喜欢的是当他们在搜索字段中输入时。
作为一种替代方法，您可以尝试使用自定义过滤器：
$ pre class =lang-js prettyprint-override>
$（'＃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/
我的印象是这有点快一点。当然，如果你有很多行，并且想要搜索多个列，我认为你应该考虑一个自定义过滤器，并且考虑不要对所有字符串做一些耗时的完整的正则表达式。
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, \b :
Matches a word boundary. A word boundary matches the position where a word character is not followed or preceeded by another word-character.
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();
})
Highlight
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();
}
}
Removing highlight tags :
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();
}
}
Setting it all together :
$('#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/
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();
})
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 datatable正则表达式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
