javascript - match() 或 split() 搞乱了我的代码

标签 javascript

我是编程新手,我正在学习 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>

最佳答案

您可以检查控制台(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");

关于javascript - match() 或 split() 搞乱了我的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44457927/

相关文章:

javascript - 如何在ASP.NET AJAX中进行页面初始化功能?

javascript - 输入类型date与MySQL一起使用时的日期差异

javascript - Box2dWeb 有没有办法将对象的 position.x 输出到 console.log()?

javascript - 在Sinon中假调用具有特定参数的函数

javascript - Firefox、service workers 和后退按钮

javascript - ('img' ).load 不起作用 (jQuery) 是否有原因?

javascript - Angular 在选择选项中插入随机不需要的跨度

javascript - 页面退出时的 Google Analytics 事件跟踪

javascript - 如何更改一个输入 Onchange 选择框的某些属性

Javascript setTimeout 函数保持运行