Question

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

＆＃13;

<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>

＆＃13;

Answer 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");

Answer 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>

Answer 3

Pattern return as list. use 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>

匹配（）或拆分（）弄乱我的代码

3 个答案: