match() 或 split() 弄乱了我的代码答案

【问题标题】：match() or split() messing up my codematch() 或 split() 弄乱了我的代码
【发布时间】：2017-06-09 12:30:52
【问题描述】：

我是编程新手，我正在学习 javascript。我不明白我的代码有什么问题，但我无法得到结果（即在文本框中显示总秒数）。该程序运行良好，直到匹配模式。但是当我使用 split() 函数时，一切都变得一团糟。请告诉我哪里出错了。谢谢你

<body>
  <script>
    function cal() {
      var text = document.getElementById("pp").innerHTML;
      var pattern = text.match(/[0-2][0-9]:[0-5][0-9]:[0-5][0-9]/);
      var b = pattern.split(':');

      var seconds = (+b[0]) * 3600 + (+b[1]) * 60 + (+b[2]);
      document.getElementById("tot").value = seconds;

    }
  </script>
  <div>
    <p id="pp">The Time Right Now Is 12:34:56</p>
    Total Seconds: <input type=t ext id="tot"><button onclick="cal()"> Click Here!</button>
  </div>
</body>

【问题讨论】：

"Uncaught TypeError: pattern.split is not a function" 数组没有拆分方法。 console.log(pattern)
match 返回一个数组，而不是字符串，并且数组没有split 函数。
按 [F12] 打开开发者控制台。运行你的代码。错误消息显示“TypeError: pattern.split is not a function ... lineno: 16” - 现在您在该行之前放置了 console.log(pattern);。它打印Array [ "01:02:03" ]。现在您检查文档，发现数组没有split 方法，但string 有。字符串是第一个数组元素，您可以通过pattern[0].split(...) 或var [pattern] = text.match(...) 访问它

标签： javascript

【解决方案1】：

您可以检查控制台（Chrome 中的 F12）以查看是否出现任何错误。您还可以通过在某处添加 debugger; 语句来单步执行代码以查看发生了什么。

如果您将 JavaScript 代码移动到单独的文件中，您还可以编写测试（例如使用 Jasmine）来自动测试您的代码。

话虽如此，控制台中显示以下错误：

Uncaught TypeError: pattern.split is not a function

修复：

var b = pattern[0].split(':');

但是，一旦您开始使用正则表达式，您就可以继续这种方式。以下将对小时、分钟和秒进行分组

var result = "12:34:56".match(/([0-2][0-9]):([0-5][0-9]):([0-5][0-9])/)
var hours = result[1];
var minutes = result[2];
var seconds = result[3];

更好的是，对于像您在此处所做的那样的日期解析，您可以使用开箱即用提供此类功能的库。 MomentJS 是一个非常受欢迎的。如果这是您唯一要做的事情，那么使用库就有点过头了，但是如果您要进行大量日期解析/格式化，那么它会让您的事情变得更容易。

# Install on command line with npm (you can also use bower, ...)
npm install moment

// import and use
import * as moment from "moment";
var parsed = moment("12:34:56", "HH:mm:ss");

【讨论】：

【解决方案2】：

String.prototype.split() 是一个String 方法，String.prototype.match() 返回一个数组。

问题： 您不能在 `.match

的返回值上应用 .split

解决方案： 您需要使用数组索引[0] 来匹配返回数组中的第一个元素。

修复后的代码

function cal() {
  var text = document.getElementById("pp").innerHTML;
  var pattern = text.match(/[0-2][0-9]:[0-5][0-9]:[0-5][0-9]/);
  var b = pattern[0].split(':');
  var seconds = (+b[0]) * 3600 + (+b[1]) * 60 + (+b[2]);
  document.getElementById("tot").value = seconds;
}

<div>
  <p id="pp">The Time Right Now Is 12:34:56</p>
  Total Seconds: <input type=t ext id="tot">
  <button onclick="cal()"> Click Here!</button>
 </div>

【讨论】：

【解决方案3】：

模式返回列表。使用conditional statement

<body>
  <script>
    function cal() {
      var text = document.getElementById("pp").innerHTML;
      var pattern = text.match(/[0-2][0-9]:[0-5][0-9]:[0-5][0-9]/);
      b = pattern[0].split(':'); 
      console.log(b)

      var seconds = (b[0]) * 3600 + (b[1]) * 60 + (b[2]);
      document.getElementById("tot").value = seconds;

    }
  </script>
  <div>
    <p id="pp">The Time Right Now Is 12:34:56</p>
    Total Seconds: <input type=t ext id="tot"><button onclick="cal()"> Click Here!</button>
  </div>
</body>

【讨论】：