Javascript翻译模板

Javascript Translation Templating

本文关键字：翻译 Javascript      更新时间：2023-09-26

我目前正在重新实现Facebook国际化XFBML标签的前端，这个标签已经被破坏了很长一段时间。我几乎完成了，但有一个问题：在不丢失子节点信息的情况下替换标记化翻译。

对于背景，翻译标签看起来像这样：

<fb:intl>
Text goes here and you can have {a-token} like this.
<fb:intl-token name="a-token">parameters</fb:intl>
</fb:intl>

你给他们传一个这样的字符串：Text goes here and you can have {a-token} like this.

然后你会得到一个这样的翻译字符串：El texto va aquí y usted puede tener {a-token} como ésta.

这样，即使可以放入动态数据，也只能转换字符串一次。最酷的部分（也是问题）是你可以嵌套这些字符串。因此，令牌中可能有另一个嵌套的fb:intl标签，而不是"parameters"的纯文本（反过来，它可能还有另一个标签，等等）。

我试图做的是在不丢失子节点上下文的情况下进行此替换。因此，我只想取<fb:intl-token>标记并将其移动，以替换代表其在字符串中位置的{token}。

关于如何有效地做到这一点，有什么想法吗？

经过一番黑客攻击，我终于想出了一个解决方案。

伪码是这样的：

  1. 使用jQuery的.clone(true)克隆原始元素（以维护所有原始数据等）
  2. 使用.empty()清空克隆的元素
  3. 将.html()设置为regex，将标记替换为html元素，以便可以通过jQuery:.replace(/{([a-zA-Z'-]+)}/, '<span id="$1"></span>')轻松操作它们
  4. 循环遍历原始元素的fb:intl-token子元素，并对每个子元素执行$(this).insertBefore(placeHolder);（其中placeHolder是步骤3中替换的令牌——这就是为什么它的id基于令牌名称）
  5. 从克隆的元素中删除占位符
  6. 用克隆替换原始元素

到目前为止，这似乎运行得很好。

相关文章：