有没有更有效的方法来匹配/替换HTML表中的日期?

时间:2012-04-06 18:47:07

标签: javascript jquery regex

我的任务是统一HTML表的日期格式,该表具有不同的数据库。使用SQL过程不是一种选择。已知的事实是TBODY中的单元格将是纯文本或纯文本包装在一个链接中。

我写了一个jQuery插件来完成这项工作,但我想知道是否有意义做innerHTML而不是循环遍历每个TD。

原始插件:

$.fn.reformatAllDates = function () {
  var $txt = $(this).text();

  var reformatDate = function ($str) {
    var $parts = $str.split('/'),
        $year = $parts[2],
        $month = $parts[0],
        $day = $parts[1];
    if ($parts.length === 3) {
      $month = $month.length < 2 ? '0' + $month : $month;
      $day = $day.length < 2 ? '0' + $day : $day;

      //Returns dates in sort friendly format [YYYY-MM-DD]
      return $year + '-' + $month + '-' + $day;
    }
    return $str;
  };

  var $result, $reg = new RegExp(/^\d{1,2}\/\d{1,2}\/\d{4}$/);

  while (($result = $reg.exec($txt)) !== null) {
    var $match = $reg.exec($txt)[0];
    var $newFormat = reformatDate($match);
    $txt = $txt.replace($match, $newFormat);
  }
  return $(this).html($txt);
}

原始实施:

$('table.display tbody tr td').each(function () {
  if ($(this).html().indexOf('href') >= 0)
    $(this).find('a:first').reformatAllDates();
  else
    $(this).reformatAllDates();
});

innerHTML实现:

$('table.display tbody').reformatAllDates();

虽然我还没有测试innerHTML在失败之前有多大并且准备了后备步骤,但这是有效的。

$.fn.reformatAllDates = function () {
  var $result, 
      $reg = new RegExp(/\d{1,2}\/\d{1,2}\/\d{4}/),
      $r2 = new RegExp(/[\n\r\f]/g),
      $html = $(this).html();
  $html = $html.replace($r2,'');
  $html = $html.replace($r2,'');

  var reformatDate = function ($str) {
    var $parts = $str.split('/'),
        $year = $parts[2],
        $month = $parts[0],
        $day = $parts[1];
    if ($parts.length === 3) {
      $month = $month.length < 2 ? '0' + $month : $month;
      $day = $day.length < 2 ? '0' + $day : $day;
      return $year + '-' + $month + '-' + $day;
    }
    return $str;
  };

  var $match, $newFormat, $msg;
  while (($result = $reg.exec($html)) !== null) {
    $match = $reg.exec($html)[0];
    $newFormat = reformatDate($match);
    var $re = new RegExp($match,"g");
    $html = $html.replace($re, $newFormat);
  }
  return $(this).html($html);
}

1 个答案:

答案 0 :(得分:1)

以下是我的想法。要了解我是如何得到以下内容的,请仔细阅读问题下的评论。

jQuery(document).ready(function($) {
    var reg = new RegExp(/^\d{1,2}\/\d{1,2}\/\d{4}$/);

    $.fn.reformatAllDates = function (subselect) {
        var $this = $(this),
            $nodes,
            $node,
            text,
            matched;

        if (subselect) {
            $nodes = $this.find(subselect);
        } else if ($this.is('table')) {
            $nodes = $this.find('td');
        } else if ($this.is('dl')) {
            $nodes = $this.find('dt, dd');
        } else {
            $nodes = $this.children();
        }

        for (var i = 0, l = $nodes.size(); i < l; i++) {
            $node = $($nodes[i]);
            text = $node.text();
            matched = text.match(/\//g);

            if (matched !== null && matched.length == 2) {
                $node.reformatDate(text);
            }
        }
    };

    $.fn.reformatDate = function(text, parts) {
        var $this = $(this),
            matched,
            year,
            month,
            day;

        if (!parts) {
            text = text ? text : $this.text();
            matched = reg.exec(text);
            parts = matched !== null ? matched[0].split('/') : [];
        }

        if (parts.length === 3) {
            month = parts[0];
            day = parts[1];
            year = parts[2];

            month = month.length < 2 ? '0' + month : month;
            day = day.length < 2 ? '0' + day : day;

            //Returns dates in sort friendly format [YYYY-MM-DD]
            $this.html(year + '-' + month + '-' + day);
        }
    };

    $('#trigger').click(function(){
        $('#tabledata').reformatAllDates();
    });
});

http://jsfiddle.net/userdude/gkeL6/10/