Javascript翻譯模板

Question

我目前正致力於重新實施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標記（這又可能具有另一個內部等等）。

我想要做的是做這個替換而不會丟失子節點的上下文。所以我想只取<fb:intl-token>標籤並將其移動以取代表示其在字符串中的位置的{token}。

關於如何有效地做到這一點的任何想法？

Answer 1

經過相當多的黑客攻擊之後，我能夠想出一個解決方案。

的僞碼是這樣的：

1. 克隆使用jQuery的.clone(true)（以維持所有的原始數據，等）的原始元素。
2. 用.empty()清空克隆的元素。
3. 將.html()設置爲正則表達式替換爲html元素，以便通過jQuery輕鬆操作它們：.replace(/{([a-zA-Z\-]+)}/, '<span id="$1"></span>')。
4. 遍歷原始元素的fb:intl-token兒童和每一個，做$(this).insertBefore(placeHolder);（其中佔位符是從第3步替換令牌 - 這就是爲什麼它的ID是基於令牌的名稱）
5. 從克隆的元素中取出佔位符。
6. 用克隆替換原始元素。

到目前爲止，這似乎是工作只是丹迪。