Question

我正在使用jQuery。我想要做的是获取DIV并找到时间戳的所有实例，并通过循环运行它。假设我的目标是：

var $target = $('#my-target');

然后我想匹配以下正则表达式：(?!(?:[^<]+>|[^>]+</a>))\b([\d:]+)\b。这将匹配<a>标记中尚未存在的所有时间戳。

然后我想获取生成的时间戳字符串（即：4:45），将其转换为秒（285），然后用以下内容替换时间戳文本：

<a onclick="youtubeSeek(285)">4:45</a>

我如何使用jQuery完成这项工作？

Answer 1

执行部分工作，而不是编码。

＆＃13;

    function tsToSecond(ts) {
      // TODO
      return 123;
    }
 
    function youtubeSeek(tsInSec) {
       alert(tsInSec);
    }
 
    var $target = $('#my-target');
    // Get all your timestamps
    var timestamps = [];
    var links = $('a');
    $.each (links, function(i, a){
      if ($(a).text().match(/\d(\d)?([:,]\d\d)/g)) {
         timestamps.push(a);
      }
    });
    // Loop on each
    $.each (timestamps, function(i, tsLink) {
      var originalLink = $(tsLink);
      var ts = $(tsLink).text();
      // Convert timestampe to second
      var tsInSec = tsToSecond(ts);
      // Generate new link
      var link = $('<a></a>').attr('link-ts',tsInSec).text(ts).on('click', function(e){
        // Get tsInSec from link
        youtubeSeek($(e.target).attr('link-ts'));
      });
      originalLink.replaceWith(link);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a>1:10</a>
<a>20:45</a>
<a>12:34</a>

＆＃13;

Answer 2

我明白了：

var regex = /(?!(?:[^<]+>|[^>]+<\/a>))\b([\d:]+)\b/gi;
html = this.$target.html().replace(regex, function(match, stamp)
{
    var seconds = stamp.split(':').reduce((acc,time) => (60 * acc) + +time);
    return '<a href="#player" onclick="seekTo('+seconds+')">'+stamp+'</a>';
});

this.$target.html(html);

jQuery preg通过匹配循环替换？

2 个答案: