如何检查字符串是否匹配JS中的正则表达式?

时间:2018-05-14 07:27:00

标签: javascript jquery html css



$('.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>
&#13;
&#13;
&#13;

我保留了两个按钮,即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>

任何帮助都非常感谢!!!

2 个答案:

答案 0 :(得分:1)

在js中,可以使用/pattern/flags键入正则表达式作为一个文本(请参阅the dochttps://regexr.com/以获得有关js正则表达式的大量帮助)。

然后,当你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);
}

希望有所帮助。

答案 1 :(得分:1)

代码中存在很多错误。 首先,你的正则表达式字符串是无效的js regex字符串。对于js来说这是不行的:cat Subdirectory{1..227}/in.BV >Newin.txt 你应该在js中模仿lookbehind断言或者将字符串发送到后端以进行验证。并且不要在多行上分割字符串,只需保持一行即可。

然后,您试图通过将它的className传递给您的函数来从元素中获取数据。这也是一个禁忌。首先获取元素,然后提取数据。像这样:
"(?i)"

然后,你想在这做什么? var testString = $('#table').attr('data-table'); JS中没有这样的方法。我猜你试图在按钮上添加加载状态。你可以这样做: this.button('loading');

然后,你没有正确的regexp对象。使用构造函数,如下所示: this.text('loading');

保持简单:

regex = new RegExp(regex);

此处的工作代码段jsfiddle