用户脚本来转换网页上显示的时区时区？

Question

是否可以在Tampermonkey for Chrome中转换时区？

我在table / td元素内的网站上有一个给定的日期。 EG：

<td align="center">8:00 PM ET</td>

我想将ET / EST更改为我的时区（CET）。 EG：

<td align="center">2:00 AM CET</td>

脚本如何做到这一点？

Answer 1

要转换时区，您需要：

1. 获取正确的节点和/或表格单元格。
2. 解析内容，无论使用何种日期/时间格式。
3. 转换值，重新格式化，使用新值更新页面。

获取正确的节点：

要获取节点，请使用waitForKeyElements()之类的内容。它使用灵活的jQuery选择器^{（EG："td:contains('M ET')"）}，适用于静态和动态页面。

阅读：how to choose good selectors。问题没有提供足够的信息来选择一个好的选择器


解析日期/时间文本：

解析时间（和日期）很棘手，因为使用了无数的格式，不断变换的时区和“节省时间”干预。
出于这个原因，使用专家进行时间/日期格式化和转换的库 对于像这样的大多数内容，我建议使用the Moment Timezone library。请参阅下面的代码。

转换并更新日期/时间：

转换由同一个库（Moment Timezone）处理。在此实例中，使用jQuery的.text()更新页面


完整的，工作的Tampermonkey脚本 _{^{（只是第一个灰色块）}} ：

// ==UserScript==
// @name     _Convert displayed times from one timezone to another
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @require  https://momentjs.com/downloads/moment.min.js
// @require  https://momentjs.com/downloads/moment-timezone-with-data-2012-2022.min.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

const pagesTimezone     = "America/New_York";   // Old style = EST/EDT
const desiredTimezone   = "Europe/Luxembourg";  // Old style = CET

//-- You need to provide a more selective selector.
waitForKeyElements ("td:contains('M ET')", convertTimezone); // installed script line

function convertTimezone (jNode) {
    var timeStr     = jNode.text ().trim ();  // expected like "8:00 PM ET"
    var origTime    = moment.tz (timeStr, "hh:mm a", pagesTimezone);
    var localTime   = origTime.tz (desiredTimezone).format ("h:mm A z");

    jNode.text (localTime);
}

/*--------------------------------------*/
/*--- Simulated target page follows: ---*/
/*--------------------------------------*/
table {border-collapse: collapse;  border: 1px solid gray;}
td {padding: 0.5ex 1em;  text-align: right;  border: 1px solid gray;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js"></script>
<script src="//momentjs.com/downloads/moment.min.js"></script>
<script src="//momentjs.com/downloads/moment-timezone-with-data-2012-2022.min.js"></script>
<table>
  <caption>Some times (EST/EDT)</caption>
  <tr><td>12:01 AM ET</td><td> 2:02 AM ET</td><td> 4:03 AM ET</td><td> 6:04 AM ET</td></tr>
  <tr><td> 8:05 AM ET</td><td>10:06 AM ET</td><td>12:07 PM ET</td><td> 2:08 PM ET</td></tr>
  <tr><td> 4:09 PM ET</td><td> 6:10 PM ET</td><td> 8:11 PM ET</td><td>10:12 PM ET</td></tr>
</table>

说明：

1. 有关.tz()来电中使用的格式说明符的说明，请参阅the Moment parsing docs。
2. 请参阅the docs for parsing the timezone。
3. 请参阅a list of timezone identifiers以选择最适合您目的的那个。