使用JavaScript在HTML中更改日期格式

时间:2014-11-17 00:59:00

标签: javascript regex

我在页面上有以下代码:

<span class="release-date"><i class="fa fa-calendar"></i> 2014-11-16</span>

2014-11-16是日期,由我的CMS自动生成。我需要改变这个日期。基本上我需要更改月份以阅读不同,因为该网站有国际受众。在上面的例子中,我希望它如下所示:2014-Nov-16

我知道这可以使用RegEx来完成,但是,我不知道如何写这个RegEx因为我不擅长它们。当然,在上面11 = 11月的例子中,12个等于12月,依此类推。

5 个答案:

答案 0 :(得分:2)

您可以使用Javascript Date为您节省一些难看的正则表达式

new Date("2014-11-16")
>> Sat Nov 15 2014 16:00:00 GMT-0800 (PST)
new Date("2014-11-16 PST")
>> Sun Nov 16 2014 00:00:00 GMT-0800 (PST)

除非你添加另一个像momemt.js之类的库,否则你可能需要添加一个小帮助来将月份作为字符串。类似的东西:

function monthToString(month) {
  var months = [ 'Jan', 'Feb', ... , 'Dec' ];
  return months[month % months.length]
}

然后你可以像这样构建新的日期字符串

function convertDateString(dateFromCms) {
   var date = new Date(dateFromCms);
   return date.getFullYear() + "-" + monthToString(date.getMonth()) + "-" + date.getDate();
}

或者那些东西。查看MDN,详细了解Date的工作原理。

答案 1 :(得分:1)

这里有一个jQuery和Moment.js的片段,可以满足您的需求,我将格式化为变量,以便您可以使用is。

&#13;
&#13;
$('.release-date').each( function() {
  
  var format = "Do MMM YYYY";

  var $this = $( this );
  var old_date = $.trim($this.text());
  var new_date = moment(old_date , 'YYYY-MM-DD').format( format );

  $this.text($this.text().replace(old_date, new_date));
});
&#13;
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<span class="release-date"><i class="fa fa-calendar"></i> 2014-11-16</span>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

你可以这样做:

Fiddle

var elem = document.getElementsByClassName('release-date')[0];
var text = elem.innerHTML;
var regex = /-(\d{1,2})-/m
var month = regex.exec(text);
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'August', 'Sept', 'Oct', 'Nov', 'Dec']

if (month[1]) {
    elem.innerHTML = text.replace(regex, "-" + months[parseInt(month[1], 10) - 1] + "-")
}

答案 3 :(得分:1)

如果您想选择范围元素的textNode,则可以遍历其childNode并过滤textNode

[].forEach.call(document.querySelectorAll('.release-date'), function(el) {
    var n = el.childNodes, inputDate;

    for ( var i = n.length; i--; ) {
        if ( n[i].nodeType === 3 && n[i].nodeValue.trim().length ) {
              inputDate = n[i].nodeValue.trim();
              n[i].nodeValue = // modify the input date        
        }
    }
});

答案 4 :(得分:1)

这也有效..

var months = {
  1: 'jan',
  2: 'feb',
  3: 'march',
  4: 'apr',
  5: 'may',
  6: 'june',
  7: 'july',
  8: 'aug',
  9: 'sep',
  10: 'oct',
  11: 'nov',
  12: 'dec'
};

var currentDate = "2014-11-16"; // your date string would go here. Note, I left the retrieval of it out. This is trivial w/ jQuery... $('.release-date').text();

var redrawnCurrentDate = currentDate.replace(/(\d{2})-(\d{2})$/,function(_,$1,$2){
    return months[$1] + "-" + $2;
});

$('.release-date').text(redrawnCurrentDate);