javascript - 在jquery中按顺序匹配正则表达式中的数字

Question

所以最近，我一直在尝试实现从数据库获取数据后进行搜索的keyup功能。我已经搜索了很多关于此的问题，并设法找到了一个正则表达式来按顺序匹配数字

Regex for numbers only

这给了我这个表达式“^[0-9]+$”。我还用正则表达式搜索了另一个关于实时搜索中的 jquery 代码的问题

How to perform a real time search and filter on a HTML table

因此，我尝试以与第一个问题中不同的方式更改正则表达式，以获取特定顺序的数字，但它似乎不起作用

http://jsfiddle.net/qw5z5abo/

这是我的 jsfiddle 代码，我试图在实际代码中实现之前使其工作，所以问题是我做错了哪一部分以及如何使正则表达式仅接受 10 个字符？提前致谢。

HTML

<input type="text" id="search" placeholder="Type to search">
<table id="table">
 <tr>
  <td>3123124</td>
  <td>438785345</td>
</tr>
<tr>
  <td>123131234</td>
  <td>31234144</td>
</tr>
<tr>
  <td>8909808</td>
  <td>8709090980</td>
</tr>
</table>

JS

var $rows = $('#table tr');
$('#search').keyup(function() {

 var reg = RegExp("^[0-9]+$"), text;

$rows.show().filter(function() {
    text = $(this).val();
    return !reg.isMatch(text);
}).hide();
});

这是输入和结果。结果将显示在表格中。

$(".navbar-search").one('click', function(){
$.ajax({
    url: "http://localhost:3000/api/queryAllRecord", // server url
    type: "POST", //POST or GET
    contentType: "application/json",
     // data to send in ajax format or querystring format
    dataType : "JSON", //dataType is you telling jQuery what kind of 
                       response to expect
    success: function(response) {
        alert('success');
         if(response){
            var len = response.length;
            var txt = "";
            if(len > 0){
                for(var i=0;i<len;i++){
                    if(response[i].samID && response[i].itemDescription){
                        txt += "<tr class='rowdata'>
                                <td>"+response[i].samID+"</td>"
                                +"<td>"+response[i].itemDescription+"</td>"
                                +"<td 
                                class='editNumber'>"+response[i].issuedQTY + 
                                "</td>"+"<td 
                                class='editNumber'>"+response[i].openingQTY 
                                + "</td>" + "<td 
                               class='editNumber'>"+response[i].closingQTY+"
                               </td>" +"<td 
                             class='editNumber'>"+response[i].corruptedQTY+"
                               </td>" +"<td>"+response[i].Remarks+"</td>"+"
                               <td>"+response[i].ntaRequestRef+"</td>"
                               +"<td><input class='input button-edit' 
                               type='submit' id='edit' value='Edit' onclick 
                               = 'edit(this)' /></td>" 
                               +"<td><input class='input button-edit' 
                              type='button' id='delete' value='Delete' 
                              onclick='deleteResult(this)' /></td>"+"</tr>";
                    }
                }

                $("#bResults").empty();
                if(txt != ""){
                    $("#results").removeClass("hidden");
                    $("#bResults").append(txt);
                }
            }
        }
    },
    error: function(response) {
        alert('error');
    }
});
event.preventDefault();
});

这是将要执行的搜索，然后将从数据库中获取数据并将其放入表中，然后我将在 keyup 上输入 search 进行搜索。 预期的输入应该是这样的 1607180511 并且在输入时，它会根据用户输入的内容进行过滤，如果假设他输入了 1607，则所有带有 1607... 的内容都应该出现，或者如果是 1607180511 那么它将显示该结果以及。这是 fiddle 代码。抱歉我提问的方式。

Answer 1

我对您的要求的理解是您想要“开头为”搜索。也就是说，当用户在搜索字段中键入内容时，您只想显示包含一个或多个以输入值开头的单元格的表格行。

在这种情况下，您不想使用像 ^[0-9]+$ 这样的正则表达式来测试字符串是否仅由数字组成，您需要匹配该值由用户输入。您可以将该值转换为正则表达式，但使用字符串 .indexOf() method 更简单。 - 如果 stringToSearch.indexOf(searchString) 的结果为 0，则表示在 stringToSearch 的开头找到了 searchString code> (返回 -1 表示未找到，大于 0 表示已找到但不在开头)。

在您的函数中，text = $(this).val();没有意义，因为.val()用于表单字段值，而不是用于获取表格行/单元格文本。您需要使用.text()来获取各个单元格的文本，但在行级别进行显示和隐藏。所以也许是这样的:

var $rows = $('#table tr');
var $cells = $rows.find('td');

$('#search').keyup(function() {
  var searchText = this.value;
  $rows.hide();
  $cells.filter(function() {
    return $(this).text().indexOf(searchText) === 0;
  }).parent().show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search" maxlength="10">
<table id="table">
  <tr>
    <td>3123124</td>
    <td>438785345</td>
  </tr>
  <tr>
    <td>123131234</td>
    <td>31234144</td>
  </tr>
  <tr>
    <td>8909808</td>
    <td>8709090980</td>
  </tr>
</table>

"how do I also make regex accept only 10 characters?"

我真的不认为有任何理由将搜索词限制为仅 10 个字符，但如果您想这样做，最简单的方法就是添加 maxlength="10" 属性输入元素。