利用JavaScript动态转换HTML中相对日期显示为绝对时间戳

程序猿 • 2025年12月23日 13:05:29 • 用户投稿

本教程旨在指导如何使用javascript将网页中以“x月y天前”等相对格式显示的日期转换为html `data`属性中存储的精确iso时间戳。文章将通过dom操作，详细讲解如何定位目标元素、提取数据属性值，并更新其文本内容，提供示例代码和注意事项，帮助开发者实现日期显示优化。

在现代网页应用中，为了提升用户体验，日期和时间常常以相对形式展示，例如“2小时前”、“3天前”或“9个月10天前”。然而，在某些场景下，用户或开发者可能需要查看精确的绝对时间戳，以便进行数据分析、调试或记录。幸运的是，许多网页在HTML结构中已经预埋了这些精确的时间信息，通常存储在元素的data属性中。本教程将详细介绍如何利用JavaScript来获取这些隐藏的绝对时间戳，并将其动态替换掉页面上显示的相对日期。

理解问题与解决方案

假设我们遇到以下HTML结构，其中

元素显示的是相对日期，但其data属性中包含了ISO格式的精确时间戳：

   9 mo 10 days -    #2170

我们的目标是将” 9 mo 10 days -“这段文本替换为”2021-12-17T06:32:13Z”。实现这一目标的关键在于以下两点：

定位目标元素： 找到包含相对日期和data属性的元素。提取并替换内容： 获取data属性的值，并用它来更新元素内的文本内容。

实现步骤与代码示例

我们将使用JavaScript的DOM操作API来完成这一任务。

立即学习“Java免费学习笔记（深入）”；

1. 编写JavaScript函数

首先，创建一个JavaScript函数来封装替换逻辑。这个函数将负责查找元素、读取属性和更新文本。

/** * 替换HTML表格单元格中的相对日期为data属性中存储的绝对时间戳。 *  * @param {string} selector 用于定位目标元素的CSS选择器。 *                          例如：'td[data]' 或 '#job-id td'。 */function replaceRelativeDateWithTimestamp(selector) {  // 使用document.querySelector获取第一个匹配的元素  // 如果页面中有多个需要替换的元素，可以使用document.querySelectorAll并遍历  const targetCell = document.querySelector(selector);  if (targetCell) {    // 获取data属性的值，即精确的时间戳    const timestamp = targetCell.getAttribute('data');    // 检查timestamp是否存在    if (timestamp) {      // 修改元素的第一个文本节点的数据。      // 注意：如果内部有其他子元素（如标签），      // firstChild可能指向文本节点，也可能指向其他元素。      // 在本例中，" 9 mo 10 days -"是第一个文本节点。      // 如果内只有文本，也可以直接使用 targetCell.textContent = timestamp;      // 找到第一个子节点，并确保它是文本节点      let firstChildNode = targetCell.firstChild;      while (firstChildNode && firstChildNode.nodeType !== Node.TEXT_NODE) {          firstChildNode = firstChildNode.nextSibling;      }      if (firstChildNode) {          firstChildNode.data = timestamp + ' - '; // 加上原始的连接符      } else {          // 如果没有找到文本节点，直接设置textContent（可能会覆盖所有子元素）          targetCell.textContent = timestamp + ' - ';      }      console.log(`日期已更新为: ${timestamp}`);    } else {      console.warn(`元素 ${selector} 没有找到 'data' 属性。`);    }  } else {    console.warn(`未找到匹配选择器 '${selector}' 的元素。`);  }}// 示例调用：// replaceRelativeDateWithTimestamp('td[data]'); // 或者更具体的选择器，例如：// replaceRelativeDateWithTimestamp('#job-id td');

2. 结合HTML进行演示

为了演示上述函数的效果，我们创建一个简单的HTML页面，包含一个表格和触发替换的按钮。

            动态替换日期            table, th, td {            border: 1px solid #ccc;            border-collapse: collapse;            padding: 8px;            text-align: left;        }        button {            margin-top: 15px;            padding: 10px 20px;            cursor: pointer;        }        动态替换表格日期示例
                                        构建日期                 构建ID             
        
                                     9 mo 10 days -                    #2170                                #2170             
                             1 year 5 months ago -                    #3001                                #3001             
        
    
    
                /**         * 替换HTML表格单元格中的相对日期为data属性中存储的绝对时间戳。         *          * @param {string} selector 用于定位目标元素的CSS选择器。         *                          例如：'td[data]' 或 '#job-id td'。         */        function replaceRelativeDateWithTimestamp(selector) {            // 使用document.querySelectorAll获取所有匹配的元素            const targetCells = document.querySelectorAll(selector);            if (targetCells.length > 0) {                targetCells.forEach(targetCell => {                    const timestamp = targetCell.getAttribute('data');                    if (timestamp) {                        let firstChildNode = targetCell.firstChild;                        while (firstChildNode && firstChildNode.nodeType !== Node.TEXT_NODE) {                            firstChildNode = firstChildNode.nextSibling;                        }                        if (firstChildNode) {                            firstChildNode.data = timestamp + ' - ';                        } else {                            targetCell.textContent = timestamp + ' - ';                        }                        console.log(`日期已更新为: ${timestamp}`);                    } else {                        console.warn(`元素 ${targetCell.outerHTML} 没有找到 'data' 属性。`);                    }                });            } else {                console.warn(`未找到匹配选择器 '${selector}' 的元素。`);            }        }

构建日期	构建ID
9 mo 10 days - #2170	#2170
1 year 5 months ago - #3001	#3001

在上面的HTML示例中，我们修改了replaceRelativeDateWithTimestamp函数，使其能够处理页面上所有带有data属性的

元素，通过document.querySelectorAll获取所有匹配项并进行遍历。

注意事项与最佳实践

选择器精确性： 使用具体的CSS选择器（如#job-id td或.job-id-class td[data]）可以更精确地定位目标元素，避免误伤其他不相关的元素。如果页面中有多个需要替换的元素，使用document.querySelectorAll并遍历是更健壮的做法。处理多种子节点： firstChild.data适用于目标文本是元素第一个子节点的情况。如果内部结构复杂，例如文本节点后面跟着其他元素，或者文本节点不是第一个子节点，直接使用firstChild.data可能无法达到预期效果。此时，可能需要更复杂的DOM遍历（如示例中的while循环）来找到正确的文本节点，或者考虑直接设置textContent（这会覆盖所有子元素）。错误处理： 在实际应用中，应添加对targetCell和timestamp是否存在的检查，以防止因元素或属性缺失导致的运行时错误。性能考虑： 对于包含大量表格行或需要频繁更新的页面，频繁的DOM操作可能会影响性能。在这种情况下，可以考虑使用虚拟DOM库（如React, Vue）或更优化的DOM更新策略（如批量更新）。时区处理： 2021-12-17T06:32:13Z是一个ISO 8601格式的时间戳，其中Z表示UTC时间。在显示给用户时，可能需要根据用户的本地时区进行转换。JavaScript的Date对象可以帮助完成这一转换。用户体验： 如果替换是即时发生的，用户可能不会注意到。如果替换操作有延迟，可以考虑在替换前显示加载指示器，或在替换后提供视觉反馈。

总结

通过本教程，我们学习了如何利用JavaScript的DOM操作功能，将HTML元素中相对格式的日期动态替换为存储在data属性中的精确ISO时间戳。掌握document.querySelector/querySelectorAll、getAttribute和firstChild.data等API，可以有效地对网页内容进行客户端侧的动态调整，从而提升数据展示的灵活性和用户体验。在实际开发中，请务必考虑选择器的精确性、DOM结构的复杂性以及潜在的性能影响，以构建健壮高效的解决方案。

以上就是利用JavaScript动态转换HTML中相对日期显示为绝对时间戳的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1598621.html

css css选择器 go html html元素 java javascript node react vue

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

深入理解与解决Ionic中:host样式覆盖问题

上一篇 2025年12月23日 13:05:26

JavaScript表单验证与数学函数：库存管理中的常见陷阱与优化实践

下一篇 2025年12月23日 13:05:34

用户投稿

java中new的作用对象实例化的底层机制解析

new关键字用于分配内存并初始化对象。1）jvm在堆中分配内存，设置对象头信息。2）调用构造方法完成初始化。3）使用对象池和延迟初始化可优化性能。在Java中，new关键字是一个非常基础却又强大的工具，用于创建对象实例。那么，new的作用究竟是什么？对象实例化的底层机制又是如何运作的？让我们深入探…

程序猿
2026年8月25日
0000
Java中JDBC的作用是什么详解JDBC规范统一数据库操作的优势

jdbc通过提供标准api简化数据库操作。1. 加载数据库驱动，2. 建立数据库连接，3. 执行sql语句，4. 处理结果集。使用preparedstatement可有效防止sql注入攻击，同时对用户输入进行验证、过滤及采用最小权限原则进一步保障安全性。 JDBC（Java Database Con…

程序猿
2026年8月25日 • 用户投稿
0000
用户投稿

苹果发布Safari技术预览版224：优化性能与修复多项问题

近日，苹果推出了Safari技术预览版的最新迭代——Safari Technology Preview 224。此次更新重点在于修复已知问题并提升整体性能，涉及多个关键技术模块，如可访问性支持、动画效果、CSS渲染、表单处理、图像显示、文本排版、Web API实现、扩展功能兼容性以及开发者工具Web…

程序猿
2026年8月25日
0000
Java中jstack的用法详解线程转储

jstack是用于诊断java应用线程问题的关键工具，它通过生成线程转储帮助分析死锁、cpu占用高及线程等待等问题。1. 使用jps获取java进程pid；2. 执行jstack pid生成线程转储文件；3. 分析转储中的线程状态与堆栈信息，查找死锁或性能瓶颈。线程状态如blocked、waitin…

程序猿
2026年8月25日 • 用户投稿
1000
用户投稿

动态内省Java类中的Jackson @JsonNaming 策略

本文探讨了在Java中进行泛型数据反序列化时，如何动态地获取类上通过@JsonNaming注解设置的PropertyNamingStrategy。通过利用Jackson的SerializationConfig、BeanDescription和JacksonAnnotationIntrospector…

程序猿
2026年8月25日
0000
告别文件类型识别难题：adrienrn/php-mimetyper助你轻松搞定MIME类型

最近在开发一个文件上传和下载相关的模块时，我遇到了文件类型识别的问题。我需要根据文件的扩展名来判断其 MIME 类型，以便正确地处理这些文件。然而，我发现 PHP 内置的函数或者一些简单的库并不能提供足够准确和全面的 MIME 类型映射。一些文件类型的识别不够准确，而且缺少对一些常见文件类型的支持。…

程序猿
用户投稿 2026年8月25日
3000
Java中HashMap的工作原理是什么图解Java HashMap的存储结构和哈希机制

java hashmap通过哈希表实现键值对的高效存储与检索，其底层结构为数组加链表（或红黑树），1. 哈希函数将键转换为数组索引以定位存储位置；2. 使用链地址法解决哈希冲突，jdk 1.8后引入红黑树优化长链表查找效率；3. put操作包括计算哈希、定位桶、处理冲突及扩容判断；4. get操作通…

程序猿
2026年8月25日 • 用户投稿
6000
用户投稿

如何用免费工具做商务PPT_免费商务PPT制作的实用方法

使用免费工具制作专业商务PPT，首选WPS Office在线版，提供丰富模板并支持云同步；其次利用AiPPT的AI功能，输入主题即可自动生成完整大纲，提升效率；再通过iSlide插件优化设计，实现配色统一、图表智能转换与布局校正；最后可选Canva可画，以拖拽方式快速编辑高颜值幻灯片，支持多尺寸适配…

程序猿
2026年8月25日
0000
Java中对象流怎么使用掌握Java序列化对象的读写方法

java对象流用于序列化和反序列化，即将对象转换为字节流以实现存储或传输。1. 要实现序列化，类需实现serializable接口并建议显式声明serialversionuid；2. 使用objectoutputstream将对象写入输出流完成序列化；3. 使用objectinputstream从输…

程序猿
2026年8月25日 • 用户投稿
0000
Java中Semaphore和Exchanger的应用场景解析

semaphore和exchanger在java并发编程中各司其职。1. semaphore用于控制对共享资源的访问数量，适用于资源池限制、有界队列等场景；2. exchanger用于两个线程之间的数据交换，适用于生产者-消费者模型中直接交换数据的场景。semaphore通过acquire()和re…

程序猿
2026年8月25日 • 用户投稿
0000
用户投稿

如何查看一键PHP环境PHPINFO信息_PHPINFO配置查看

要查看PHP环境配置需调用phpinfo()函数，首先在网站根目录创建info.php文件并写入代码，保存后通过浏览器访问http://localhost/info.php即可查看版本、扩展、路径等详细信息；主流一键环境如PHPStudy、XAMPP、WAMP、Laragon均提供图形化入口，例如P…

程序猿
2026年8月25日
0000
java中的consumer关键字用途消费者Consumer的2个典型应用

java中的consumer接口用于定义不返回结果的操作，其核心目的是简化代码并提升可读性与维护性。1. 它常用于集合的foreach方法，实现更简洁的遍历操作；2. 在stream api中通过peek和foreach方法支持中间处理与最终操作；3. 可自定义多参数consumer接口以满足特定需…

程序猿
2026年8月25日 • 用户投稿
0000
用户投稿

Go怎么结合Gin导出Mysql数据到Excel表格

1、实现目标 Golang 使用excelize 导出表格到浏览器下载或者保存到本地。后续导入的话也会写到这里 2、使用的库 go get github.com/xuri/excelize/v2 3、项目目录 go-excel├─ app│ ├─ excelize│ │ └─ excelize.go…

程序猿
2026年8月25日
0000
用户投稿

Android自定义视图状态保存：避免直接序列化Drawable对象的策略

在android自定义视图中保存状态时，直接将`drawable`对象序列化到`parcelable`中是不可行的，因为`drawable`及其子类通常不实现`parcelable`接口，会导致`classcastexception`。正确的做法是保存`drawable`的资源id，并在状态恢复时通…

程序猿
2026年8月25日
1000
Java中如何创建线程详解三种创建线程的方式

java中创建线程的核心方式有三种：实现runnable接口、继承thread类、使用executorservice。1.实现runnable接口是推荐方式，通过实现run()方法定义任务，再由thread执行，避免单继承限制并解耦任务与线程；2.继承thread类则直接重写run()方法，虽简单但…

程序猿
2026年8月25日 • 用户投稿
5000
Java中可重入锁的作用解析ReentrantLock的实现原理

可重入锁允许一个线程多次获取同一把锁，避免线程自身被锁死。1.reentrantlock基于aqs实现，通过cas操作和fifo队列管理锁的获取与释放；2.可重入性通过判断当前线程是否为锁持有者实现，state值记录重入次数；3.释放锁时减1，state为0才唤醒等待线程；4.可重入性在一定程度上避…

程序猿
2026年8月25日 • 用户投稿
1000
用户投稿

CSS mask属性无法获取图片：为什么我的图片不见了？

CSS mask属性无法获取图片在使用CSS mask属性时，可能会遇到无法获取指定照片的情况。这个问题通常表现为：网络面板中没有请求图片：尽管CSS代码中指定了图片地址，但网络面板中却找不到图片的请求记录。问题原因：此问题的可能原因是浏览器的兼容性问题。某些较旧版本的浏览器可能不支持CSS…

程序猿
2025年12月24日
20000
用户投稿

如何用dom2img解决网页打印样式不显示的问题？

用dom2img解决网页打印样式不显示的问题想将网页以所见即打印的的效果呈现，需要采取一些措施，特别是在使用了bootstrap等大量采用外部css样式的框架时。问题根源在常规打印操作中，浏览器通常会忽略css样式等非必要的页面元素，导致打印出的结果与网页显示效果不一致。这是因为打印机制只识别…

程序猿
2025年12月24日
13000
用户投稿

如何用 CSS 模拟不影响其他元素的链接移入效果？

如何模拟 css 中链接的移入效果在 css 中，模拟移入到指定链接的效果尤为复杂，因为链接的移入效果不影响其他元素。要实现这种效果，最简单的方法是利用放大，例如使用 scale 或 transform 元素的 scale 属性。下面提供两种方法： scale 属性： .goods-item:ho…

程序猿
2025年12月24日
9000
用户投稿

Uniapp 中如何不拉伸不裁剪地展示图片？

灵活展示图片：如何不拉伸不裁剪在界面设计中，常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。对于不同尺寸的图片，可以采用以下处理方式：极端宽高比：撑满屏幕宽度或高度，再等比缩放居中。非极端宽高比：居中显示，若能撑满则撑满。然而，如果需要不拉伸不…

程序猿
2025年12月24日
6000