JavaScript 中如何消除内联日期插入时产生的多余空格-html教程-PHP中文网

JavaScript 中如何消除内联日期插入时产生的多余空格

在 HTML 中通过 JavaScript 动态插入年份（如版权年份后两位）时，常因换行或空白符导致 ' 与数字间出现意外空格；本文提供两种可靠方案：直接移除源码空白，或采用语义化 DOM 插入，确保字符紧贴无间隙。

在 html 中通过 javascript 动态插入年份（如版权年份后两位）时，常因换行或空白符导致 `'` 与数字间出现意外空格；本文提供两种可靠方案：直接移除源码空白，或采用语义化 dom 插入，确保字符紧贴无间隙。

HTML 中的文本节点会忠实保留源码中的空白字符（包括换行、制表符和空格）。在原始写法中：

<p id="copyright">
© '<script>
document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear().toString().substr(-2)))
</script>
Company Name
</p>

' 后的换行符被解析为一个空白文本节点，导致 ' 和 24 之间出现不可见但实际存在的空格（渲染为 © ' 24 Company Name）。

✅ 方案一：消除源码空白（轻量、即时）
将 <script> 标签紧贴 '，不留任何空白或换行：</script>

<p id="copyright">
© '<script>
document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear().toString().substr(-2)));
</script>Company Name
</p>

⚠️ 注意：<script> 结束标签 </script> 之后必须立即接 Company Name（无换行、无空格），否则仍会引入空白节点。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

✅ 方案二：结构化 DOM 操作（推荐、可维护）
使用独立占位，并通过 textContent 写入——完全规避 HTML 文本节点的空白干扰：

<p id="copyright">
  © '<span id="copyright-year"></span>Company Name
</p>

const copyrightYear = new Date().getFullYear().toString().substr(-2);
document.querySelector('#copyright-year').textContent = copyrightYear;

? 关键要点：

必须紧邻 '（中间不能有空格或换行）；
使用 textContent 而非 innerHTML，避免 XSS 风险且语义清晰；
此方式便于后续维护（如添加 CSS 类、国际化年份格式等）。

? 补充建议：若需兼容更早年份（如 2001 → '01），substr(-2) 在 getFullYear()

const year = new Date().getFullYear();
const lastTwo = String(year).padStart(4, '0').slice(-2); // 安全获取末两位
document.querySelector('#copyright-year').textContent = lastTwo;

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南