在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，那么它将显示结果也是。这是小提琴代码。抱歉我的提问方式。

Answer 1

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

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

“如何让正则表达式只接受 10 个字符？”

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