如何檢查字符串是否與JS中的正則表達式匹配？

Question

 $('.btn-sets').on('click', function() { var $this = $(this); $this.button('loading'); function getMatches(string, regex, index) { index || (index = 1); // default to the first capturing group var matches = []; var match; while (match = regex.exec(string)) { matches.push(match[index]); } return matches; } // Example : var myString = ".data-label-validation"; var myRegEx = "(start|stop)-(ed|f|m|s|su|t|th|w|wd)-([1-9]|1[0-2])_([0-5][0-9])(?i)(am|pm)-(cst|est|mst|pst)"; // Get an array containing the first capturing group for every match var matches = getMatches(myString, myRegEx, 1); // Log results document.write(matches.length + ' matches found: ' + JSON.stringify(matches)) console.log(matches); setTimeout(function() { $this.button('reset'); }, 8000); 

  <div class="btn-group btn-group-sm" role="group" > <button id="startHour" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#"> hour </button> <div class="dropdown-menu" aria-labelledby="startHour"> <a class="dropdown-item" href="#">1</a> <a class="dropdown-item" href="#">2</a> <a class="dropdown-item" href="#">3</a> <a class="dropdown-item" href="#">4</a> <a class="dropdown-item" href="#">5</a> <a class="dropdown-item" href="#">6</a> <a class="dropdown-item" href="#">7</a> <a class="dropdown-item" href="#">8</a> <a class="dropdown-item" href="#">9</a> <a class="dropdown-item" href="#">10</a> <a class="dropdown-item" href="#">11</a> <a class="dropdown-item" href="#">12</a> </div> <span style="color:white; background-color:#5A6268">:</span> <div class="btn-group btn-group-sm" role="group"> <button id="startMinute" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">min</button> <div class="dropdown-menu" aria-labelledby="startMinute"> <a class="dropdown-item" href="#">00</a> <a class="dropdown-item" href="#">05</a> <a class="dropdown-item" href="#">10</a> <a class="dropdown-item" href="#">15</a> <a class="dropdown-item" href="#">20</a> <a class="dropdown-item" href="#">25</a> <a class="dropdown-item" href="#">30</a> <a class="dropdown-item" href="#">35</a> <a class="dropdown-item" href="#">40</a> <a class="dropdown-item" href="#">45</a> <a class="dropdown-item" href="#">50</a> <a class="dropdown-item" href="#">55</a> </div> </div> <div class="btn-group btn-group-sm" role="group"> <button type="button" class="btn btn-secondary btn-toggle-time" data-toggle="collapse"href= "#">am</button> </div> <div id="zone" class="btn-group btn-group-sm" role="group"> <button type="button" class="btn btn-secondary" data-toggle="dropdown">zone</button> <div class="dropdown-menu" aria-labelledby="zone"> <a class="dropdown-item" href="#" data-tz-abbrev="est">America/New_York</a> <a class="dropdown-item" href="#" data-tz-abbrev="cst">America/Chicago</a> <a class="dropdown-item" href="#" data-tz-abbrev="mst">America/Devner</a> <a class="dropdown-item" href="#" data-tz-abbrev="pst">America/Los_Angeles</a> </div> </div> <div class="btn-group btn-group-sm" role="group"> <button data-name="{{.Name}}" data-zone="{{.Zone | baseUrl}}" data-set-action="start" type="button" class="btn btn-primary btn-sets" id="load" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Processing">Set</button> </div> </div> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> {{range .Projects}} <div id={{.ProjectID}} class="d-none justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom right-content"> <h1 class="h2">Project:{{.Name}}</h1> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group mr-2" role="group" aria-label="First group"> <button type="button" class="btn btn-secondary">Compute API Enabled</button> </div> <div class="btn-group mr-2" role="group" aria-label="Second group"> <button type="button" class="btn btn-secondary">Service Account Key</button> </div> <div class="btn-group" role="group" aria-label="Third group"> <button type="button" class="btn btn-secondary">Other Errors</button> </div> </div> <hr> <div class="container"> <tbody data-label-validation="{{labelValidation}}"> {{range .Instances}} <tr> <td >{{.Name}}</th> <td>{{.Type | baseUrl}}</td> <td>{{.Zone | baseUrl}}</td> <td> {{template "startup.html" .}} </td> <td> {{template "startup.html" .}} </td> <td> </td> <td> <h6>$0.00</h6> </td> {{end}} </tbody> </div> </div> {{end}} </main> 

我保留了兩個按鈕，分別是set-1和set-2。 單擊set-2時，應檢查字符串以進行驗證，如果字符串匹配，則應說數據成功匹配，否則找不到匹配項。

設置按鈕的按鈕：

<div class="btn-group btn-group-sm" role="group">
 <button data-name="{{.Name}}" data-zone="{{.Zone | baseUrl}}" data-set- 
  action="start" type="button" class="btn btn-primary btn-sets" id="load" 
   data- 
  loading-text="<i class='fa fa-spinner fa-spin'></i> Processing">Set</button>
 </div>

我嘗試驗證的Javascript代碼：

  <script>
  $('.btn-sets').on('click', function() {
  var $this = $(this);
  $this.button('loading');
  function getMatches(string, regex, index) {
  index || (index = 1); // default to the first capturing group
  var matches = [];
  var match;
  while (match = regex.exec(string)) {
  matches.push(match[index]);
  }
  return matches;
  }


   // Example :
   var myString = ".data-label-validation";
    var myRegEx = "(start|stop)-(ed|f|m|s|su|t|th|w|wd)-([1-9]|1[0-2])_([0-5] 
   [0-9])(?i)(am|pm)-(cst|est|mst|pst)";

    // Get an array containing the first capturing group for every match
     var matches = getMatches(myString, myRegEx, 1);

    // Log results
   document.write(matches.length + ' matches found: ' + 
   JSON.stringify(matches))
   console.log(matches);
   setTimeout(function() {
   $this.button('reset');
   }, 8000);
   });

 </script>

標簽代碼對字符串的數據驗證：

 <tbody data-label-validation="{{labelValidation}}">
 {{range .Instances}}
 <tr>
 <td >{{.Name}}</th>
 <td>{{.Type | baseUrl}}</td>
 <td>{{.Zone | baseUrl}}</td>
  <td>
  {{template "startup.html" .}}
 </td>
  <td>
  {{template "startup.html" .}}
  </td>
  <td>
    <button type="button" class="btn {{.Status | statusButtonClass}} btn- 
   circle" 
    data-toggle="popover" data-placement="right" data-content="{{.Status}}" 
   data- 
   trigger="hover">      
    <!-- <i class="glyphicon glyphicon-ok"></i> -->
    </button>
</td>
 <td>
 <h6>$0.00</h6>
</td>
</tr>
{{end}}
</tbody>

任何幫助，不勝感激！！！

Answer 1

在js中，可以使用/pattern/flags將regex鍵入為亂碼（請參閱doc和https://regexr.com/ ，以獲取有關js regexes的大量幫助）。

然后，當您使用exec（）您的正則表達式時，它將為您提供一個包含匹配和捕獲組的簡單數組。

這是我想您要完成的工作的一個版本。 我從您的代碼段中刪除了很多絨毛，以便深入了解問題所在：正則表達式匹配。 我還創建了一些匹配（但不匹配）您的正則表達式的字符串。

 function getMatches(string, regex, index) { if(index === undefined) index = 1; var matches = [], match; while( (match = regex.exec(string)) !== null) if(match.length > index) matches.push(match[index]); return matches } // Example : var myStrings = [ // array of strings to test "stop-su-5_25pm-cst", "nomatch-PLEASE", "start-f-1_05am-mst", "start-ed-10_53pm-pst", "start-th-3_03am-pst", ]; //this is a case-insensitive, global regex. Please note that you need to put the g here in oder to be able to loop through matches. var myRegEx = /(start|stop)-(ed|f|m|s|su|t|th|w|wd)-([1-9]|1[0-2])_([0-5][0-9])(am|pm)-(cst|est|mst|pst)/ig; // log the result of the function for each string for(let string of myStrings){ var matches = getMatches(string, myRegEx, 1); console.log(string, ":", matches); } 

希望能有所幫助。

Answer 2

您的代碼中有很多錯誤。 首先，您的正則表達式字符串不是有效的js正則表達式字符串。 對於js來說這是行不通的： "(?i)"您應該模仿js中的隱式聲明或將字符串發送到后端進行驗證。 而且不要將字符串拆分成多行，只需將其保留一行即可。

然后，您嘗試通過將元素的className傳遞給函數來從元素獲取數據。 這也是不行的。 首先獲取元素，然后提取數據。 像這樣：
var testString = $('#table').attr('data-table');

那你想在這里做什么 this.button('loading'); JS中沒有這樣的方法。 我猜您嘗試將加載狀態添加到按鈕。 您可以這樣做： this.text('loading');

然后，您沒有使regexp對象正確。 使用構造函數，如下所示： regex = new RegExp(regex);

保持簡單：

var testRegexString = '/(start|stop)-(ed|f|m|s|su|t|th|w|wd)-([1-9]|1[0-2])_([0-5] [0-9])(am|pm)-(cst|est|mst|pst)/ig';

var testString = $('#table').attr('data-table');

function validateString(string, regex) {
  regex = new RegExp(regex);
  var matchesArray = regex.exec(string);
  var matchesCount = matchesArray.length - 1;
  return matchesArray ? matchesCount + ' Matches found' : 'No matches found';
}

$('#btn1').on('click', function(){
  $(this).text('loading');
  var validationResult = validateString(testString, testRegexString);
  $('#message').text(validationResult);
  $(this).text('Validate Again!');
});

和工作片段在這里jsfiddle