以 html 标签作为选择器的字符串

Question

我正在开发一个使用 I18N 的网站。

我有一个翻译团队在网站上检查翻译。

如果他们愿意，他们可以通过将鼠标放在要翻译的字符串上来提供新的翻译。

我需要检测 PO 文件中当前页面上使用的所有字符串，并在字符串的直接父级上添加一个类，以便我可以添加一个文本输入来提交新翻译。

因此，我创建了一个函数来存储当前页面中使用的每个翻译（PO 文件中的基本字符串和 PHP 注入的数据的最终翻译），并将它们作为 JSON 对象传递给 JavaScript。

现在，我必须在页面中找到所有这些翻译。

我的问题是在它们包含 html 标签时匹配它们。

在我的 PO 文件中：

msgid "Bonjour <strong>%s</strong>"
msgstr "Hi <strong>%s</strong>"

我的页面来源： >

<div>Hi <strong>Tristan</strong></div>

这里我需要

1. 匹配Hi Tristan
2. 向直接父级添加一个类（这里是“div”节点）
3. 然后我将能够附加我的文本输入以提交新翻译

我怎样才能匹配呢？我想我需要使用翻译后的字符串作为选择器。

我想避免在 PHP 处理过程中用元素包装 i18n 字符串（因为它会以某种方式改变 DOM，从而对网站的设计产生影响），但另一方面，使用来自PO 文件在浏览器端似乎也相当重。

有什么提示吗？

Answer 1

在@lonesomeday之后，我也会使用跨度。这就是他们的目的。
这就是跨度应该在的位置：

msgid "Bonjour %s" msgstr "嗨 %s"
变成：

• Bonjour Tristan <
• span class='I18N'>Hi < strong>Tristan

javascript 则变为：

$(document).ready(function(){
  $('.I18N').closest('*').addClass('inputI18N');
});