随着全球化的趋势，网站的国际化需求越来越高。在前端开发中，实现多语言翻译是必不可少的一环。常见的做法是使用前端框架或第三方库来实现，但这些方法通常需要额外的学习成本和更多的代码维护成本。在本文中，我们将介绍一种简单易用、无需框架的页面翻译解决方案，它基于HTML注释实现。
实现思路
利用HTML注释实现页面翻译的思路很简单：为每个需要翻译的文本节点添加一个带有语言标识的注释，在JavaScript中获取当前语言配置，根据语言标识找到对应的注释并替换文本内容。下面是一个示例：
---------------- -----------------------------
在上面的代码中，我们为<p>标签添加了两个注释，分别表示英文和中文的翻译。当用户选择英文时，我们可以通过以下代码获取所有带有英文注释的元素，并将其内部文本替换为相应的翻译内容：
--- ---- - ----- -- -------
--- ----- - ------------------------------- -- -----------
---------------------------- -
--- ------- - ---------------- -- ---------
----- --------- -
-- ----------------- --- ----------------- -- ------------------------------ - ---- --- -- -
---------------- - ------------------------------- -- ------
------
-
------- - --------------------
-
---上面的代码首先获取了用户选择的语言en，然后使用querySelectorAll方法获取所有需要翻译的元素。接着遍历每个元素的子节点，找到第一个注释节点并根据语言标识替换文本内容。
示例代码
下面是一个完整的页面翻译示例代码，包含了两种语言（英文和中文）的翻译：
--------- -----
------
------
----- ----------------
----------- ----------- ---------------
-------
------
----------------- ------------------------------
-------------- -- - ------ ------- -- ---- ----------- ----- ---- --------------------------------------------------
------- ----------------------------
------- -----------------------
--------
-- -----------
--- ---- - -----
----------------
-- --------
----------------------------------------------------------- ---------- -
---- - -----
----------------
---
----------------------------------------------------------- ---------- -
---- - -----
----------------
---
-- ------
-------- --------------- -
--- ----- - -----------------------------------------
---------------------------- -
---------------- - --------------------------------- --- ---- - - - ---
---
-
---------
-------
-------在上面的代码中，我们使用了data-i18n属性来标识需要翻译的元素，并将不同语言的翻译用分号;隔开。页面加载时默认显示英文，用户可以通过点击按钮切换到中文。当用户切换语言时，会调用translate函数来更新页面
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32076